快捷導(dǎo)航

vue內(nèi)置指令詳解

更新時(shí)間：2018年04月03日 08:25:14 作者：柴小智

指令是Vue模板中最常用的一項(xiàng)功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下

指令 (Directives) 是帶有 v- 前綴的特殊屬性，職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

內(nèi)置指令

1、v-bind：響應(yīng)并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等

主要用法是綁定屬性，動(dòng)態(tài)更新HTML元素上的屬性；

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- 縮寫(xiě) -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
<div :title='title'>標(biāo)題</div>
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',
　　　　title: 'bind'
  },
}）

2、v-on：用于監(jiān)聽(tīng)DOM事件；例如：v-on:click v-on:keyup

順帶講一下方法與事件

2.1 @click 的表達(dá)式可以直接使用JavaScript 語(yǔ)句，也可以是一個(gè)在Vue 實(shí)例中methods 選項(xiàng)內(nèi)的函數(shù)名，可以在方法中傳遞參數(shù)

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫(xiě) -->
<a @click="doSomething()">...</a>　　　　//是一個(gè)方法名

<p ng-if='show'>一段文本</p>
<button @click="show=false">點(diǎn)擊隱藏文本</button>　　//直接是一個(gè)內(nèi)聯(lián)的語(yǔ)句
<button v-on:click="count++">Add 1</button>
var app = new Vue({
  el: '#app',
　　data:{
　　　　show: true，
　　　　counter： 0
　　},
  methods: {
    doSomething: function(){
      console.log(this.title);
    },
  }
}）

2.2方法與事件：

Vue 提供了一個(gè)特殊變量$event ，用于訪問(wèn)原生DOM 事件，可以阻止事件冒泡或者阻止鏈接打開(kāi)

寫(xiě)一個(gè)阻止冒泡的例子：

  <div @click="stopClick1('stop1',$event)">
      <div @click="stopClick2('stop2',$event)">
        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>
      </div>
    </div>
　　</div>

methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

2.3修飾符：

在＠綁定的事件后加小圓點(diǎn)“．”，再跟一個(gè)后綴來(lái)使用修飾符。

上面的阻止冒泡事件，可以直接用戶修飾符的方式寫(xiě)為：

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用通過(guò)$event事件再來(lái)寫(xiě)了

常用的一些修飾符有：

• .stop

• .prevent

• .capture

• .self

• .once

＜ ！一阻止單擊事件冒泡一〉
<a @click.stop=”handle "></a>
〈！一修飾符可以串聯(lián)一〉
<a @click.stop.prevent=” handle ” ></a>
〈！一添加事件偵聽(tīng)器時(shí)使用事件捕獲模式一〉
<div @click . capture=”handle ”> ... </div>
〈！一只當(dāng)事件在該元素本身（而不是子元素） 觸發(fā)時(shí)觸發(fā)回調(diào)一〉
<div @click.self=” handle ”> ... </div>
＜ ！一只觸發(fā)一次，組件同樣適用一〉
<div @click.once=” handle ”> ... </div>

在表單元素上監(jiān)昕鍵盤(pán)事件時(shí)，還可以使用按鍵修飾符，比如按下具體某個(gè)鍵時(shí)才調(diào)用方法：

＜ ！一只有在keyCode 是13 時(shí)調(diào)用vm.submit()一〉
<input @keyup.13 ＝“ submit ”〉

3、v-model：數(shù)據(jù)雙向綁定；用于表單輸入等；例如：< input v-model= "message">

4、v-show：條件渲染指令，為DOM設(shè)置css的style屬性

5、v-if：條件渲染指令，動(dòng)態(tài)在DOM內(nèi)添加或刪除DOM元素

6、v-else：條件渲染指令，必須跟v-if成對(duì)使用

7、v-else-if：判斷多層條件，必須跟v-if成對(duì)使用；

8、v-text：更新元素的textContent；例如： 等同于 {{msg}} ；

9、v-html：更新元素的innerHTML；會(huì)把標(biāo)簽名也帶上。

10、v-for：循環(huán)指令；例如：

<div id= "app ">
    <ul>
      <li v-for="book in books">{ { book.name } }</li>
    </ul>
  </div>
var app =new Vue({
  el: '#app',
  data: {
    books: [
      {name: '<vue.js實(shí)戰(zhàn)>'},
      {name: '<javascript語(yǔ)言精粹>'},
      {name: '<javascript高級(jí)程序設(shè)計(jì)>'}
    ]
  }
});

10.1 v- for 的表達(dá)式遍歷數(shù)組時(shí)支持一個(gè)可選參數(shù)作為當(dāng)前項(xiàng)的索引，例如：

  <div id="app">
    <ul>
      <li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
    </ul>
  </div>

10.2 v- for 的表達(dá)式遍歷對(duì)象屬性時(shí)，有兩個(gè)可選參數(shù)，分別是鍵名和索引：

  <div id= "app">
    <ul>
      <li v-for="(value , key , index) in user ">
        { { index } } - { { key } } : { { value } }
      </li>
    </ul>
  </div>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Aresn',
    grender: '男',
    age:23
  }
});

