一、介紹
1、除了核心功能缺省內置的指令 (v-model和v-show)，vue 也允許註冊自定義指令。
2、自定義指令的分類
1、全域性指令
2、區域性指令
3、自定義全域性指令格式
vue.directive(指令id,指令定義物件)
4、 自定義區域性指令格式
略二、指令物件中的鉤子函式（乙個指令定義物件可以提供如下幾個鉤子函式）
1、bind：只呼叫一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
2、inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
3、update：所在元件的 vnode 更新時呼叫，但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。
4、componentupdated：指令所在元件的 vnode及其子 vnode全部更新後呼叫。
5、unbind：只呼叫一次，指令與元素解綁時呼叫。
三、鉤子函式引數（指令鉤子函式會被傳入以下引數：）
1、el：指令所繫結的元素，可以用來直接操作 dom 。
2、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中，修飾符物件為。
4、oldvnode：上乙個虛擬節點，僅在update和componentupdated鉤子中可用。
注釋：除了el之外，其它引數都應該是唯讀的，切勿進行修改。如果需要在鉤子之間共享資料，建議通過元素的dataset來進行。
四、示例
doctype htmlview code>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>自定義指令
title
>
<
script
src="js/vue.js"
>
script
>
head
>
<
body
>
<
div
id="itany"
>
<
button
@click
="change"
>更新資料
button
>
<
h3 v-world:wbs17022.hehe.haha
="username"
>}
h3>
<
input
type
="text"
v-model
="msg"
v-focus
>
div>
<
script
>/**
* 自定義全域性指令
* 注：使用指令時必須在指令名稱前加字首v-，即v-指令名稱
*/vue.directive(
'hello',,
inserted(),
update(),
componentupdated(),
unbind()
});//鉤子函式的引數
vue.directive(
'world',
});//傳入乙個簡單的函式，bind和update時都會呼叫
vue.directive(
'wbs',
function
());
varvm
=new
vue(,
methods:
},directives:}}
});script
>
body
>
html
>
Vue中的自定義指令 全域性和區域性
通過自定義指令，我們可以對dom進行更多的底層操作，這樣不僅可以在某些場景下為我們提供解決問題的思路，而且讓我們對vue的底層有了進一步的了解。通過vue.directive 註冊全域性指令 鉤子函式 1 bind 此鉤子函式只會被呼叫一次，可以定義乙個在繫結時執行一次的初始化動作 2 insert...
Vue 自定義全域性指令和區域性指令的方法詳解
自定義全域性指令 inserted被繫結元素插入父節點時會呼叫該函式，執行一次。update當vnode更新時執行該函式，可能執行多次。el用來繫結指令的元素，是乙個原生 dom 物件。binding記錄自定義指令資訊的物件，包含許多屬性，例如 示例，實現文字框自動聚焦 html type text...
Vue入門指南 自定義全域性指令和區域性指令
三 以傳參的方式進行指令設定 四 函式簡寫 當開發需求做乙個自動獲取焦點事件的時候，我們最原生的做法就是通過獲取元素來註冊事件,document.getelementbyid search focus 然而在vue中並不提倡我們直接操作dom元素。那我們該怎麼辦呢？這時候就需要我們自定義指令來實現這...