vue.js指令是什么意思-創(chuàng)新互聯(lián)

這篇文章主要介紹vue.js指令是什么意思，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、元氏網(wǎng)絡(luò)推廣、微信小程序開發(fā)、元氏網(wǎng)絡(luò)營銷、元氏企業(yè)策劃、元氏品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供元氏建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

vue.js指令是許多內(nèi)置的指令，比如【v-if】和【v-show】，這些豐富的指令能滿足我們的絕大部分業(yè)務(wù)需求，自定義指令有鉤子函數(shù)，如【bind、inserted、update】。

問題一：什么是vue.js中的自定義指令？

自定義一些指令對底層DOM進行操作

更多參考

Vue里面有許多內(nèi)置的指令，比如v-if和v-show，這些豐富的指令能滿足我們的絕大部分業(yè)務(wù)需求，不過在需要一些特殊功能時，我們?nèi)匀幌Ｍ麑OM進行底層的操作，這時就要用到自定義指令。

問題二：自定義指令的幾個鉤子函數(shù)

bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

問題三：鉤子函數(shù)參數(shù)

除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行。

指令鉤子函數(shù)會被傳入以下參數(shù)：

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：傳給指令的參數(shù)，可選。例如 v-my-directive:foo中，參數(shù)為 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為{ foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。

3、oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

問題四：如何在vue-cli中使用自定義指令？

文件結(jié)構(gòu)：

.
├── 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" />

以上是“vue.js指令是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue.js指令是什么意思-創(chuàng)新互聯(lián)
本文地址：http://muchs.cn/article28/dejgcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、用戶體驗、App設(shè)計、虛擬主機、靜態(tài)網(wǎng)站、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容