vue 學習筆記--全局api- Vue.directive

Vue.directive

1.作用：

　　使用vue 函數構造自定義方法。

2.基本概念：

　　在主函數中構造自定義方法 併在模板中使用

　　構造方法：

Vue.directive('demo',function(el,binding,vnode){
  el.style='color:'+binding.value;
  // el.style.color
});

　　調用方法：

    <div v-demo="color" id="demo">
        {{num}}
    </div>

　　其中構造方法中的三個參數：

• el: 指令所綁定的元素，可以用來直接操作DOM。
• binding: 一個對象，包含指令的很多信息。
• vnode: Vue編譯生成的虛擬節點。

　　自定義方法的五個生命周期：

1. bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化動作。
2. inserted:被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於document中）。
3. update:被綁定於元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新。
4. componentUpdated:被綁定元素所在模板完成一次更新周期時調用。
5. unbind:只調用一次，指令與元素解綁時調用。

3.使用及應用：

　　　需要自定義功能模板時使用