Vue的內建指令

東方來客發表於2018-09-04
Vue

基本指令

  1. v-cloak 用在載入緩慢的時候解決使用者體驗不好的問題，比如{{}}用法可能自渲染之前要一直顯示為{{msg}}。會在Vue編譯結束之後再去渲染{{msg}}，一般與display:none;結合使用。
[v-cloak]{
    display:none;
}
複製程式碼
<div v-cloak>{{msg}}{/div}
複製程式碼
  1. v-once 指定的元素和元件只會渲染一次，在控制檯進行更改其內容頁面也不會發生改變。

條件渲染指令

  1. v-if / v-else 只有在條件為真的時候才會進行渲染，在不滿足條件的時候就不會被渲染。用法很簡單，直接來一個栗子。
<div id="app">
    <p v-if='one>three'>{{one}}</p>
    <p v-else>{{two}}</p>
</div>
複製程式碼
var app = new Vue({
    el:'#app',
    data:{
        one:1,
        two:2,
        three:3
    }
})
複製程式碼

這樣在頁面上渲染出來的就是2啦。

v-if出於效率考慮，會盡可能的複用已有的元素而不是重新渲染，比如input框中的內容。為此需要給元素加上唯一的key。

  1. v-show 其用法與v-if類似，不過v-show只是簡單的切換css的display屬性，即渲染之後一直存在。

具體區別點此檢視。

列表渲染指令 v-for

  1. 遍歷陣列的多個物件：
<ul>
    <li v-for="key in obj">
        {{key.value}}
    </li>
</ul>
複製程式碼
var app = new Vue({
    el:"app",
    data:{
        obj:[
            {value: 'one'},
            {value:'two'},
            {value:"three"}
        ]
    }
})
複製程式碼

Vue的內建指令
我們還可以得到它的index值，具體寫法為：

<ul>
    <li v-for="(key,index) in obj">
        {{index}} -- {{key.value}}
    </li>
</ul>
複製程式碼

渲染出的效果如圖所示。

Vue的內建指令
2. 遍歷一個物件的多個屬性：

<ul>
    <li v-for="key in obj">
        {{key}}
    </li>
</ul>
複製程式碼
var app = new Vue({
    el: '#app',
    data:{
        obj:{
            age1: 18,
            age2: 19,
            age3: 20
        }
    }
})
複製程式碼

結果如下：

Vue的內建指令
同樣的這種寫法也可以獲得key和index：

<ul>
    <li v-for="(value, key, index) in obj">
    {{index}} -- {{key}} -- {{value}}
    </li>
</ul>
複製程式碼

結果如圖所示（value key index的順序不能錯哦）

Vue的內建指令

陣列更新，過濾與排序

  1. push() 向陣列末尾新增一個元素。
  2. pop() 將陣列的最後一個元素移除,返回值是被刪除的元素。
  3. shift() 將陣列的第一個元素移除，返回的是被刪除的元素。
  4. unshift() 在陣列的第一個位置新增設定的引數，其他元素依次後移。返回加入元素後的陣列長度。
  5. splice() 可以刪除或新增，返回刪除的元素。接受三個引數。
    • 第一個參數列示開始操作的位置。
    • 第二個參數列示要操作的長度。
    • 第三個引數為可選引數（可以有多個），在第二個引數為0時，將其作為新增項。位置為第一個引數設定的位置，此時返回值為空陣列。
  6. sort()
  7. reverse()

過濾

在computed屬性中新增如下程式碼，即可在arr陣列中過濾出含有兩個"oo"的元素。 {{matchOO}}

matchOO: function(){
  return this.arr.filter(function(arr){
    console.log(arr)
    return arr.match(/oo/)
  })
}
複製程式碼

方法與事件

基本用法

<button #click="handle()"></button>
複製程式碼
handle:function(count){
  count = count || 1
  this.count += count
  console.log(count)
}
複製程式碼

不帶引數的方法再引用時可以不帶括號。帶引數的方法如果引用時不加括號，那麼預設傳遞的值是原生事件物件的event。像上面的程式碼，如果沒有加括號，那麼傳遞的值就是 mouseevent。

修飾符

我們寫了如下程式碼，發現點選按鈕的時候div的click事件也被觸發了，原因是button在div內，相當於同時點了兩個區域，這時我們可以在button的click事件上加一個stop，就可以阻止冒泡事件。

<div @click='divclick' style="width: 100px;height: 100px;background: cyan;">
  <button @click='btnclick'>?</button>
</div>
複製程式碼

接下來認識一下 prevent,form表單在提交的時候總是會重新整理頁面，所以我們就需要這個像原生裡的preventDefault()的修飾符--prevent.用法如下：

<form @submit.prevent>
    <button type='submit'></button>
</form>
複製程式碼

接下來再來認識一個self，其作用是讓事件只作用在本身，而不是子元素被呼叫的時候。

<div @click.self="event">
    <button @click="event"></button>
</div>
複製程式碼

最後在來認識一下once同學，

相關文章