第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

此間少年_ · 更新于 2020-12-04

1. 前言

本小節(jié)我們介紹 Vue 中的自定義指令。包括全局指令的注冊(cè)、局部指令的注冊(cè)、指令鉤子函數(shù)的使用以及動(dòng)態(tài)指令傳參。其中，指令鉤子函數(shù)和動(dòng)態(tài)指令參數(shù)是本節(jié)的難點(diǎn)。

同學(xué)們需要充分理解每個(gè)指令鉤子函數(shù)執(zhí)行的時(shí)機(jī)、對(duì)動(dòng)態(tài)指令參數(shù)多加練習(xí)才能對(duì)指令的使用得心應(yīng)手。

2. 慕課解釋

Vue 除了提供了默認(rèn)內(nèi)置的指令外，還允許開發(fā)人員根據(jù)實(shí)際情況自定義指令，它的作用價(jià)值在于當(dāng)開發(fā)人員在某些場(chǎng)景下需要對(duì)普通 DOM 元素進(jìn)行底層操作的時(shí)候。 – 官方定義

在之前的章節(jié)中我們學(xué)習(xí)了指令 v-show，他的實(shí)現(xiàn)原理就是操作 DOM 元素的樣式 display，使之實(shí)現(xiàn)隱藏、顯示的效果。在日常開發(fā)中，我們經(jīng)常把一些對(duì) DOM 大量相同的操作封裝成指令。學(xué)好指令可以給我們的開發(fā)帶來(lái)便利、提高效率。同學(xué)們需要總結(jié)業(yè)務(wù)中的各種場(chǎng)景，多加練習(xí)。

3. 注冊(cè)自定義指令

Vue 自定義指令和組件一樣存在著全局注冊(cè)和局部注冊(cè)兩種方式。全局注冊(cè)的自定義指令可以在項(xiàng)目中的所有組件中使用，局部注冊(cè)的指令只能在當(dāng)前組件內(nèi)部使用。接下來(lái)我們分步介紹全局指令和局部指令的注冊(cè)方式。

3.1 全局注冊(cè)

我們可以通過(guò)調(diào)用 Vue.directive 的方式來(lái)定義全局指令， 它接收兩個(gè)參數(shù)：1. 指令名，2. 指令的鉤子函數(shù)對(duì)象。
命名：

  • 短橫線：<my-directive>
  • 駝峰式：<MyDirective> 使用駝峰命名指令時(shí)，首字母最好以大寫字母開頭。

鉤子函數(shù)對(duì)象：指令的鉤子函數(shù)對(duì)象我們將在下面段落 4 中詳細(xì)介紹。

注意：注冊(cè)指令時(shí)，指令名稱不需要加 v- 前綴，默認(rèn)是自動(dòng)加上前綴的，使用指令的時(shí)候一定要加上 v- 前綴。

// 注冊(cè)
// 駝峰命名
Vue.directive('MyDirective', {/* */})
// 短橫線命名
Vue.directive('my-directive', {/* */})

// 使用
<div v-my-directive></div>

下面我們注冊(cè)一個(gè)全局指令 v-focus，該指令的功能是在頁(yè)面加載時(shí)，使得元素獲得焦點(diǎn)。

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>姓名：</label>
      <input id="name" v-focus type="text"/>
    </div>
    <div>
      <label>年齡：</label>
      <input id="age" type="text"/>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.directive('focus', {
    inserted(el) {
      el.focus()
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 3-7 行，我們定義了指令 v-focus，定義 inserted 鉤子函數(shù)，在節(jié)點(diǎn)被插入時(shí)獲得焦點(diǎn)。
HTML 代碼第 4 行，我們?cè)?input 元素上使用指令，當(dāng)頁(yè)面打開時(shí) id 為 name 的輸入框會(huì)自動(dòng)獲取焦點(diǎn)。

3.2 局部注冊(cè)

指令的局部注冊(cè)和組件的局部注冊(cè)類似，在實(shí)例的參數(shù) options 中使用 directives 選項(xiàng)來(lái)注冊(cè)局部指令，局部指令只能在當(dāng)前這個(gè)實(shí)例中使用：

// 注冊(cè)
// 短橫線命名
{
  directives: {
      'my-directive': {
        inserted: function (el) {
          el.focus()
        }
      }
    }
}
// 駝峰命名
{
  directives: {
      'MyDirective': {
        inserted: function (el) {
          el.focus()
        }
      }
    }
}

// 使用
<div v-my-directive></div>
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>姓名：</label>
      <input v-focus type="text"/>
    </div>
    <div>
      <label>年齡：</label>
      <input type="text"/>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 8-14 行，我們定義了局部指令 v-focus，定義 inserted 鉤子函數(shù)，在節(jié)點(diǎn)被插入時(shí)獲得焦點(diǎn)。
HTML 代碼第 4 行，我們?cè)?input 元素上使用指令，當(dāng)頁(yè)面打開時(shí) id 為 name 的輸入框會(huì)自動(dòng)獲取焦點(diǎn)。

4. 鉤子函數(shù)

上面我們介紹了 Vue.directive 第二個(gè)參數(shù)接收的是鉤子函數(shù)對(duì)象，這些鉤子函數(shù)都是可選的。接下來(lái)我們?cè)敿?xì)介紹這幾個(gè)鉤子函數(shù)的作用：

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

