vue.js指令是許多內建的指令,例如【v-if】和【v-show】,這些豐富的指令能滿足我們的絕大部分業務需求,自訂指令有鉤子函數,如【bind、inserted、update】。
本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。
【相關文章推薦:vue.js】
問題一:什麼是vue.js中的自訂指令?
自訂一些指令對底層DOM進行操作
更多參考
Vue裡面有許多內建的指令,例如v-if和v-show,這些豐富的指令能滿足我們絕大部分的業務需求,不過在需要一些特殊功能時,我們仍然希望對DOM進行底層的操作,這時就要用到自訂指令。
問題二:自訂指令的幾個鉤子函數
#bind:只呼叫一次,指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。
inserted:被綁定元素插入父節點時呼叫 (僅保證父節點存在,但不一定已插入文件中)。
update:所在元件的 VNode 更新時調用,但可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以透過比較更新前後的值來忽略不必要的範本更新 。
componentUpdated:指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
unbind:只呼叫一次,指令與元素解綁時呼叫。
問題三:鉤子函數參數
除了 el 之外,其它參數都應該是唯讀的,切勿進行修改。如果需要在鉤子之間共享數據,建議透過元素的 dataset 來進行。
指令鉤子函數會被傳入以下參數:
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 中,修飾符物件為{ foo: true, bar: true }。
vnode:Vue 編譯產生的虛擬節點。
3、oldVnode:上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。
問題四:如何在vue-cli中使用自訂指令?
檔案結構:
. ├── src │ ├── directives │ │ ├── index.js │ │ ├── modules │ └── main.js └── ...
在modules下新foucs.js下
// 聚焦指令 export default { bind (el, binding, vnode) {}, inserted (el, binding, vnode) { el.focus() }, update (el, binding, vnode) {}, componentUpdated (el, binding, vnode) {}, unbind (el, binding, vnode) {} }
在src/directives/index.js下
import focus from './modules/focus' export {focus}
在src/main.js下,使用directives自訂指令
//引入自定义指令 import * as directives from './directives' //注册指令 Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));
在.vue元件中使用
<input v-focus type="text" />
相關免費學習推薦:JavaScript#(視頻)
以上是vue.js指令是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!