2. 程式人生 > >Vuejs - 強大的指令系統

Vuejs - 強大的指令系統

阿新 • • 發佈：2018-06-25
ont select dex prev BE 源碼 filter -h 書寫

在 Vuejs 中，指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的預期值是 單個 Javascript 表達式（v-for 是個例外）。指令的職責是，當表達式改變時，將其產生的連帶影響，響應式的作用於 DOM。

當然，Vue 除了核心功能默認內置的指令外，更強大的是它允許註冊自定義指令，這是個讓我非常驚喜功能。因為當初在使用 Angular1.x 時就特別喜好自定義指令這個功能，沒想到 Vue 也借鑒了進來，讓我能夠靈活對 DOM 進行底層操作，而且它具有非常高的復用性，書寫起來也非常簡潔。

當然在 Vue 中，代碼的復用和抽象的主要形式還是 組件，這將在下一節中講到。

內置指令

Vue 提供供了大概 13 種內置指令，基本上能夠滿足我們的日常開發需求，不得不說作者考慮的已經非常全面，給尤大大點贊。這裏只介紹 v-for、v-on 兩種內置指令，感興趣的可以到 官方API 了解。

1.v-for

上一節我們已經使用過了，它是基於源數據多次渲染元素或莫板塊的。此指令的值，必須使用特定語法 alias in expression 來進行輸出。 expression 為需要遍歷的對象，它可以是 Array | Object | number | string 四種類型，alias 為遍歷的元素別名。這個跟 js 的遍歷函數 map 很相似，先來看個例子：

1
2
3
4
5
6
7
 
<div id="app1">
  <ul>
    <li v-for="item in 5">
      {{ item }}
    </li>
  </ul>
</div>
 
1
2
3
 
var app1 = new Vue({
  el: "#app1",
})

這裏是在頁面上依次輸出 1~5 的數字，此時 expression 為 5，number（number 必須為正整數） 類型。 Vue 在渲染時，會先創建一個長度為 5 的數組，然後遍歷輸出 item + 1 的值。如果為 string 類型，就會創建一個該字符串長度的數組，再遍歷輸出字符串的每個字符。單純講肯定不太好理解，其實這部分源碼很簡單，大家可以直接通過閱讀來理解：官方源碼。

大多數時候，expression 都只是個數組，其實知道它還可以為 string 或者 number 是很有用的，比如我們需要快速重復輸出一個DOM，使用 number 能很快實現，節約了我們復制粘貼或者書寫數組列表的時間。當為 string 時，我們可以根據需求依次輸出每個字符，以此可以做出很炫酷的打字效果，如下：

1
2
3
 
<div id="app2">
  <span v-for="(item, index) in name" v-bind:style="{animationDelay: `${0.5 + index * 0.3}s`}">{{ item }}</span>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
 
#app2 span {
  animation: flip-in 1s 0s ease-in-out both;
}
@keyframes flip-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
1
2
3
4
5
6
7
8
9
 
// demo 2
var app2 = new Vue({
  el: "#app2",
  data () {
    return {
      name: ‘yugasun‘
    }
  }
})

怎麽樣？曾今看到別人做出炫酷的打字效果簡歷是不是很羨慕，這裏只需要20行代碼就可以實現打字效果，趕緊動手試試吧~

註意： 這裏在設置每個字符的 animation-delay 屬性時，用到了 v-bind 指令，這個很簡單，這裏不做贅述。同時使用了 ES6 的模板字符語法來計算時延的值，如果瀏覽器不支持，建議更換為新版 Chrome 瀏覽器。模板字符串 教程在這裏。

2.v-on

v-on 指令是用來綁定事件監聽器的，事件類型可以是DOM原生事件，也可以是通過 $emit 觸發的自定義事件。但是只有用在自定義元素組件上時，才可以監聽組件觸發的自定義事件。

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

看代碼更好理解：

1
2
3
4
5
 
