Vue.js 自定义指令

admin

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

实例
% [% A% ?- P4 `1 I. O* Y! q& d
+ O7 Q. \: R6 D5 M! w

1. <div id="app">
   
2.     <p>页面载入时，input 元素自动获取焦点：</p>
   6 N5 D* M( ]+ |3 T# |9 k1 k
3.     <input v-focus>
   $ i8 _0 E+ Z9 k! J' g# X0 I/ |
4. </div>
   
5. 
   , Z1 w) q$ l. p3 A. e: {
6. <script>
   
7. // 注册一个全局自定义指令 v-focus
   
8. Vue.directive('focus', {
   
9.   // 当绑定元素插入到 DOM 中。
   . s/ A; P" n/ @& q+ R8 ?7 c
10.   inserted: function (el) {
    
11.     // 聚焦元素
    / D  w4 R! e1 m7 ]/ T% C% v
12.     el.focus()
    + h) f! m$ B* u
13.   }
    9 I- G! v* N' K( Y. D$ j
14. })
    * P. w# }% v: O1 B! ]5 J
15. // 创建根实例
    
16. new Vue({
    ' x3 a7 v4 Z2 w5 X. s2 N' z( l+ _2 J5 ]
17.   el: '#app'
    
18. })
    
19. </script>

复制代码

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

实例
' l, `( ]. H1 C8 M& X+ y
" N  L& h; `3 U$ @9 A

1. <div id="app">
   : R* X4 D5 t: ~) O
2.   <p>页面载入时，input 元素自动获取焦点：</p>
   
3.   <input v-focus>
   8 {+ [9 C# S' o9 t5 p7 D
4. </div>
   + k. b/ z) A. a% {
5. 
   ) g/ w9 W, A8 W0 c9 |7 o
6. <script>
   $ a' K: `+ n1 D2 h- C2 q
7. // 创建根实例
   
8. new Vue({
   
9.   el: '#app',
   
10.   directives: {
      W; D8 J! I; W  J# P# t
11.     // 注册一个局部的自定义指令 v-focus
    8 G# g2 j9 c7 o4 C( u! Y
12.     focus: {
    
13.       // 指令的定义
    
14.       inserted: function (el) {
    ' ^6 L$ @6 c9 G& ~' I' n
15.         // 聚焦元素
    
16.         el.focus()
    
17.       }
    * u4 G' h3 l5 u0 M, d1 ?
18.     }
    
19.   }
    . h7 R1 _; B, V; A( J
20. })
    
21. </script>

复制代码

钩子钩子函数

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。
  
  5 ]0 Z9 t& h( _0 Z1 f' K# ?0 P6 K

钩子函数参数

钩子函数的参数有：

• el: 指令所绑定的元素，可以用来直接操作 DOM 。
• binding: 一个对象，包含以下属性：
  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
    
• vnode: Vue 编译生成的虚拟节点。
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  

以下实例演示了这些参数的使用：

实例
& G; b% w5 n1 H+ U
: k  \% e6 t# _" [

1. <div id="app"  v-runoob:hello.a.b="message">
   
2. </div>
   % B2 K0 V! Y+ K; ~0 @% x2 _4 m
3. 
   ' J" k& G8 `' J& `
4. <script>
   9 ?' @, Y! Z2 v, A; J+ A9 m  I
5. Vue.directive('runoob', {
   
6.   bind: function (el, binding, vnode) {
   3 q* b- P# O" _' r1 l
7.     var s = JSON.stringify
   9 l, ~" I# _/ p; j" W( G# W
8.     el.innerHTML =
   
9.       'name: '       + s(binding.name) + '<br>' +
   ) |# e# R) i, P2 A3 X
10.       'value: '      + s(binding.value) + '<br>' +
    " ]8 }4 L3 l3 `$ O1 w7 a% C) W
11.       'expression: ' + s(binding.expression) + '<br>' +
    
12.       'argument: '   + s(binding.arg) + '<br>' +
    
13.       'modifiers: '  + s(binding.modifiers) + '<br>' +
    - [& K" T# A* a4 ?
14.       'vnode keys: ' + Object.keys(vnode).join(', ')
    
15.   }
    
16. })
    - u9 ?  L! q. w; G9 v- R( }
17. new Vue({
    ; u: ^5 ~% U  b. e: S
18.   el: '#app',
    # j7 I2 k2 K$ h, t  R2 Z& x8 m4 q
19.   data: {
    
20.     message: '菜鸟教程!'
    
21.   }
    
22. })
    7 Z: n! I+ U9 t
23. </script>

复制代码

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：
: F( n2 c' m# v/ }

1. Vue.directive('runoob', function (el, binding) {
   
2.   // 设置指令的背景颜色
   
3.   el.style.backgroundColor = binding.value.color
   
4. })

复制代码

2 k, t: e, p/ P! B

指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

实例

1 G: Y2 C/ u/ H, ~

1. <div id="app">
   ! r/ M1 f* U& m' O$ O- _  P
2.     <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
   
3. </div>
   
4. 
   
5. <script>
   / g  s: ~  Z; K; P
6. Vue.directive('runoob', function (el, binding) {
   
7.     // 简写方式设置文本及背景颜色
   
8.     el.innerHTML = binding.value.text
   
9.     el.style.backgroundColor = binding.value.color
   # }  q2 M, k/ J
10. })
    
11. new Vue({
    
12.   el: '#app'
    7 j$ H+ r+ T4 O0 `; s5 E5 X
13. })
    " [: n+ {  w" _/ M" ^
14. </script>

复制代码

4 n+ o; U2 V& u1 K+ _6 J
' F* @- u5 {0 F