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編譯生成的虛擬節點，
自定義方法的五個生命周期：
- bind:只呼叫一次，指令第一次系結到元素時呼叫，用這個鉤子函式可以定義一個系結時執行一次的初始化動作，
- inserted:被系結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在于document中），
- update:被系結于元素所在的模板更新時呼叫，而無論系結值是否變化，通過比較更新前后的系結值，可以忽略不必要的模板更新，
- componentUpdated:被系結元素所在模板完成一次更新周期時呼叫，
- unbind:只呼叫一次，指令與元素解綁時呼叫，
3.使用及應用：
需要自定義功能模板時使用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76015.html
標籤：JavaScript
上一篇：Vue樣式穿透
下一篇：echarts圖表在Tab頁中width: 100%失效導致的第一個Tab頁之后的Tab頁圖表不能正常顯示的問題