vue-cli $nextTick（）、$forceUpdate()方法 、自定义指令和自定义插件

一、$nextTick（）、$forceUpdate()方法

<template>
 <input type="text" v-model="carName" />
    <button @click="addCar">添加汽车</button>
    <ul ref="list">
      <li v-for="item in cars" :key="item.id">
        <input type="text" :value="item.name" />
      </li>
    </ul>
 <hr />
    <div>
      <button @click="employe.name='蔡依林'">修改姓名</button>
      <button @click="addSex">添加性别</button>
      <div>{{ employe.name }}---{{ employe.age }}</div>
    </div>
</template>

<script>
 methods: {
    addCar() {
      let car = {
        id: Date.now(),
        name: this.carName,
      };
      this.cars.push(car);
      this.carName = "";
      // $nextTick方法，需要传一个回调函数
      // 回调函数里面的代码在DOM更新完成后执行
      this.$nextTick(() => {
        // 让最后一个li元素获取焦点
        this.$refs.list.lastChild.lastChild.focus();
      });
    },
    addSex() {
      // this.$set(this.employe,'sex','男')
      this.employe.sex = "男";
      this.$forceUpdate();
      console.log(this.employe);
    },
  },
</script>

二、局部自定义指令

<template>
  <div class="two">
    <div v-red>好好学习</div>
    <div v-html="car" v-color="'blue'"></div>
    <div v-myhtml="car" v-color="'green'"></div>
  </div>
</template>
<script>
export default {
  name: "Two",
  //定义局部指令，所有的指令背后都是在操作DOM，称之为：造轮子
  //自定义局部指令,就是一个方法，有个参数叫el,就是这个指令所在的DOM元素，就是这个div
  directives: {
    red: function (el) {
      el.style.color = "red";
    },
    //指令方法的第二个参数，是指令的值，可写可不写，也可自定义
    myhtml: function (el, bind) {
      el.innerHTML = bind.value;
    },
  },
  data() {
    return {
      car: "<h2>玛莎拉蒂</h2>",
    };
  },
};
</script>

三、全局自定义指令

// 创建全局自定义指令
// 1、directive文件夹的index文件中先引入vue
import Vue from 'vue'
//color是自定义指令的名字，使用的时候前面加上v-
Vue.directive('color',function(el,bind){
    //自定义局部指令,就是一个方法，有个参数叫el,就是这个指令所在的DOM元素，就是这个div
    //指令方法的第二个参数，是给指令绑定的值，可写可不写，bind也可自定义
    el.style.color=bind.value
})

2、然后去main.js中去注册

import index from './directive/index'

3、使用 v-color=" 'green' " "green"是变量 "'green'"是表达式，要加上单引号

 <div v-myhtml="car" v-color="'green'"></div>

四、自定义插件

 <button @click="sayHello">sayhello</button> |
   <button @click="showPlane">showPlane</button>
  <div v-bgcolor="'lightblue'">我是背景色</div>

混入只能写数据、方法和生命周期，插件的功能比混入更为强大，插件是扩展vue的功能

//插件本质上是一个对象
export default {
    // 该对象中必须包含install（）方法
    // install()方法第一个参数是Vue,第二个是配置对象
    //install（）方法会在use的时候执行vue.use(插件)，这里的vue会作为install方法的第一个对象
    install: function (Vue, options) {
        // 可以给vue直接添加方法
        Vue.sayHi = function () {
            console.log('大家好，我是vue');
        },
        //可以添加属性
        Vue.msg="欢迎使用插件",
        // 可以在vue的原型上添加方法
        Vue.prototype.sayHello = function () {
            console.log('我是vue原型上的方法');
        },
        Vue.mixin({  //混入只能写数据 方法 和生命周期
            data() {
                return {
                    plane:{
                        name:'波音747',
                        price:'1000w'
                    }
                }
            },
            methods: {
                showPlane(){
                    console.log(this.plane.name,this.plane.price);
                }
            },
        }),
        // 注册全局组件
        Vue.component('b-box',{
           render(h) {
               return h('div',this.$slots.default)
           },
        }),
        // 注册全局指令
        Vue.directive('bgcolor',function(el,bind){
            el.style.backgroundColor=bind.value
        })
       
        
    }

}

2、在main.js 里面导入

import myPlugin from './plugins'
Vue.use(myPlugin)