vue.js（14）--自定義全局指令

<input type="text" class="form-control" v-model="keywords" v-focus>

使用vue.directive（‘focus’，{對象}）定義全局指令，v-focus

   <script>
        Vue.directive('focus',{
            // 在每一個函數中，第一個參數，永遠是el，表示被綁定了指令的那個元素，
            // 這個el參數，是一個原生的js對象，也就是dom
            bind:function(el,binding){//每當指令綁定到元素上的時候，會立即執行這個bind函數，只執行一次
                el.style.color=binding.value
            },//binding為一個對象，包含一些屬性
            inserted:function(el){//當元素插入到dom的時候，會執行insert，只執行一次
                el.focus()
            },
            updated:function(el){//當vnode更新的時候會執行update，可能觸發多次
                
            }
        })
        var vm =new Vue({
            el:'#a'
        })
    </script>

指令鈎子函數會被傳入以下參數：

• el：指令所綁定的元素，可以用來直接操作 DOM 。
• binding：一個對象，包含以下屬性：
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點。。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用。

函數簡寫

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鈎子。比如這樣寫:

<script>
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
</script>