我们平常在用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有更新前和更新后的数据。现在还不知道这东西有什么用往后会慢慢更新