Vue基礎高階 之 自定義指令

除了內建指令，vue也允許使用者自定義指令；

註冊指令：通過全域性api vue.directive可以註冊自定義指令；

自定義指令的鉤子函式： bind； inserted； update； componentupdated； unbind；

自定義指令的使用：在自定指令的名稱前加 上 v-；

自定義指令的詳細介紹**：

下面是關於這個5個鉤子函式的示例；

vue**：

vue.directive('

demo',,
inserted(),
ubind(),
update(),
componentupdated()
})let vm= new
vue(
}).$mount(
'div');

"

text
" v-model="
username
" />
使用者名稱：
ref='
username
'>}
資訊：if="
flag
">歡迎來到perfect*的！！！
"flag=!flag
">解除繫結

1239

1011
"text
" v-model="
username
" />
12 使用者名稱：ref='
username
'>}
13 資訊：if="
flag
">歡迎來到perfect*的！！！14"
flag=!flag
">解除繫結
1516
1718
1920
2163

自定義指令的鉤子函式引數：自定義指令的鉤子函式可以傳遞4個引數，分別是el、binding、vnode、oldvnode；

具體描述見官網api：點選我進入

el：獲取dom物件；

binding：乙個包含很多屬性的物件；

vnode：vue編譯生成的虛擬節點；

oldvnode：上乙個虛擬節點

示例：

示例：

binding屬性的**：

vue.directive('

demo',
if(binding.modifiers.once)
},update(el,binding),
})let vm= new
vue(
}).$mount(
'div');

"

text
" v-model="
username
" />
使用者名稱：
'username
'ref='
username
'>}
資訊：if="
flag
">歡迎來到perfect*的！！！
"flag=!flag
">解除繫結

1239

1011
"text
" v-model="
username
" />
12 使用者名稱：'
username
'ref='
username
'>}
13 資訊：if="
flag
">歡迎來到perfect*的！！！14"
flag=!flag
">解除繫結
1516
1718
1920
2174

使用者名稱：}"

flag=!flag

">解除繫結

1239

1011
"text
" v-model="
username
" v-focus />
12 使用者名稱：}
1314
"flag=!flag
">解除繫結
1516
1718
1920
2158

vue之自定義指令

1.如何自定義乙個指令？在export模板中加入directives選項 比如 directives bind el bind 像這樣的inserted,bind稱為鉤子函式，裡面的引數 el 代表當前指令被繫結的元件 bind 代表當前指令所繫結的元件的一些值，通常我們列印這兩個引數時，會返回整個...

Vue之自定義指令

vue中有很多內建的命令，例如v bind,v for,v show等等，這些指令的指責是將表示式改變時，將某些行為相應地對映到dom上。那麼除了我們常用的vue的內建指令外，我們還可以自定義指令，常用的自定義vue全域性指令的模板如下 這裡的focus是定義額指令的名稱，可根據指令作用換成其他名稱...

Vue之自定義指令

先了解一下,在vue中,有很多內建的指令.比如 等等.所以,關於指令,我們可以總結下面幾點 2.0 vue自定義指令場景小demo 非常尬 場景 我們需要乙個指令,寫在某個html表單元素上,然後讓它在被載入到dom中時,自動獲取焦點.和自定義過濾器一樣,我們這裡定義的是全域性指令 vue.dire...