基础
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id,definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数(全部可选):
- bind: 仅调用一次,当指令第一次绑定元素的时候。
- update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。
- unbind:仅调用一次,当指令解绑元素的时候。
例子:
一旦注册好自定义指令,你就可以在 Vue.js 模板中像这样来使用它(需要添加 Vue.js 的指令前缀,默认为 v-):
如果你只需要 update 函数,你可以只传入一个函数,而不用传定义对象:
所有的钩子函数会被复制到实际的指令对象中,而这个指令对象将会是所有钩子函数的this 上下文环境。指令对象上暴露了一些有用的公开属性:
el: 指令绑定的元素 vm: 拥有该指令的上下文 viewmodel expression: 指令的表达式,不包括参数和过滤器 arg: 指令的参数 raw: 未被解析的原始表达式 name: 不带前缀的指令名
这些属性是只读的,不要修改它们。你也可以给指令对象附加自定义的属性,但是注意不要覆盖已有的内部属性。
使用指令对象属性的示例:
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>