vue自定义指令

我们平常在用vue指令有v-for，v-if，v-else，v-model，v-on，v-bind等。其实vue提供了自定义指令可以自己写类似v-demo这样的指令，用法和常用的指令相同。

vue提供了directive方法来给我们创建自定义指令。用法如下：

先新建一个n.js文件。

Vue.directive('n',{
    /*插入数据时触发*/
    inserted: function (el,binding) {
        console.log('插入',binding)
        return binding
    },
    update: function (el,binding) {
        console.log('更新参数',binding)
        return binding
    },
    bind:function (el,binding) {
        console.log('绑定参数',binding)
        return binding
    }
})

这里不要忘了引入vue.js库

import Vue from 'vue'

n是指令的名字，el是绑定的对象，binding是指令上绑定的参数。

insert是插入数据时触发的函数，update是数据改变时触发的函数，bind是数据刚绑定到元素节点上时触发的函数。

使用

在要使用的.vue文件中引入这个n.js文件然后

import n from '../assets/n'

data () {
    return{
        a: 5
    }
},

methods: {
    inc () {
        this.a++
    }
}

<div v-n="a">{{a}}</div>
<button @click="inc">增加</button>

在控制台打印出来：

更新参数是在点击增加后打印的，打印出来的binding有更新前和更新后的数据。现在还不知道这东西有什么用往后会慢慢更新