<div id="app3">
  <button v-on:click="handleClick(‘確定‘, $event)">確定</button>
  <button v-on:click="handleClick(‘取消‘, $event)">取消</button><br>
  {{ msg }}
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var app3 = new Vue({
  el: "#app3",
  data () {
    return {
      btnText: ‘‘
    }
  },
  computed: {
    msg () {
      return this.btnText ? `點擊了 ${this.btnText} 按鈕` : ‘您還沒點擊任何按鈕‘
    }
  },
  methods: {
    handleClick (text, e) {
      console.log(e)
      this.btnText = text
    }
  }
})

這裏通過 v-on 監聽了兩個按鈕的點擊事件，並分別傳遞了各自的文字到監聽函數進行輸出，輸出的 msg 是計算屬性（如果不懂什麽是計算屬性，教程在這裏 深入淺出響應式系統），依賴 btnText 動態計算的。可以通過控制臺查看打印出的參數 e 對象就是一個原生 MouseEvent 對象。

除了基本的用法， v-on 指令還提供了豐富的 修飾符 來配合使用，這樣可以寫出非常靈活的監聽事件，比如我們經常使用的 e.preventDefault()，在 Vue 中我們只需要通過 v-on:click.prevent 就可以實現了，是不是很炫酷，所有的修飾符列表在 這裏。這裏我們來演示下，點擊鼠標左鍵和右鍵的事件監聽，將上面的 html 代碼修改如下：

1
2
3
4
5
6
 
<div id="app3">
  <!-- 相對於上面只添加了 `.left` 和 `.right` 修飾符 -->
  <button v-on:click.left="handleClick(‘確定‘, $event)">確定</button>
  <button v-on:click.right="handleClick(‘取消‘, $event)">取消</button><br>
  {{ msg }}
</div>

自定義指令

最讓我激動人心的就是自定義指令了，它即可以通過 Vue.directive 註冊全局指令，也可以給 Vue 實例添加 directives 屬性來註冊局部指令。這兩種指令都是通過指令定義時的鉤子函數實現的。

關於鉤子函數和鉤子函數參數介紹請直接閱讀官方文檔，官方文檔已經講述的非常詳細了，這裏不再贅述，直通車：鉤子函數、鉤子函數參數

相信你們已經很快看完了官方文檔介紹了，好了現在我將帶你來領略自定義指令的強大，實現一個倒計時指令。

鉤子函數 bind 是在元素第一次綁定到元素時調用的，所以我們可以在這裏初始化綁定的元素 el，而且綁定元素已經作為所有鉤子函數的第一個參數被傳入，這裏可以通過 el.innerHTML 就很容易修改綁定元素的內容了，代碼如下：

1
2
3
4
 
<div id="app4">
  <button v-on:click="startCount">開始倒計時</button>
  <span data-count="60" v-count-down="count" v-if="show" style="font-size:16px;"></span>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var app4 = new Vue({
  el: ‘#app4‘,
  data () {
    return {
      show: false, // 是否顯示倒計時
      timer: null // 定時器
    }
  },
  methods: {
    startCount: function () {
      this.show = true
    }
  },
  directives: {
    ‘count-down‘: {
      bind: function (el, binding, vnode) {
        el.innerHTML = ‘60‘
      }
    }
  }
})

當我們點擊按鈕是，將 show 置為 true，此時 v-if 指令就判斷顯示使用 v-count-down 指令的元素，然後執行 bind 初始化函數，將元素內容修改為 60。這裏很好理解。但是我們要實現倒計時，就需要創建一個定時器，並需要維護一個數實現遞減，這裏通過動態修改 data-count 的值來實現。

實現思路：當初始化時，創建一個定時器，每隔1s將獲取 data-count 的值減一，然後賦給 el.innerHTML，同時修改 data-count 屬性為新的值，當然還需要添加判斷，就是當然 data-count 為0時，清除計時器。

有了思路，實現代碼就非常簡單了：

1
2
3
4
5
6
 
<div id="app4">
  <button v-on:click="startCount">開始倒計時</button>
  <span v-count-down data-count="60" v-if="show" style="font-size:16px;">
    60
  </span>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
