Vue.js筆記第二波，Class 與 Style 綁定，條件渲染，列表渲染

Vue.js筆記第二波，Class 與 Style 綁定，條件渲染，列表渲染

今天學了三個大的板塊，學起來很快，可是整理筆記很浪費時間，後面把筆記補上，個人學習方法是先快速學習，而後整理筆記，充分消化，再學習新的，溫故而知新。

Class 與 Style 綁定
數據綁定一個常見需求是操做元素的 class 列表和它的內聯樣式。由於它們都是 attribute，咱們能夠用 v-bind 處理它們：只須要計算出表達式最終的字符串。不過，字符串拼接麻煩又易錯。所以，在 v-bind 用於 class 和 style 時，Vue.js 專門加強了它。表達式的結果類型除了字符串以外，還能夠是對象或數組。

    綁定 HTML Class
    儘管能夠用 Mustache 標籤綁定 class，好比 class="{{ className }}"，可是咱們不推薦這種寫法和     v-       bind:class 混用。二者只能選其一！

        對象語法
        能夠傳給 v-bind:class 一個對象，以動態地切換 class。注意 v-bind:class 指令能夠與普通的 class 特性         共存，也能夠直接綁定數據裏的一個對象，也能夠在這裏綁定一個返回對象的計算屬性。這是一個經常使用         且強大的模式。
        
        數組語法
        能夠把一個數組傳給 v-bind:class，以應用一個 class 列表，也能夠用三元表達式，不過，當有多個條           件 class 時這樣寫有些繁瑣。在 1.0.19+ 中，能夠在數組語法中使用對象語法

        <div v-bind:class="[classA, { 'class-b': isB, 'class-c': isC }]">

    綁定內聯樣式
        
        對象語法
        v-bind:style 的對象語法十分直觀——看着很是像 CSS，其實它是一個 JavaScript 對象。CSS 屬性名           能夠用駝峯式（camelCase）或短橫分隔命名（kebab-case）

        數組語法
        v-bind:style 的數組語法能夠將多個樣式對象應用到一個元素上

        自動添加前綴
        當 v-bind:style 使用須要廠商前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前             綴。
        瀏覽器廠商之前就一直在實施CSS3，但它還未成爲真正的標準。爲此，當一些CSS3樣式語法還存在           波動時，它們提供針對流星器的前綴。如今主要流行的瀏覽器內核主要有：

        Trident內核：主要表明爲IE瀏覽器
        Gecko內核：主要表明爲Firefox
        Presto內核：主要表明爲Opera
        Webkit內核：產要表明爲Chrome和Safari

        而這些不一樣內核的瀏覽器，CSS3屬性（部分須要添加前綴的屬性）對應須要添加不一樣的前綴，也將其         稱之爲瀏覽器的私有前綴，添加上私有前綴以後的CSS3屬性能夠說是對應瀏覽器的私有屬性：

        Trident內核：前綴爲-ms
        Gecko內核：前綴爲-moz
        Presto內核：前綴爲-o
        Webkit內核：前綴爲-webkit

        -moz表明firefox瀏覽器私有屬性 
        -ms表明IE瀏覽器私有屬性  
        -webkit表明chrome、safari私有屬性

條件渲染

    v-if
    在 Vue.js，咱們使用 v-if 指令實現功能，也能夠用 v-else 添加一個 「else」 塊

    template v-if
    由於 v-if 是一個指令，須要將它添加到一個元素上。可是若是咱們想切換多個元素呢？此時咱們能夠把一     個 <template> 元素當作包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。

    v-show
    另外一個根據條件展現元素的選項是 v-show 指令。用法大致上同樣。不一樣的是有 v-show 的元素會始終渲       染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。
    注意 v-show 不支持 <template> 語法。

    v-else
    能夠用 v-else 指令給 v-if 或 v-show 添加一個 「else 塊」，v-else 元素必須當即跟在 v-if 或 v-show 元素的       後面——不然它不能被識別。

        組件警告
        將 v-show 用在組件上時，由於指令的優先級 v-else 會出現問題。所以不要這樣作，用另外一個 v-show           替換 v-else，這樣就能夠達到 v-if 的效果。

    v-if vs. v-show
    在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，由於 v-if 之中的模板也可能包括數據綁定或子組件。     v-if 是真實的條件渲染，由於它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組       件。
    v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——在條件第一次變爲真時纔開始局部編譯      （編譯會被緩存起來）。
    相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
    通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較     好，若是在運行時條件不大可能改變 v-if 較好。

