vue.js 四（指令和自定義指令）

官方的指令說明已經很簡單了，這里再寫一遍，也是自己加深一下印象

v-text 就是寫入單純的文本，可以忽略這個指令直接雙花括號代替

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

v-html 更新元素的 innerHTML，如果取回的值里面包含了html的樣式，可以使用這個指令。

以下抄寫了官方注意事項，對於用戶輸入的HTML，顯示的時候需要謹慎處理。如果是服務器自己生成的HTML，完全由開發者掌控的代碼，可以忽略

注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。如果試圖使用 v-html 組合模板,可以重新考慮是否通過使用組件來替代。

在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

v-show 

根據表達式之真假值，切換元素的 display CSS 屬性。

當條件變化時該指令觸發過渡效果。

簡單說就是控制當前指令的標簽是否顯示

v-if，v-else, v-else if

根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀並重建。如果元素是 <template>，將提出它的內容作為條件塊。

當條件變化時該指令觸發過渡效果。

條件判斷，這里簡單的條件判斷還行，復雜的判斷還是直接在模型里處理吧。

v-on

綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

用在普通元素上時，只能監聽 原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event 屬性： v-on:click="handle('ok', $event)"。

修飾符

• .stop - 調用 event.stopPropagation()。
• .prevent - 調用 event.preventDefault()。
• .capture - 添加事件偵聽器時使用 capture 模式。
• .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
• .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
• .native - 監聽組件根元素的原生事件。
• .once - 只觸發一次回調。
• .left - (2.2.0) 只當點擊鼠標左鍵時觸發。
• .right - (2.2.0) 只當點擊鼠標右鍵時觸發。
• .middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
• .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>

在子組件上監聽自定義事件（當子組件觸發 “my-event” 時將調用事件處理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 內聯語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

注意上面對於vue版本的限制，低版本不支持！主要適用於各類事件的處理。

v-bind 

動態地綁定一個或多個特性，或一個組件屬性到表達式。

在綁定屬性時，屬性必須在子組件中聲明。可以用修飾符指定不同的綁定類型。

沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。

 v-model

v-model指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

常用的表單控件如select， input，textarea 等

如果是select綁定的值會直接選中，其他的輸入則直接選擇文本

v-pre

官方的解釋是：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。

至今沒有怎么用過

v-cloak

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。

這個指令使用場景比較特殊，在初始化的時候會顯示原始的代碼，例如

<ul v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

頁面加載未完成時會顯示

{{ item.name }}

這時候如果加入了這個指令標簽在ul上

<ul v-cloak v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

然后對應的全局css上加入

[v-cloak] {
  display: none;
}

頁面初始化未完成的時候，整個標簽會被隱藏，加載完成后這個標簽會自動去掉，顯示完整的結果。

v-once

只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。

  <div v-once>
      <p>{{msg}}</p>
    </div>
    <div v-on:click="changeValue">點擊修改msg的值</div>

我們綁定一個點擊事件試圖網頁渲染完成后去修改msg的值，事件觸發有此標簽的內容不會再更改。

---------------------------------------------------------------------------------------------------------

標簽內容有的直接拷貝的官方網頁上的說明，部分附上了簡單的實例

所有的內容嘗試一遍，還是有些意外的收貨的

可能剛開始項目使用過程中，只用到了部分指令，在都了解了一遍后，我又把原來項目里面部分功能重新修改了一遍

有的功能一個指令能完成的，我可能用了好幾個指令去協作完成，畢竟剛開始看官方文檔的時候，看得不是很全面

看文檔還是要多動手嘗試，加深印象，將來用起來更加得心應手

下面附上一個自定義指令

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.directive('title', {
  inserted: function (el, binding) {
    let title = binding.value;

    if (title) {
      document.title = binding.value;
    }
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

然后我們的vue文件里面就可以使用v-title指令了

<template>
    <div v-title="'這里是標題'">
        這里是內容
    </div>
</template>

<script>

export default {
    name: 'home',
    components: {
    },
    data() {
        return {

        }
    }
}
</script>
<style lang="scss" scoped>

</style>

注意指令內容里面單引號標識這是個字符串，不用單引號，指令值表示變量的名稱，要在data里面聲明對應的變量名

<template>
    <div v-title="title">
        這里是內容
    </div>
</template>

<script>

export default {
    name: 'home',
    components: {
    },
    data() {
        return {
            title:"這里是標題"

        }
    }
}
</script>
<style lang="scss" scoped>

</style>

全局指令注冊屬於全局API，全局注冊指令用法

// 注冊
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注冊（傳入一個簡單的指令函數）
Vue.directive('my-directive', function () {
  // 這里將會被 `bind` 和 `update` 調用
})

指令定義函數提供了幾個鈎子函數說明，只需要聲明用到的函數，不需要的可以省略：

• bind: 只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個在綁定時執行一次的初始化動作。

• inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。

• update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。

• componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。

• unbind: 只調用一次， 指令與元素解綁時調用。

鈎子函數被賦予了以下參數：

• el: 指令所綁定的元素，可以用來直接操作 DOM 。
• binding: 一個對象，包含以下屬性：
  • name: 指令名，不包括 v- 前綴。
  • value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
  • oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用。
  • expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
  • arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。
  • modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 編譯生成的虛擬節點，查閱 VNode API 了解更多詳情。
• oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用。

參數使用如下

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

 

指令在綁定網頁元素值有優勢，例如某些網頁上的值顯示需要保留兩位小數

但是涉及到需要附帶元素的css樣式，需要附帶一些參數控制等，還是需要選擇使用插件解決。