var app4 = new Vue({
  el: ‘#app4‘,
  data () {
    return {
      show: false, // 是否顯示倒計時
    }
  },
  methods: {
    startCount: function () {
      this.show = true
    }
  },
  directives: {
    ‘count-down‘: {
      bind: function (el, binding, vnode) {
        let count = parseInt(el.getAttribute(‘data-count‘))
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        // 大家可以推測下這裏的 this 指什麽？
        this.timer = setInterval(function () {
          if (count <= 0) {
            clearInterval(this.timer)
            this.timer = null
          } else {
            count--
            el.innerHTML = count
            el.setAttribute(‘data-count‘, count)
          }
        }, 1000)
      }
    }
  }
})

Vuejs - 強大的指令系統

相關推薦

Vuejs - 強大的指令系統

ont select dex prev BE 源碼 filter -h 書寫 在 Vuejs 中，指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的預期值是 單個 Javascript 表達式（v-for 是個例外）。指令的職責是，當表達式改變時，將其產

數據表示與指令系統

效率 技術 數據 單元 二叉樹 -s 系統 指令 blog 數據表示的定義： 機器硬件能直接識別和引用的數據類型。 數據表示和數據結構的關系： 數據表示是由硬件實現的數據類型。而數據結構是由軟件實現的數據類型。數據結構是通過數據表示和軟件映象相結合方法實現，通俗一點

angularJS指令系統---Directive

遍歷 mod 默認 com ron 頁面 clas html5 $scope 指令：Directive angularJS 有一套完整的，可拓展的，用來幫助web應用開發的指令集； 在建立DOM期間，和HTML關聯著的指令會被檢測到，並被執行； 在angularJS中將

指令系統

所有 span img image line pan 9.png math spa 操作碼是7位，那指令個數是\(2^7\). 設計指令相關題中，隱含意思是把所有的操作碼位數都用光。 核心思想：短操作碼的指令先把左邊的位用一些，用不完的話就留下一些給第二層接著用，再依次往下

12-----指令系統介紹

表達式 true 時間 三元表達式 tcl 介紹 屬性。 當我 接收 所謂指令系統，大家可以聯想咱們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。 在vue中，指令系統，設置一些命令之後，來操作我們的數據屬性，並展示到我們的DOM上。 OK，接下來我們一一

第四章 指令系統

地址 text 尋址方式 通用 減少 順序 多道程序設計 另一個 超流水線 總覽 指令格式 指令的基本格式 定長操作碼指令格式 不定長操作指令格式 指令的尋址方式 數據尋址和指令尋址 常見尋址方式 CISC和RISC的基本概念 指令格式 指令的基本格式 操作碼地址碼

vue-指令系統

獲取cookie color ati ESS 方式 真的 val 命令行工具 運行 vue-指令 所謂指令系統，大家可以聯想咱們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。 在vue中，指令系統，設置一些命令之後，來操作我們的數據屬性，並展示到我們的

x86-64指令系統

很多 超過 com 傳遞 地址 編譯器 64位 大小 程序計數器 x86-64指令系統概述 x86-64中各類數據的長度 x86-64的通用寄存器 新增8個64位通用寄存器（整數寄存器） • R8、R9、R10、R11、R12、R13、R1

資料表示、定址方式與指令系統_計算機系統結構第二章_自考本科

概要:計算機系統結構第二章資料表示、定址方式與指令系統知識點小結 一、資料表示（應用） 1、資料表示的定義，資料表示與資料結構的關係     定義：能由計算機硬體識別和引用的資料型別，表現再它有對這種型別的資料進行操作的指令和運算部件 &nbs

PIC指令系統

巨集觀理解 核心助記符 助記符 功能說明 英文全稱 ADD 相加 add SUB 相減 substract RL 迴圈左移 rot

菜鷄日記——《彙編與介面技術》第3-3章 80X86指令系統 之 控制轉移指令 & 處理機控制指令

