vue的自定义指令

我们之前学习的v-if，v-for等等都是vue的系统指令，我们现在需要自己开发自定义指令

Vue.directive提供了自定义指令的入口

基本使用

我们在App.vue中设置了一个p元素

<p v-color='"blue"'>123456789</p>

v-color就是自定义的一个指令名称,blue就是属性值，我们的目的就是要让文字的颜色变成蓝色

在main.js中进行指令设置

import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'

Vue.directive("color",(el,binding)=>{
    console.log(el)
    console.log(binding)
    el.style.color=binding.value
})
new Vue({
    // 渲染节点
    render: h => h(App),
    // 挂载函数，内部#app是vue的根节点
}).$mount('#app')

color指的是自定义指令的名称，如果使用一定要加上v-

第二个参数可以是函数，也可以是对象

如果是函数，函数接受两个参数，第一个是返回的元素名称

 

 

返回结果

1. expression: "\"blue\""
2. modifiers: {}
3. name: "color"
4. rawName: "v-color"
5. value: "blue"

• expression：是一个表达式，返回的是我们设置给自定义指令的值
• modifiers：是自定义指令如果有修饰符的时候返回的布尔值对象
• name：就是自定义指令的名称
• rawName：就是我们可能设置的自定义指令的名称
• value：就是自定义指令的返回值

如果自定义指令的第二个参数是一个对象，内部是指令清单的函数钩子

import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'

Vue.directive("color",{
    bind:(el)=>{
        console.log("bind",el)
    },    //只调用一次，指的是指令第一次绑定到元素的时候调用
    inserted:(el)=>{
        console.log("inserted",el)
    },      //只调用一次，指的是节点插入到父节点中调用
    update:(el)=>{
        console.log("update",el)
    },          //数据更新时调用，在虚拟dom更新之前调用
    componentUpdated:(el)=>{
        console.log("componentUpdated",el)
    },          //数据更新时调用，在虚拟dom更新后调用
    unbind:(el)=>{
        console.log("unbind",el)
    },          //指令卸载的时候调用
})
new Vue({
    // 渲染节点
    render: h => h(App),
    // 挂载函数，内部#app是vue的根节点
}).$mount('#app')

• bind：只调用一次，指的是指令第一次绑定到元素的时候调用
• inserted：只调用一次，指的是节点插入到父节点中调用
• update：数据更新时调用，在虚拟dom更新之前调用
• componentUpdated：数据更新时调用，在虚拟dom更新后调用
• unbind：指令卸载的时候调用