directive()

directive()，是一個 Vue 提供的 function (vue 的 API)。 在 Vue 中要定義一個「自定義函式」就要使用它。 自定義函式可以安裝為全域的功能，也可以只放在組件身上。

什麼是自定義函式？

自定義函式像是一個监听器

• 可自己定義要監聽什麼東西。 e.g. "某個事件被觸發、某個變數的值變化"、某個狀態改變...
• 函式監聽到東西，會「接收」到當下相關資訊、用這些資訊來「執行自己」內部的程式碼。
  • 相關資訊例如：監聽器綁在哪個 dom、監聽的東西是什麼...

甚至可以用「自定義函式」重寫一个 vue 的「绑定点击」事件指令 (即 v-on:click ) ...

格式簡介

# 自定義函式 格式說明
directive( `函式名稱 (字串)`, `函式定義 (物件 or 匿名函式)`) 

# 綁定 DOM 的格式說明
<div v-`函式名稱`="`(監聽) 自定義的 XX`"> ..

上面可以翻譯為：「當監聽到 自定義的 XX，這個 div 會觸發 函式名稱」

當監聽到狀況，會將 自定義的 XX、div 的「相關訊息」等... 作為「參數」傳入綁定 ( v- ) 的函式名稱... 函式名稱 會用這些資訊，去執行他內部程式。

自定義函數是「鉤子函數」

一個函數，從綁定到元素、觸發、更新開始、更新完成...到銷毀，叫做一個「生命週期」。 vue 定義函數的生命週期有五個時機點 (或叫做鉤子 hook)。 「钩子函数」代表，我們可以定義一個函式在他的這些「時機點」去觸發、執行一些事。

5 個生命週期 - 5 個鉤子函數

• bind 指令第一次绑定到元素时调用，只调用一次。在绑定时执行一次的初始化动作。
• inserted 「被绑定元素」插入父节点时调用（表示有父節點存在，但不表示父節點已在 document 中）。
• update 被绑定元素所在的「模板更新时」调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
• componentUpdated 被绑定元素所在「模板完成一次更新周期时」调用。
• unbind 只调用一次， 指令与元素解绑时调用。

前提到「自定義函式的定義」可以是「物件」or「匿名函式」。 寫一個「匿名函式」表示讓 bind 和 update 时触发相同行为，其他時機點不管他。 寫成「物件」，就可以去定義各時機點的鉤子函數。 他們也有各自接收的參數。

自定義函數是「鉤子函數」会被传入以下参数：

• el：v- 所绑定的元素。
• binding：一个对象，包含指令的很多信息。
  • name：自定義函式的名稱，不包括 v- 前缀。
  • value：自定義函式的「绑定值 (要監控的 XX 的值)」。
  • oldValue：绑定值的 前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：指令表达式 (字串)。例如 data 上的某個屬性名。
  • arg：传给指令的参数，可选。
  • modifiers：一个包含修饰符的物件。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

例如

<div v-myDirective:foo.bar="color">

arg (参数) 为 "foo, bar"
expression (表達式) 是 "color"。 modifiers (修饰符物件)： "{ foo: true, bar: true }"。

參考

菜鳥：Vue.js 自定义指令

• 注册一个全局自定义指令，在 Vue 接 .directive 附加自定義指令：Vue.directive()
• 在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：加上 directives 屬性

jspang：二章第1节：Vue.directive 自定义指令 自訂義指令：在「构造器」外部用 Vue 提供给我们的「 API 函数」来定义新的功能，可对普通 DOM 元素进行「底层」操作。

• 「构造器」： 根 vue 實例
• 「 API 函数」： .directive()

如何编写一个 vue 自定义指令

• 例如，重写一个 vue 的绑定点击事件指令，也就是说我要自己实现 v-on:click。
• vue 指令跟插件一样，是一个带有 install 方法的模块。

Vue 2.0学习笔记：自定义指令 it's good