列表渲染

    v-for
    可使用 v-for 指令基於一個數組渲染一個列表。這個指令使用特殊的語法，形式爲 item in items，items     是數據數組，item 是當前數組元素的別名，在 v-for 塊內咱們能徹底訪問父組件做用域內的屬性，另有         一個特殊變量 $index，它是當前數組元素的索引，另外，你能夠爲索引指定一個別名（若是 v-for 用於一     個對象，則能夠爲對象的鍵指定一個別名），從 1.0.17 開始可使用 of 分隔符，更接近 JavaScript 遍歷     器語法。

    template v-for
    相似於 template v-if，也能夠將 v-for 用在 <template> 標籤上，以渲染一個包含多個元素的塊。

    數組變更檢測

        變異方法
        Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有：

        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
        你能夠打開瀏覽器的控制檯，用這些方法修改上例的 items 數組。例如：example1.items.push({         message: 'Baz' })。

        替換數組
        變異方法，如名字所示，修改了原始數組。相比之下，也有非變異方法，如 filter(), concat() 和                     slice()，不會修改原始數組而是返回一個新數組。在使用非變異方法時，能夠直接用新數組替換舊數組
        可能你以爲這將致使 Vue.js 棄用已有 DOM 並從新渲染整個列表——幸運的是並不是如此。 Vue.js 實現           了一些啓發算法，以最大化複用 DOM 元素，於是用另外一個數組替換數組是一個很是高效的操做。

        track-by
        有時須要用全新對象（例如經過 API 調用建立的對象）替換數組。由於 v-for 默認經過數據對象的特徵         來決定對已有做用域和 DOM 元素的複用程度，這可能致使從新渲染整個列表。可是，若是每一個對象都         有一個惟一 ID 的屬性，即可以使用 track-by 特性給 Vue.js 一個提示，Vue.js 於是能儘量地複用已有         實例。

        track-by $index
        若是沒有惟一的鍵供追蹤，可使用 track-by="$index"，它強制讓 v-for 進入原位更新模式：片段不會         被移動，而是簡單地以對應索引的新值刷新。這種模式也能處理數據數組中重複的值。
        這讓數據替換很是高效，可是也會付出必定的代價。由於這時 DOM 節點再也不映射數組元素順序的改             變，不能同步臨時狀態（好比 <input> 元素的值）以及組件的私有狀態。所以，若是 v-for 塊包含                 <input> 元素或子組件，要當心使用 track-by="$index"

        問題
        由於 JavaScript 的限制，Vue.js 不能檢測到下面數組變化
        1.直接用索引設置元素，如 vm.items[0] = {}。
        2.修改數據的長度，如 vm.items.length = 0。
        爲了解決問題 (1)，Vue.js 擴展了觀察數組，爲它添加了一個 $set() 方法
        至於問題 (2)，只需用一個空數組替換 items。
        除了 $set()， Vue.js 也爲觀察數組添加了 $remove() 方法，用於從目標數組中查找並刪除元素，在內           部它調用 splice() 。
        使用 Object.freeze()
        在遍歷一個數組時，若是數組元素是對象而且對象用 Object.freeze() 凍結，你須要明確指定 track-by。         在這種狀況下若是 Vue.js 不能自動追蹤對象，將給出一條警告。

    對象 v-for
    也可使用 v-for 遍歷對象。除了 $index 以外，做用域內還能夠訪問另一個特殊變量 $key。
    也能夠給對象的鍵提供一個別名。
    在遍歷對象時，是按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下是一       致的。

    值域 v-for
    v-for 也能夠接收一個整數，此時它將重複模板數次。

顯示過濾/排序的結果 有時咱們想顯示過濾/排序過的數組，同時不實際修改或重置原始數據。有兩個辦法： 1.建立一個計算屬性，返回過濾/排序過的數組。 2.使用內置的過濾器 filterBy 和 orderBy。 計算屬性有更好的控制力，也更靈活，由於它是全功能 JavaScript。可是一般過濾器更方便，詳細見API。