vue2.0的基本特性

someone發表於2018-10-14
Vue

本文目前總結的特性如下
1.偵聽屬性和計算屬性
2.class的繫結
3.條件渲染時的注意事項
4.v-if和v-for同時使用的注意事項
5.插槽
6.ref,父元件呼叫子元件的另一種方式
7.<keep-alive>標籤

偵聽屬性和計算屬性

計算屬性computed
假設有A、B兩個變數,B的值依賴於A,B=A的平方

<p>A的值：{{A}}</p>
<p>A的平方:{{B}}</p>
//B的值依賴於A，當A發生改變時B也會改變
computed:{
    B(){
        //這個方法在A發生改變時會觸發,返回值傳給B
        return A*A
    }
}

當計算很簡單的時候,可以直接使用{{A*A}}來代替計算屬性。
可是當計算變得邏輯變得複雜時,如果巢狀在template的表示式並不適用於這種方法，而且這樣會使程式碼的可讀性變差，難以維護
而且使用計算屬性是有快取的,只有當A發生改變時,才會再次觸發

watch偵聽屬性
watch的功能computed類似,watch的方法在監聽的屬性改變時觸發

watch:{
  A(){
    this.B = A*A;
  }
}

class的動態修改

當一個元素的樣式需要根據資料來動態改變時，使用:class屬性
<div :class=”{類名:變數}”></div>，類名是否存在取決於變數值是否為真

當元素有多個樣式時：
<div :class=”[`類1`,{`類名2`:變數2}]”>

類名也可以用計算屬性來監聽：
isEnoug為true,class=”cartLeast unEmpty” 否則class=”cartLeast”
<div :class=”classObj”></div>
computed:{
classObj(){
let classArr = [`cartLeast`];

if(this.isEnough){
  classArr.push(`unEmpty`);
}
return classArr;

}
}

在引用元件的時候增加class,這是元件child的類名有a,b兩個
<template><div class=”a”></div></template>
<child class=”b”></child>

條件渲染時的注意事項

vue為了高效能渲染,一般會複用已渲染過的標籤。
假如有一個登入框，根據選擇的登入方式切換input，一個是手機登入，一個是郵箱登入。因為vue會複用原來已有的input，所以當你切換到郵箱登入時，input裡還會儲存有手機登入時的內容，這顯然是不符合條件的。
通過在input上新增key可以區別元素

<div class="" v-if="isSeen">
  <input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
  <input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
  toggle
</div>
data:{
isSeen:true
}

當同時使用v-for和v-if的注意事項

v-for的優先順序是高於v-if的,當只需要渲染滿足一些特點條件的元素時，是很有效的
但是當需要全部渲染時，把v-if放在外面

<div v-if="{{a}}"><div v-for="item in list"></div></div>

相關文章