vue構建的七彩外衣

繼第一章的vue入門http://blog.csdn.net/jerryjavacoding/article/details/77985464，接着學習的是vue在前端另一個重要領域：樣式。傳統基於dom的樣式都是通過綁定class或者id來進行渲染，當我們需要根據業務動態修改樣式的時候，很多時候只能依賴腳本去做邏輯替換，這個比較繁瑣也容易出錯。而vue通過其自身的數據雙向綁定特性，應用於樣式上，我們就可以根據這個來改變元素上的樣式，簡單易懂，非常方便。

Class 與 Style 綁定

• Style
  vue中要動態跟換元素的樣式，使用class的話，就是將元素的Style特性與一個數據源對象進行綁定，這個數據源的key都是一些css文件中樣式名稱，如color，display等。比如

 <a :style="classObj" href="xxx"/>
<script>
...
 vue.data(){
    return{
        classObj:{          
                color:blue,
                display:none,   
        }
    }
}
</script>

這樣我們就將a的“外衣”牢牢的與classObj對象綁定在一起，當我們需要更改樣式的時候，只要修改classObj對應屬性就可以了，元素a的樣式就會實時更新。
這裏我們注意到style綁定的是一個對象，而這個對象可以有衆多的屬性，所以一般一個對象就能應付上很多樣式需求了，但是如果我們定義的style綁定對象要可以複用到其他元素上，或者需要一些公用的屬性，每次都手動添加一份就顯得不靈活且繁瑣，這是style綁定的對象可以是一個數組，而數組中的對象就是上文中普通的數據源，比如

 <a :style="[classObj,publicObj]" href="xxx"/>
<script>
...
 vue.data(){
    return{
        publicObj:{
            color:blue,
        },
        classObj:{                      
            display:none,   
        }
    }
}
</script>

如今我們看到都是key-value的形式，一個鍵只有一個值，vue新版2.3中增加了一個稱謂“多重值”的概念，就是一個鍵可以有多個不同的值，那瀏覽器到底會採用哪個值呢？嘿嘿這還真是瀏覽器的事情了，不同瀏覽器引擎不同，我們將所有情況都羅列一般，主要就是爲了兼容不同瀏覽器，如果都支持的話，就會取最後一個。

---

• Class

class其實與上文的style類似，也有分數組和對象兩種語法，還有數據與對象的結合。
這裏的class跟style有啥不同？爲什麼會單獨分出來？
style一般是我們自己定義的，k-v的v有n中可能，但是class只有兩種可能，true or false

<div :class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

對嘛，我們選擇class對象是，要麼採用要麼不要。這個要嚴格區分與style的不同。上文提到這裏也可以是數組，如

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

數組語法，顯示了的，當然是true了，沒顯示就是false，下面這種是對象語法與數組語法的結合體：

<div :class="[{ active: isActive }, errorClass]"></div>

這裏還要強調一點是我踩過的坑，當我們的class作用在自定義的組件上時，如

ChildModal.vue:
    <template>
        <p class="classObj">Hello World!</p>
        ...
    </template>

Parent.vue:
    <ChildModal class="classObjParent"></ChildModal>

組件的父組件渲染的時候會將classObj也帶到組件上來，而例子中我們看到父組件上已經定義了classObjParent了，這時候子組件定義的class就會追加在後面，而不是覆蓋！

渲染

對於html元素的渲染，一般都會跟vue提供的指令掛鉤

• 首先比較經典的就是v-if和v-show的區別，很多人知道v-if是根據屬性然後選擇性渲染，而show是全部渲染，然後依託display來顯示和影藏。道理都懂，可以官方爲什麼這麼費勁去搞出兩套東西？那要根據其應用場景才能知道vue的意圖。
  if的切換開銷大，適用於頁面不經常切換，改變的條件一般不太可能，而show是渲染的開銷大，適用於頁面經常切換
  不過show不能用於template元素，這個元素渲染後是不存在的，那麼display就無意義了，只能通過if。
  條件渲染中，如下面的例子（下面這個也不能用show，因爲show不支持v-else）

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

• key管理可複用的元素
  當我們根據loginType切換不同的頁面的時候，會發現兩個template其實裏面的input是同一個，這樣對於要切換來回的業務需求就不合理了，vue的解決方法就是通過給input添加key值，來區分他們。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

• v-for與v-if
  兩者同時存在的時候，for的優先級更高。當我們需要for遍歷數組然後通過if來篩選的話，在一個元素上，兩個可以同時存在，原因就是for優先級高，但是當我們要根據if判斷後再來用for去遍歷數組，這個顯然就不對了，只能在元素的外層去使用if了

• 上文提到了v-for，很多人對於for指令的只是瞭解item in items，其實還有很多，比如

   item of items 
  (item,index) in items
  

  for除了可以遍歷數組，還能遍歷對象，

   value in Object
  (value,key)  in object
  (value,key,index) in object
  

  for遍歷如果是對象，對象的數據變動並不能觸發到for去更改，只能通過vue實例的$set函數對象去修改，如果是數組，有以下情況，也不能更新，要跟對象一樣處理：

  當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue                   當你修改數組的長度時，例如：vm.items.length = newLength
  

注：本文例子部分引用官網