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

...

...
標(biāo)題
var app = new Vue({
  el: '#app',
  data: { 
    url: 'www.baidu.com',
　　　　title: 'bind'
  },
}）

...

...　　　　//是一個(gè)方法名

一段文本
點(diǎn)擊隱藏文本　　//直接是一個(gè)內(nèi)聯(lián)的語句
Add 1
var app = new Vue({
  el: '#app',
　　data:{
　　　　show: true，
　　　　counter： 0
　　},
  methods: {
    doSomething: function(){
      console.log(this.title);
    },
  }
}）

  

      

        
阻止冒泡
      
    
　　

2.3修飾符：

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

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

阻止冒泡
　　//不用通過$event事件再來寫了

常用的一些修飾符有：

• .stop

• .prevent

• .capture

• .self

• .once

＜ ！一阻止單擊事件冒泡一〉

〈！一修飾符可以串聯(lián)一〉

〈！一添加事件偵聽器時(shí)使用事件捕獲模式一〉
 ... 
〈！一只當(dāng)事件在該元素本身（而不是子元素） 觸發(fā)時(shí)觸發(fā)回調(diào)一〉
 ... 
＜ ！一只觸發(fā)一次，組件同樣適用一〉
 ... 

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

＜ ！一只有在keyCode 是13 時(shí)調(diào)用vm.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；例如： 等同于 < span>{{msg}} ；

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

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

    

      
{ { book.name } }
    
  
var app =new Vue({
  el: '#app',
  data: {
    books: [
      {name: ''},
      {name: ''},
      {name: ''}
    ]
  }
});

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

  

    

      
{{ index}} - {{book.name })
    
  

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

  

    

      

        { { index } } - { { key } } : { { value } }
      
    
  
var app = new Vue({
  el: '#app',
  data: {
    name: 'Aresn',
    grender: '男',
    age:23
  }
});

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

 

    {{n}}
  

10.4 數(shù)組更新

當(dāng)我們修改數(shù)組時(shí)， Vue 會(huì)檢測到數(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ù)組來替換原數(shù)組，如：

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

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

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

10.5 過濾與排序

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

  

    

      
    
  
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)致頁面閃動(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á)式，跳過這個(gè)元素以及子元素的編譯過程，以此來加快整個(gè)項(xiàng)目的編譯速度；例如： < span v-pre>{{ this will not be compiled }} ；