html代码部分:
> <div id="app">
> <input type="text" v-model="content" v-slice:11.number="content">
> {{ content }}
> </div>
JavaScript代码部分:
// 定义指令的时候不需要加v-,调用的时候要告诉vue是指令,调用的时候得写v-slice
// 第一个参数是指令的所绑定的元素
//第二个参数可以使个函数.函数为bind和updata的和写
//第三个参数是一个虚拟节点
Vue.directive('slice',(el,bindings,vnode) => {
console.log(el)//指令绑定的元素
console.log(bindings)//绑定的详细信息
console.log(vnode)//虚拟节点 里面有用的就一个属性context,指向的是当前的vue实例
})
自定义部分:
Vue.directive('slice', {
bind(el, bindings, vnode) { //指令绑定上去的时候触发
console.log(el)
},
updata(el, bindings, vnode){
console.log("updata")//数据更新时触发
},
inserted(el){ //指令绑定的元素插入到页面的时候执行
el.focus()
}
})
var vm = new Vue({
el: “#app”,
data: {
content: “879877614787676716768796”
}
})