4.1 鉤子函數(shù)參數(shù)

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

  • el：指令所綁定的元素，可以用來(lái)直接操作 DOM ；
  • binding：一個(gè)對(duì)象，包含以下屬性：
    • name：指令名，不包括 v- 前綴；
    • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2；
    • oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用，無(wú)論值是否改變都可用；
    • expression：字符串形式的指令表達(dá)式，例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"；
    • arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
    • modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true }。
  • vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來(lái)了解更多詳情；
  • oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

4.2 動(dòng)態(tài)指令參數(shù)

指令的參數(shù)可以是動(dòng)態(tài)的。例如，在 v-mydirective:[argument]=“value” 中，argument 參數(shù)可以根據(jù)組件實(shí)例數(shù)據(jù)進(jìn)行更新！這使得自定義指令可以在應(yīng)用中被靈活使用。

例如你想要?jiǎng)?chuàng)建一個(gè)自定義指令，用來(lái)改變頁(yè)面元素的字體顏色。我們可以像這樣創(chuàng)建一個(gè)通過(guò)指令值來(lái)更新字體顏色的自定義指令：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-color="color">Hello ！</div>
    <button @click="changeColor">切換顏色</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.directive('color', {
    bind: function (el, binding, vnode) {
      el.style.color = binding.value
    },
    update(el, binding) {
      el.style.color = binding.value
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        color: 'red'
      }
    },
    methods: {
      changeColor() {
        this.color = '#' + Math.floor( Math.random() * 0xffffff ).toString(16);
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 3-10 行，我們定義了全局指令 v-color，定義 bind 鉤子函數(shù)設(shè)置元素的字體顏色，定義 update 鉤子函數(shù)，在節(jié)點(diǎn)更新時(shí)修改元素的字體顏色。
HTML 代碼第 2 行，我們使用 v-color 指令，并動(dòng)態(tài)傳入值 color。
HTML 代碼第 3 行，點(diǎn)擊按鈕切換 color 的值。
最終，當(dāng)我們點(diǎn)擊按鈕時(shí)，“Hello ！” 的字體顏色會(huì)隨機(jī)變化。

上面的例子中我們通過(guò)指令動(dòng)態(tài)設(shè)置了元素的字體顏色。但如果場(chǎng)景是我們需要修改元素的邊框顏色又該怎么辦呢？有些同學(xué)可能說(shuō)我們可以再寫一個(gè) v-border-color 不就行了。那如果又有修改背景色的需求呢？這時(shí)使用動(dòng)態(tài)參數(shù)就可以非常方便地根據(jù)每個(gè)組件實(shí)例來(lái)進(jìn)行更新：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-color:[colorstyle]="color" style="border: 1px solid #ccc;">Hello ！</div>
    <div v-color:[borderstyle]="color" style="border: 1px solid #ccc;">Hello ！</div>
    <div v-color:[backgroundstyle]="color" style="border: 1px solid #ccc;">Hello ！</div>
    <button @click="changeColor">切換顏色</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.directive('color', {
    bind: function (el, binding, vnode) {
      var s = binding.arg
      el.style[s] = binding.value
    },
    update(el, binding) {
      var s = binding.arg
      el.style[s] = binding.value
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        color: 'red',
        colorstyle: 'color',
        borderstyle: 'border-color',
        backgroundstyle: 'background-color',
      }
    },
    methods: {
      changeColor() {
        this.color = '#' + Math.floor( Math.random() * 0xffffff ).toString(16);
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 3-12 行，我們定義了全局指令 v-color，定義 bind 鉤子函數(shù)和 update 鉤子函數(shù)。
HTML 代碼第 2-4 行，我們使用 v-color 指令，并動(dòng)態(tài)傳入值 color。
HTML 代碼第 5 行，點(diǎn)擊按鈕切換 color 的值。
最終，當(dāng)我們點(diǎn)擊 "切換顏色" 按鈕時(shí)，分別會(huì)修改元素的 color、border-color、background-color 樣式屬性。

4.3 對(duì)象字面量

如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對(duì)象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-font="font">Hello ！</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.directive('font', {
    bind: function (el, binding, vnode) {
      el.style.color = binding.value.color
      el.style['font-size'] = binding.value.size
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        font: {
          size: '26px',
          color: 'red'
        }
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 3-8 行，我們定義了全局指令 v-font。
JS 代碼第 13-16 行，我們定義了對(duì)象類型的值 font。
HTML 代碼第 2 行，我們使用 v-font 指令，并動(dòng)態(tài)傳入對(duì)象類型的值 font。

5. 小結(jié)

本節(jié)，我們帶大家學(xué)習(xí)了自定義指令在項(xiàng)目中的運(yùn)用。主要知識(shí)點(diǎn)有以下幾點(diǎn)：

  • 使用 Vue.directive 注冊(cè)全局組件。
  • 使用 Vue 實(shí)例上 directives 屬性注冊(cè)局部組件。
  • 使用指令中鉤子函數(shù)操作 DOM 元素。
  • 使用動(dòng)態(tài)指令參數(shù)對(duì) DOM 元素做不同的操作。