v-model 与：value 区别

  1. // v-model 不可以加其他值
  2. <input type="text" v-model="value">
  3. // :value 可以添加单位
  4. <inpit type="text" :value="value+'元'">

click.stop 组织事件冒泡

vue 设置全局变量

  1. // before - vue2
  2. Vue.prototype.$http=()=>{}
  4. // after - vue3
  5. app.config.globalProperties.$http=()=>{}

vue获取外网ip地址

  1. // 第一步 remote-js
  2. render(createElement){
  3.     return createElement('script',{ attrs: { type: 'text/javascript', src: this.src }})
  4. },
  5. props: {
  6.     src: { type: String, required: true},
  7. },
  9. // 
  10. components:{
  11.     "remote-js":{
  12.         render(createElement){
  13.             return createElement("script",{attrs:{type:"text/javascript",src:this.src}});
  14.         },
  15.         props:{
  16.             src:{type:String,required:true},
  17.         }
  18.     }
  19. }
  21. // 第二步 组件中使用
  22. <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
  24. // 调用相关方法获取 ip
  25. var ip = returnCitySN["cip"];
  26. console.log(ip,"ip")

vue中引入Echarts

  • 全局方式引入 ```javascript // 引入方式 // echarts 5.0 以前的版本 import echarts from ‘echarts’ // echarts 50 版本 import * as echarts from ‘echarts’

// 全局方式引入 // vue3 app.config.globalProperties.$echarts = echarts // vue2 Vue.prototype.$echarts = echarts

// 使用 var myChart = this.$echarts.init(document.getElementById(“main”));

  2. - 挂载到$root
  4. ```javascript
  6. import * as echarts from 'echarts'
  8. const app = createApp(App).mount('#app')
  9. app.echarts=echarts
  11. // 使用
  13. mounted(){
  14.     let myChart = this.$root.echarts.init(
  15.       document.getElementById("myChart")
  16.     );
  17. }
  • provide引入
  1. import * as echarts from 'echarts'
  2. import { provide } from 'vue'
  4. export default {
  5.   name: 'App',
  6.   setup(){
  7.     provide('ec',echarts)//provide
  8.   },
  9.   components: {
  10.   }
  11. }
  14. // 使用 
  15.  let echarts = inject("ec");//引入
  16. onMounted(() => {
  17.       let myChart = echarts.init(document.getElementById("main"));
  18. }

$emit

$emit 用于调用父组件中的方法 

  1. // children
  2. methods:{
  3.     childrenFun(){
  4.       this.$emit("funname",this.value)
  5.   }
  6. }
  8. // vue3 setup
  9. setup(props,ce){
  11. }
  1. <template>
  2.     <Children @funname="FatherFun"></Children>
  3. </template>
  4. <script>
  5. export default{
  6. methods:{
  7.     FatherFun(parameter){
  8.       // parameter 就是children 里面的this.value
  9.   }
  10. }
  12. </script>

vue插件

i18n

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。