Vue-cli——映射函数、自定义插件、自定义指令

好看的网页千篇一律，有趣的代码万里挑一。

今天继续分享一些基础知识点，关键字：

映射函数、自定义插件、自定义指令、$nextTick()

1. 导入映射函数

// 从vuex中，导入映射函数
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

2. 使用映射函数生成计算属性

computed:{
    //如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，
    //就可以使用mapState映射函数，自动生成页面中的计算属性。
    ...mapState(['cars']),
    //注意：如果要映射模块里面的state，函数的第一个参数设置为模块的名称
    ...mapState('phone',['phones']),
    //如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，
    //就可以使用mapGetters映射函数，自动生成页面中的计算属性。
    ...mapGetters(['totalCarPrice']), 
    //注意：如果要映射模块里面的getters，函数的第一个参数设置为模块的名称
    ...mapGetters('phone',['totalPhonePrice'])
}

3. 使用映射函数生成方法

// 注意1：生成的方法名跟mutations里面的方法名相同。
// 注意2：生成的方法会带有一个参数，通过参数传递数据。
...mapMutations(['deleteCar']),
// 注意：如果要映射模块里面的方法，第一个参数传递模块的名称
...mapMutations('phone',['deletePhone'])
...mapActions(['addCar'])
...mapActions('phone',['addPhone'])

自定义插件、自定义指令

1. key

    
    

        {{item.id}}--{{item.name}}--{{item.sex}}--{{item.age}}
        添加年龄
    


    
学号：
    
姓名：
    
性别：
    
年龄：
    
添加

add(){
    //验证学号和姓名不能为空
    if(!this.obj.id || !this.obj.name) return alert('学号和姓名不能为空')
    //验证学号不能重复
    if(this.list.map(r=>r.id).includes(this.obj.id)) return alert('学号不能重复')
    //添加到数组中
    this.list.unshift(this.obj)
    //清空当前对象
    this.obj = {
        id:'',
        name:'',
        sex:'',
        age:''
    }
}

$nextTick()

// $nextTick()回调函数里面的代码，回在DOM渲染完毕后执行
// 在Vue中，如果我们需要手动操作DOM，经常会用到这个方法。  
this.$nextTick(()=>{
    this.$refs.car.focus()
})

自定义指令

directives:{
      //自定义一个指令，指令名称是myhtml，
      //自定义指令就是一个方法，该方法有两个参数：返回指令所在的dom元素，绑定的一份数据   
      myhtml:function(el,binding){
          el.innerHTML = binding.value
      },
      red:function(el){
          el.style.color = 'red'
      },
      color:function(el,binding){
          el.style.color = binding.value
      }
}

自定义插件

// 定义一个插件，插件就是将给Vue添加的全局成员，归类到一起去，这样做利于后期维护。
export default {
  //插件中必须包含一个install方法，方法的第一个参数不是Vue，后面的参数是可选的
  install: function(Vue) {
    // 注册全局指令
    Vue.directive("myhtml", function(el, binding) {
      el.innerHTML = binding.value;
    });
    Vue.directive("red", function(el) {
      el.style.color = "red";
    });
    Vue.directive("color", function(el, binding) {
      el.style.color = binding.value;
    });

    //全局混入，之后所有的Vue实例，都将拥有里面定义的成员
    Vue.mixin({
      data() {
        return {
          myName: "组件",
          myAge: 20,
        };
      },
      methods: {
        sayHi() {
          alert("大家好！");
        },
      },
    });

    //给Vue的原型对象添加成员，之后所有的Vue实例，都将共享这些成员
    Vue.prototype.address = "北京市朝阳区1001号";

    //全局过滤器
    Vue.filter("toFixed2", function(val) {
      return val.toFixed(2);
    });

    //注册全局组件
    Vue.component("b-button", {
      render: (h) => h("button", { style: { color: "red" } }, "按钮"),
    });
  },
};

// 导入自定义插件
import myPlugin from './plugin'
//use方法，就是去调用插件中的install方法。
Vue.use(myPlugin)