前言

除了一些 vue配置的基本指令外
Vue中有一項配置是針對自定義指令的操作 (directives)
其可依照需求寫入需要的vue指令

Directives

程式碼配置：

new Vue({
    el : "#root",
    data : {},
    directives : {},
})

針對設計一個自定義的指令會有其指令名稱
其配置的方法有二

• 函數式
• 對象式

函數式

配置一個 function並且能夠接受兩種參數
分別是(順序不能變)

• element : 取得使用當前指定的標籤元素
• binding : 取得指令內的資料數據

範例

配置一個自定義指令到一個span標籤

directives : {
	bigger(element, binding){
		element.innerText = binding.value;
	}
}

作法是針對標籤的特性搭配 binding中的 value做使用
簡單的例子就像是上方的方式
對span中的text內容放入data的value數據

對象式

在使用自定義指令時
會有針對標籤狀態做變化(ex : 需要input在獲取資料時獲取焦點)
若是上述情況使用了函數式, 那其第一次載入畫面是不會有焦點的捕捉

原因：
在 html解析完成前 vue就下了捕捉焦點的動作
造成的影響是 → html在實際放入 input標籤至畫面前就執行了動作
所以捕捉焦點的動作是在沒有 input的情況下進行的

對象式的使用上配置了三個階段,分別是：

• bind:
  指令與元素成功綁定時
  使用時機偏向數據綁定, 以及標籤呈現狀態(靜態)

• inserted:
  指令所在頁面被插入元素時
  使用時機偏向標籤在頁面上的動作, 適用於標籤已呈現在頁面才能呈現的動作

• update:
  指令所在模板被重新解析時
  在數據更新時!!不代表binding異動才觸發

對象式的使用可以對各個階段做處理
但在製作一個簡單的自定義指令時,操作不一定會那麼多
所以依照功能需求函數式,對象式會視情況使用

Directives何時觸發?

指令與元素成功綁定時 (inserted)
指令所在的模板重新解析時
並非指令綁定的數據更新在會處發 update
Vue更新數據時, 模板會重新解析
所以 update觸發時機是更新模板的時間點

Directives的命名規則?
駝峰式並不適用
在標籤寫上指令時單字間的串接用-連接 (ex:v-bind-number)

在 directives的配置中
自定義的命名若是用兩個單詞組成
那要用引號匡起來

'bind-number'(element, binding){
	...
}

自定義裡的this指向？

就算是在vue裡面的配置項
但directives的this是指向window的

全局指令

針對vue的模式
自定義指令配置後會接觸的vm可以不只一個

這樣的需求可以用Vue的函數處理 → Vue.directives(指令名稱, 回調函數)

Vue.directives("bind-number", function(){
	...
})

以上就是針對自定義指令的說明
下兩章節會開始介紹Vue的生命週期