分享興趣，傳播快樂，增長見聞，留下美好！ 大家好，這裡是小編。歡迎大家繼續通路學苑内容，我們将竭誠為您帶來更多更好的内容分享。
Share interest, spread happiness, increase knowledge, and leave a good impression! Hello everyone, this is Xiaobian. Welcome to continue to visit the content of Xueyuan, and we will wholeheartedly bring you more and better content to share.
directive(自定義指令)：除了核心功能預設内置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。全局自定義指令：Vue.directive 局部自定義指令：directives
網址：https://cn.vuejs.org/v2/guide/custom-directive.html
Directive: In addition to the default built-in instructions (v-model and v-show) of core functions, Vue also allows you to register custom instructions. Note that in Vue2.0, the main form of code reuse and abstraction is components. However, in some cases, you still need to perform the underlying operations on ordinary DOM elements, and then you will use custom instructions. Global customization instruction: Vue.directive Local customization instruction: directives
Website: https://cn.vuejs.org/v2/guide/custom-directive.html
定義全局指令：自定義全局指令，讓頁面剛加載完輸入光标在第二個輸入框
Define global command: customize the global command so that the input cursor is in the second input box just after the page is loaded.
定義局部指令：自定義局部指令，讓頁面剛加載完輸入光标在第二個輸入框
Define local instructions: customize local instructions so that the input cursor is in the second input box just after the page is loaded.
鈎子函數：一個指令定義對象可以提供如下幾個鈎子函數 (均為可選)：
bind
隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。
inserted
被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
update
所在元件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模闆更新 。
Hook function: an instruction definition object can provide the following hook functions (all optional):
bind
Called only once, when the instruction is first bound to an element. One-time initialization settings can be made here.
inserted
Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).
update
Called when the VNode of its component is updated, but it may happen before its child VNode is updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update.
componentUpdated
指令所在元件的 VNode 及其子 VNode 全部更新後調用。
unbind
隻調用一次，指令與元素解綁時調用。
指令鈎子函數會被傳入以下參數：
el
指令所綁定的元素，可以用來直接操作 DOM。
binding
一個對象，包含一下這些屬性(name、value、oldValue、expression、arg、modifiers)
componentUpdated
Called after the VNode of the component where the instruction is located and its child VNode are all updated.
unbind
Called only once, when the instruction is unbound from the element.
The instruction hook function will be passed the following parameters:
el
Directives are bound to elements that can be used to directly manipulate DOM.
binding
An object that contains these attributes (name, value, oldValue, expression, arg, modifiers).
vnode
vue 編譯生成的虛拟節點。
oldVnode
上一個虛拟節點，僅在 update 和 componentUpdated 鈎子中可用。
binding：name：指令名，不包括 v- 字首。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
expression：字元串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode
Virtual nodes generated by vue compilation.
oldVnode
Last virtual node, available only in update and componentUpdated hooks.
Binding：name: instruction name, excluding v- prefix.
Value: the binding value of the instruction, for example: v-my-directive="1+1 ",the binding value is 2.
OldValue: the previous value of the instruction binding, which is only available in update and componentUpdated hooks. Available whether the value changes or not.
Expression: an instruction expression in the form of a string. For example, in v-my-directive="1+1 ",the expression is" 1+1 ".
Arg: parameter passed to the instruction, optional. For example, in v-my-directional: foo, the parameter is "foo".
Modifiers: An object containing modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.
今天的分享就到這裡了
如果您對今天的文章有獨特的想法
歡迎給我們留言
讓我們相約明天
祝您今天過得開心快樂！
That's all for today's sharing. If you have unique ideas about today's article, please leave us a message. Let's meet tomorrow. I wish you a happy day today!
翻譯：百度翻譯
本文由learningyard新學苑原創，部分文字圖檔來源于他處，如有侵權，請聯系删除