傑森前端

# 組建內
new Vue({
	directives:{
		# 簡單用法
		# 第一個參數是真實dom
	 	# 第二個參數是一個物件 ( expression寫在語法後面的表達式 name指令名稱 rawname使用時候的名稱 value拿到的值 )
	 	# 調用時機 1 指令與模板元素初次綁定時候會被調用(這個時候還元素還沒插入到頁面上) 2 指令所在的模板被重新解析時會被調用
		xxx(element,binding){
			//顯示值都放大十倍
			element.innerText = binding.value * 10
		},
		# 複雜用法 (可處理時間點細節)
		# 如果要在真實dom出現在頁面上後才能使用的操作要放在   例如( focus )或是要獲取此元素的父元素也是如此
		focus:{
			bind(element,binding){
				element.value = xxx
			}, // 指令與元素成功綁定的時候還未渲染到頁面上 父節點為null
			inserted(element,binding){
				element.focues()
			}, // 指令所在元素被插入頁面上的時候 父節點存在
			update(element,binding){
				element.value = xxx
			}, // 指令所在模板被重新解析的時候
			componentUpdated(element,binding){
				console.log(element.innerHtml) //畫面更新後
			},
			unbind(element,binding){
			} //取消指令與元素之間的綁定時，調用一次
		},
	}
})
# 全局指令
Vue.directive('name',{
		bind(element,binding){
			element.value = xxx
		}, // 指令與元素成功綁定的時候還未渲染到頁面上
		inserted(element,binding){
			element.focues()
		}, // 指令所在元素被插入頁面上的時候
		update(element,binding){
			element.value = xxx
		} // 指令所在模板被重新解析的時候
})
# 使用
v-xxx

注意事項

1. 使用時要使用v-xxx-xxx不要有大寫，命名時候使用'xxx-xxx' ( ) { }
2. 在指令裡面的hook的this都是window

總結

1. 局部定義 new Vue({directives:{name:{} }}) new Vue({directives(name:func)})
2. 全局定義 Vue.directive(name,{}) Vue.directive(name.func)
3. bind 元素與指令綁定時候 inserted元素插入頁面時候
4. update 指令所在模板重新解析時候調用
5. 定義時候語法不加v-使用時候要加v-
6. 多單詞要使用kebab-case命名

參考

https://blog.csdn.net/sunboylife/article/details/109218227