Vue自定義指令

Vue自定義指令

---

• 什麼是自定義指令

比如v-show元素的顯示/隱藏，vue允許我們自己設置自定義的指令

• 自定義指令傳遞的參數

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

• 怎麼使用自定義指令？

例如：自定義一個指令 v-rainbow 主要實現的功能是：實現彩虹字體
用法：<h2 v-rainbow>{{blog.title}}</h2>

//全局註冊：
Vue.directive("rainbow",{
	inserted(el,binding,vnode){
		el.style.color="#"+Math.random().toString(16).slice(2,8)
	}
})

//局部註冊
directives:{
	//彩虹字體功能
	"rainbow":{
		inserted(el,binding,vnode){
			el.style.color="#"+Math.random().toString(16).slice(2,8)
		}
	},
	//防抖 在有限時間內執行一次，最後一次執行
	debounce: {
		inserted: function (el, binding) {
			let timer;
			el.addEventListener('click', () => {
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(() => {
					console.log(binding)
					binding.value() //執行函數
				}, 300)
			})
		}
   }
}

//在組件中使用 v-rainbow 就可以顯示彩虹字體

//2.v-debounce = "search" search函數

• 自定義指令的鉤子函數

  • bind ：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。
  • inserted : 綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
  • update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
  • componentUpdated : 指令所在組件的 VNode 及其子 VNode 全部更新後調用。
  • unbind：只調用一次，指令與元素解綁時調用。

更多請了解：
vue：https://cn.vuejs.org/v2/guide/custom-directive.html
自定義節流指令：https://my.oschina.net/u/3970421/blog/2988151
15個自定義指令：https://my.oschina.net/liuyuantao/blog/3130325