vue 自定义指令.pdfVIP

vue ⾃定义指令 vue ⾃定义指令 基础 除了内置指令，Vue .j s 也允许注册⾃定义指令。⾃定义指令提供⼀种机制将数据的变 化映射为 DOM 为。 可以⽤ Vue.directive(id, definition) ⽅法注册⼀个全局⾃定义指令，它接 收两个参数指令 ID 与定义对象。也可以⽤组件的 directives 选项注册⼀个局部⾃ 定义指令。 钩⼦函数 定义对象可以提供⼏个钩⼦函数 （都是可选的）： bind ：只调⽤⼀次，在指令第⼀次绑定到元素上时调⽤。 update ： 在 bind 之后⽴即以初始值为参数第⼀次调⽤，之后每当绑定值变化 时调⽤，参数为新值与旧值。 unbind ：只调⽤⼀次，在指令从元素上解绑时调⽤。 ⽰例 Vue.directive(my-directive, { bind: function () { // 准备⼯作 // 例如，添加事件处理器或只需要运⾏⼀次的⾼耗任务 }, update: function (newValue, oldValue) { // 值更新时的⼯作 // 会以初始值为参数调⽤⼀次 }, unbind: function () { // 清理⼯作 // 例如，删除 bind() 添加的事件监听器 } }) 在注册之后，便可以在 Vue .j s 模板中这样⽤ （记着添加前缀 v-）： div v-my-directive=someValue /div 当只需要 update 函数时，可以传⼊⼀个函数替代定义对象： Vue.directive(my-directive, function (value) { // 这个函数⽤作 update() }) 指令实例属性 所有的钩⼦函数将被复制到实际的指令对象中，钩⼦内 this 指向这个指令对象。这 个对象暴露了⼀些有⽤的属性： el: 指令绑定的元素。 vm: 拥有该指令的上下⽂ ViewModel 。 expression: 指令的表达式，不包括参数和过滤器。 arg: 指令的参数。 name: 指令的名字，不包含前缀。 modifiers: ⼀个对象，包含指令的修饰符。 descriptor: ⼀个对象，包含指令的解析结果。 你应当将这些属性视为只读的，不要修改它们。你也可以给指令对象添加⾃定义属 性，但是注意不要覆盖已有的内部属性。 ⽰例： div id=demo v-demo:hello.a.b=msg /div Vue.directive(demo, { bind: function () { console.log(demo bound!) }, update: function (value) { this.el.innerHTML = name - + + br + expression - + this.expression + br + argument - + this.arg + br + modifiers - + JSON.stringify(this.modifiers) + br value - + value } }) var demo = new Vue({ el: #demo, data: { msg: hello! } }) 结果 对象字⾯量 如果指令需要多个值，可以传⼊⼀个 JavaScript 对象字⾯量。记住，指令可以使⽤任 意合法的 JavaScript 表达式： div v-demo={ color: white, text: hello! } /div Vue.directive(demo, function (value) { console.log(value.color) // white console.log(value.text) // hello! }) 字⾯修饰符 当指令使⽤了字⾯修饰符，它的值将按普通字符串处理并