怎么在vue2.0中自定義指令

這篇文章給大家介紹怎么在vue2.0中自定義指令，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、江北網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為江北等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1、什么是指令？

指令通常以"v-"作為前綴, 以方便Vue知道你在使用一種特殊的標(biāo)記。

除了 Vue 核心攜帶著的一些默認(rèn)指令（v-model 和 v-show）之外，

Vue 還允許你注冊(cè)自己的自定義指令。某些情況下，還是需要對(duì)普通元素進(jìn)行一些底層 DOM 訪問(wèn)，

這也是自定義指令仍然有其使用場(chǎng)景之處。

2、全局指令：

當(dāng)頁(yè)面加載時(shí)，元素將獲取焦點(diǎn)，事實(shí)上，在訪問(wèn)頁(yè)面時(shí)，如果你還沒有點(diǎn)擊任何地方，上面的輸入框現(xiàn)在應(yīng)該處于獲取焦點(diǎn)的狀態(tài)?，F(xiàn)在讓我們構(gòu)建指令以完成此效果：

<template>
<div class="parent">
 <input v-focus>
</div>
</template>
import Vue from 'vue'
 import cnChildren from './children'
 // 注冊(cè)一個(gè)名為 `v-focus` 的全局自定義指令
 Vue.directive('focus', {
  // 當(dāng)綁定的元素插入到 DOM 時(shí)調(diào)用此函數(shù)……
  inserted: function (el) {
   // 元素調(diào)用 focus 獲取焦點(diǎn)
   el.focus()
  }
 });

如果你想要注冊(cè)一個(gè)局部指令，也可以通過(guò)設(shè)置組件的 directives 選項(xiàng)：

directives: {
 focus: {
  // 指令定義對(duì)象
  inserted: function (el) {
   el.focus()
  }
 }
}

我們有幾個(gè)可用的鉤子：

bind：在指令第一次綁定到元素時(shí)調(diào)用，只會(huì)調(diào)用一次。可以在此鉤子函數(shù)中，執(zhí)行一次性的初始化設(shè)置。
inserted：在已綁定的元素插入到父節(jié)點(diǎn)時(shí)調(diào)用（只能保證父節(jié)點(diǎn)存在，不一定存在于 document 中）。
update：在包含指令的組件的 VNode 更新后調(diào)用，但可能之前其子組件已更新。指令的值可能更新或者還沒更新，然而可以通過(guò)比較綁定的當(dāng)前值和舊值，來(lái)跳過(guò)不必要的更新（參考下面的鉤子函數(shù)）。
componentUpdated：在包含指令的組件的 VNode 更新后調(diào)用，并且其子組件的 VNode 已更新。
unbind：在指令從元素上解除綁定時(shí)調(diào)用，只會(huì)調(diào)用一次。
每個(gè)鉤子可以選擇一些參數(shù)。

el：指令綁定的元素。可以用于直接操作 DOM。

binding：一個(gè)對(duì)象，包含以下屬性：

1、name：指令的名稱，不包括 v- 前綴。
  2、value：向指令傳入的值。例如，在 v-my-directive="1 + 1" 中，傳入的值是 2。
  3、oldValue：之前的值，只在 update 和 componentUpdated 鉤子函數(shù)中可用。無(wú)論值是否發(fā)生變化，都可以使用。
  4、expression：指令綁定的表達(dá)式(expression)，以字符串格式。例如，在 v-my-directive="1 + 1" 中，表達(dá)式是 "1 + 1"。
  5、arg：向指令傳入的參數(shù)，如果有的話。例如，在 v-my-directive:foo 中，參數(shù)是 "foo"。
  6、modifiers：一個(gè)對(duì)象，包含修飾符，如果有的話。例如，在 v-my-directive.foo.bar 中，修飾符是 { foo: true, bar: true }。
vnode：由 Vue 編譯器(Vue's compiler)生成的虛擬 Node 節(jié)點(diǎn)(virtual node)。更多細(xì)節(jié)請(qǐng)查看
VNode API。

除了 el 之外的其他參數(shù)，都應(yīng)該是只讀的，并且永遠(yuǎn)不要去修改它們。

3、自定義指令示例

如果指令需要多個(gè)值，你還可以向指令傳入 JavaScript 對(duì)象字面量(object literal)。記住，指令能夠接收所有有效的 JavaScript 表達(dá)式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
 console.log(binding.value.color) // => "white"
 console.log(binding.value.text) // => "hello!"
})

關(guān)于怎么在vue2.0中自定義指令就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章題目：怎么在vue2.0中自定義指令
地址分享：http://www.muchs.cn/article10/jpjgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站營(yíng)銷、網(wǎng)站制作、云服務(wù)器

廣告

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