vue.js指令是什麼

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中文網其他相關文章！