控制轉移指令  轉移指令（無條件轉移指令、條件轉移指令） 迴圈指令 子程式控制和返回指令 中斷與中斷返回指令 無條件轉移指令：JMP 段內直接短轉移：JMP SHORT OPR    執行操作：IP←IP+

菜鷄日記——《彙編與介面技術》第3-3章 80X86指令系統 之 算術指令 & 邏輯指令

算術指令 有符號數算術運算與標誌OF： 有符號數運算用補碼錶示，帶符號運算 溢位時OF=1，不溢位時OF=0 兩異號數加減無溢位，兩同號數加減可能溢位 An、Bn、Sn分別代表兩加數和結果的符號位，則第3點的數學表示為：OF=(﹁An∧﹁Bn∧Sn)∨(An∧Bn∧﹁

菜鷄日記——《彙編與介面技術》第3-3章 80X86指令系統 之 資料傳送指令

第3-3章 80X86指令系統                                      

組合語言--微機CPU的指令系統（五）（標誌位操作指令）

（2）標誌位操作指令 標誌位操作指令是一組對標誌位置位、復位、儲存和恢復等操作的指令。 1、進位CF操作指令 Ø 清進位指令CLC(Clear Carry Flag)：CF←0 Ø 置進位指令STC(Set Carry Flag)：CF←1 Ø 進位取反指令CMC(Complement Carry

組合語言--微機CPU的指令系統（五）（算術運算指令）

(3)算術運算指令 算術運算指令是反映CPU計算能力的一組指令，也是程式設計時經常使用的一組指令。它包括：加、減、乘、除及其相關的輔助指令。 該組指令的運算元可以是8位、16位和32位(80386+)。當儲存單元是該類指令的運算元時，該運算元的定址方式可以是任意一種儲存單元定址方式。 1、加法指令&nb

組合語言--微機CPU的指令系統（五）（移位操作指令）

(5) 移位操作指令 移位操作指令是一組經常使用的指令，它包括算術移位、邏輯移位、雙精度移位、迴圈移位和帶進位的迴圈移位等五大類。 移位指令都有指定移動二進位制位數的運算元，該運算元可以是立即數或CL的值。在8086中，該立即數只能為1，但在其後的CPU中，該立即數可以是1··31之內的數。 1、算術移

組合語言--微機CPU的指令系統（五）（比較運算指令）

（7）比較運算指令 在程式中，我們要時常根據某個變數或表示式的取值去執行不同指令，從而使程式表現出有不同的功能。為了配合這樣的操作，在CPU的指令系統中提供了各種不同的比較指令。通過這些比較指令的執行來改變有關標誌位，為進行條件轉移提供依據。 1、比較指令CMP(Compare Instruction)

匯編語言--微機CPU的指令系統（五）（比較運算指令）

hang 介紹 操作數 我們 com 標誌位 表達 數據 進行 （7）比較運算指令 在程序中，我們要時常根據某個變量或表達式的取值去執行不同指令，從而使程序表現出有不同的功能。為了配合這樣的操作，在CPU的指令系統中提供了各種不同的比較指令。通過這些比較指令的執行來改變有關

組合語言--微機CPU的指令系統（五）（迴圈指令）

（8）迴圈指令 迴圈結構是程式的三大結構之一。為了方便構成迴圈結構，組合語言提供了多種迴圈指令，這些迴圈指令的迴圈次數都是儲存在計數器CX或ECX中。除了CX或ECX可以決定迴圈是否結束外，有的迴圈指令還可由標誌位ZF來決定是否結束迴圈。 在高階語言中，迴圈計數器可以遞增，也可遞減，但組合語言中，CX或E

組合語言--微機CPU的指令系統（五）（轉移指令）

（9）轉移指令 轉移指令是組合語言程式設計師經常使用的一組指令。在高階語言中，時常有“儘量不要使用轉移語句”的勸告，但如果在組合語言的程式中也儘量不用轉移語句，那麼該程式要麼無法編寫，要麼沒有多少功能，所以，在組合語言中，不但要使用轉移指令，而且還要靈活運用，因為指令系統中有大量的轉移指令。 轉移指令分無