vue常用技巧

NODE_ENV =‘development‘

VUE_APP_URL=http://192.168.203.173:9120  //问答api地址
VUE_APP_WEB_URL=http://192.168.203.173:8082  //测评小程序后台 api地址
VUE_APP_CP_URL=http://192.168.203.173:8380   //保费试算
登录地址
VUE_APP_LOGIN=http://192.168.203.173:8082/user/authLogin
返回地址
VUE_APP_CALLBACK=http://192.168.203.43:8085/main

import one from ‘@/components/one ‘
import two from ‘@/components/two‘
import three from ‘@/components/three‘
...

components:{one,two,three, ...}

const path = require(‘path‘)

const filre = require.context(‘@/components‘,true /\.vue$/)
const moudles = {}
filre.keys().map( key => {
    const name = path.basename(key,‘.vue‘)
    moudles[name] = filre(key).default||filre(key)
})

components: moudles

 watch:{
    value:{
      handler: function(){
      },
      immediate: true
    }
  },

 data () {
    return {
      value:{
        name:‘xx‘,
        has:{
          car:‘xx‘
        },
      }
    }
  },
  watch:{
    value:{
      handler: function(){
        
      },
      deep: true
    }
  },

//数组：不推荐使用
props:[]

//对象
props:{
 inputVal:{
     type: String,//传入值限定类型 
     required: true,//是否必填
     default: ‘a‘,//默认值 对象或数组默认值必须从一个工厂函数获取如 default:()=>[]
     validator:(value)=>{
         // 这个值必须匹配下列字符串中的一个
         return [‘a‘,‘b‘,‘c‘].includes(value)
     }
 }
}

// 父组件
<home @title="title">

// 子组件
this.$emit(‘title‘,[{title:‘这是title‘}])

state //定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问

getter //获取 store 值,可认为是store的计算属性,可通过this.$store.getter 或mapGetters访问

mutation //同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值,vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用

action //异步调用函数执行mutation,进而改变store值,可通过this.$dispatch或mapActions访问

modules:模块,如果状态过多,可以拆分成模块

// 父组件
<chlidren title="这是标题" width="80" height="80" />

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80"}
},


//如果子组件定义了props，则剔除定义的属性

// 父组件
<chlidren title="这是标题" width="80" height="80" />

// 子组件
props: {
    title: {
        type: String,
        default: ‘‘
    }
}
mounted() {
  console.log(this.$attrs) //{ width: "80", height: "80"}
},

// 父组件
<chlidren @getList="getList" />

// 子组件
mounted() {
  this.$listeners.getList //调用父组件里面的getList方法
},

<button  @click="testClick()" ref="button">{{testMsg}}</button>

methods:{
    testClick:function(){
      this.testMsg="修改后的值";
      console.log(this.$refs.button.innerText);   //this.$refs.button，输出：原始值
    }
  }

methods:{
    testClick:function(){
      let that=this;
      this.testMsg="修改后的值";
      this.$nextTick(()=>{
        console.log(this.$refs.button.innerText);  //输出：修改后的值
      });
    }
  }

// 全局定义
Vue.directive("change-color",function(el,binding,vnode){
  el.style["color"]= binding.value;
})

// 使用
<template>
<div v-change-color="color">{{message}}</div>
</template>
<script>
  export default{
    data(){
      return{
        color:‘green‘
      }
    }
  }
</script>


// el : 指令所绑定的元素，可以用来直接操作DOM
// binding: 一个对象，包含指令的很多信息
// vnode: VUE编译生成的虚拟节点

// 用法

{{xxxx| time}}

// 全局注册
Vue.filter(‘time‘, (value) =>{
  // 处理逻辑
})

//局部处理
filters: {
  time: (value)=> {
    // 处理逻辑
  }
}

<span v-pre>{{msg}}</span>  //{{msg}}

// 即使data里定义了msg这里仍然是显示的{{msg}}

.stop //阻止冒泡
.prevent //阻止默认行为
.self //仅绑定元素自身触发
.once //只触发一次
.passive // 滚动事件的默认行为(即滚动行为)将会立即触发,不能和.prevent 一起使用

<transition name="fade" mode="out-in">
     <keep-alive>
            <router-view  v-if="$route.meta.keepAlive" />
    </keep-alive>
</transition>
<transition name="fade" mode="out-in" >
       <router-view v-if="!$route.meta.keepAlive"/>
</transition>