10.3 v- for 的表達(dá)式還可以迭代整數(shù)：

 <div id="app">
    <span v-for="n in 10">{{n}}</span>
  </div>

10.4 數(shù)組更新

當(dāng)我們修改數(shù)組時(shí)， Vue 會(huì)檢測(cè)到數(shù)據(jù)變化，所以用v-for 渲染的視圖也會(huì)立即更新。

• push()
• pop()
• shift()
• unshit（）
• splice()
• sort（）
• reverse()

這些方法會(huì)改變被這些方法調(diào)用的原始數(shù)組

例如，我們將之前一個(gè)示例的數(shù)據(jù)books 添加一項(xiàng)：

app.books.push({
  name: '《css世界》'
});

有些方法不會(huì)改變?cè)瓟?shù)組，例如：

• filter()
• concat()
• slice()

它們返回的是一個(gè)新數(shù)組，在使用這些非變異方法時(shí)，可以用新數(shù)組來(lái)替換原數(shù)組，如：

app.books = app.books.filter(function (item) {
  return item . name.match(/JavaScript/);
});

Vue 在檢測(cè)到數(shù)組變化時(shí)，并不是直接重新渲染整個(gè)列表，而是最大化地復(fù)用DOM 元素。

替換的數(shù)組中，含有相同元素的項(xiàng)不會(huì)被重新渲染，因此可以大膽地用新數(shù)組來(lái)替換舊數(shù)組，不用擔(dān)心性能問(wèn)題。

10.5 過(guò)濾與排序

當(dāng)你不想改變?cè)瓟?shù)組，想通過(guò)一個(gè)數(shù)組的副本來(lái)做過(guò)濾或排序的顯示時(shí)，可以使用計(jì)算屬性來(lái)返回過(guò)濾或排序后的數(shù)組，例如：

  <div id="app">
    <ul>
      <template v-for="book in filterBooks">
        <li>書(shū)名：{{book.name}}</li>
        <li>作者：{{book.author}}</li>
      </template>
    </ul>
  </div>
var app= new Vue({
  el: '#app',
  computed: {
    filterBooks: function(){
      return this.books.filter(function (book) {
        return book.name.match(/JavaScript/);
      })
    },
  }
});

11、v-cloak：不需要表達(dá)式，這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯； v-cloak 是一個(gè)解決初始化慢導(dǎo)致頁(yè)面閃動(dòng)的最佳實(shí)踐；

12、v-once：也是一個(gè)不需要表達(dá)式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節(jié)點(diǎn)。

首次渲染后，不再隨數(shù)據(jù)的變化重新渲染，將被視為靜態(tài)內(nèi)容； v-once 在業(yè)務(wù)中也很少使用，當(dāng)你需要進(jìn)一步優(yōu)化性能時(shí)，可能會(huì)用到。

13、v-pre：不需要表達(dá)式，跳過(guò)這個(gè)元素以及子元素的編譯過(guò)程，以此來(lái)加快整個(gè)項(xiàng)目的編譯速度；例如： {{ this will not be compiled }} ；

您可能感興趣的文章: