Vue.js經常使用開發知識簡要入門（二）

v-pre 指令

Vue.js 的指令是帶有前綴 v- 的特殊 HTML 屬性，其中的v-pre 指令用於指示 Vue 編譯器跳過含有該指令的元素及其子元素，該指令主要有以下兩個用途：

• 顯示原始插值標籤

• 跳過大量沒有指令的節點以下降編譯時間

編寫較複雜的 Vue.js 模板時能夠適當使用 v-pre 指令，提高編譯效率。

數據綁定

插值

使用Mustache語法：

• {{ msg }}

• {{{ HTMLFragment }}}
  插值類型：

• 文本

• 原始HTML

• HTML屬性

指令

帶有前綴 v- 的特殊屬性v-if、v-text、v-html、v-bind、v-on....做用就是把某些特殊的行爲應用到DOM上

v-bind和v-on的縮寫形式
v-bind和v-on都必須帶有參數纔有意義

• v-bind:src => :src

• v-on:click => @click

綁定表達式

• 支持全功能的JavaScript表達式

• 表達式將在其所在Vue實例的做用域內進行計算

• 不支持多於一個JavaScript表達式

• 不支持語句及流程控制

雙大括號插值和三大括號插值的區別

<!-- 插值 -->
{{ message }}
{{{ htmlSegment }}}
<img src="{{ photoURL }}" />

Vue.js 的雙大括號插值和三大括號插值實際上是語法糖，雙大括號會被編譯成一個 textNode，而後使用 v-text 指令插入插值內容，而三大括號插值則被編譯成一個錨節點，而後使用 v-html 指令替換爲插值內容，上述過程比直接在 DOM 元素中使用 v-text 或 v-html 在性能上略有下降。

可使用 Vue.config 全局配置對象的 delimiters 和 unsafeDelimiters 屬性設置自定義的插值定界符，以免與其餘模板衝突，自定義插值定界符的語句應該寫在 Vue 實例化以前。

例如：

// ES6 模板字符串
Vue.config.delimiters = ['${', '}']
// 使之看起來更危險
Vue.config.unsafeDelimiters = ['{!!', '!!}']

Vue.js 使用了將插值內容直接賦值給 textNode 元素的 data 屬性或其餘元素的 textContent 屬性這樣一種精巧的方式進行 HTML 轉義，充分利用了瀏覽器自身的處理能力。這種方式也會產生無傷大雅的反作用，如對 textNode 元素的 data 屬性賦值實際上是調用了該屬性的 setter() 方法，實際生成的 DOM 元素的代碼與綁定表達式的值有可能不徹底相同。

Vue.js 2.0 中移除全部內置過濾器

Vue.js 2.0 版中移除全部內置過濾器，過濾器的使用方式也將發生改變，在新版本中，過濾器後使用括號而非空格來添加參數，並只可應用於插值方式的數據綁定，其餘使用過濾器的場景使用計算屬性替代，並根據須要選擇使用針對不一樣專業領域的第三方獨立庫，如針對日期時間處理使用 Moment.js，針對金融貨幣處理使用 Accounting.js，針對數組和對象處理使用 lodash。

修飾符

不一樣修飾符的做用互相獨立，所以串聯順序不會影響使用效果；self 修飾符的做用是阻止響應由其餘元素冒泡的事件，stop 修飾符用於中止冒泡，但這二者並不矛盾，能夠應用於同一元素綁定事件；大部分 HTML 屬性不區分大小寫，使用 camel 修飾符時，對應的屬性會被移除「-」號，但並不會呈現爲駝峯樣式，僅對相似於 SVG 元素的 viewBox 這樣的特殊屬性纔會改成駝峯樣式。

v-if和v-show

v-if 指令的切換性能消耗較高，當條件切換時，v-if 指令會根據條件建立或刪除 DOM 元素，在條件知足時編譯生成相應的元素並插入 DOM 結構，在條件不知足時將元素從 DOM 結構中刪除；當使用 <template> 元素包裝多個元素時，最終的渲染結果僅包含 <template> 元素的內容。

v-show 指令的初始性能消耗較高，v-show 指令會在初始編譯時建立元素並插入 DOM 結構，同時根據條件決定該元素是否顯示；v-show 指令不能使用 <template> 元素包裝多個元素；v-if 和 v-show 指令後面均可以緊跟一個 v-else 指令表示當條件不知足時渲染/顯示的內容。

• 多於一個元素的 v-if 須要使用 <template>

• v-show 不支持 <template>

• v-else 必須緊跟在 v-if/v-show 指令後面

• 組件條件下不能使用 <v-else>
  

過濾及排序

有兩種方法能夠實現列表內容的過濾和排序而不用修改原始數據：

• 使用內置的 limitBy、filterBy 和 orderBy 過濾器；

• 建立一個計算屬性，返回過濾/排序過的數組。

一般使用過濾器較爲方便，而計算屬性有更好的控制力，也更靈活。基於知足靈活性和複雜性的考慮，推薦使用專業的第三方類庫 lodash 建立計算屬性來實現列表內容的過濾和排序。

track-by的使用

使用 track-by 能夠增長複用，提高數據變更時的渲染性能；能夠 track-by 數組中的惟一鍵值來指示當鍵值一致時複用使用域和 DOM 元素；若數組沒有惟一鍵值，可使用 track-by="$index" 指示 v-for 指令進行原位更新模式，該模式也可用於處理數組中的重複值。

• 若是每一個對象都有一個惟一的ID屬性，設置track-by該屬性，能夠最大化複用DOM元素，避免從新渲染。

• 容許重複值，設置track-by $index

Vue.js 包裝的數組變異方法有：push、pop、shift、unshift、splice、sort、reverse，這些方法均對原始數組進行了修改。

類與樣式綁定的加強

爲了更靈活地進行類綁定，Vue.js 支持在數組語法中使用對象的混合綁定語法。對象語法支持駝峯式和短橫分隔式的 CSS 屬性名；對於須要廠商前綴的 CSS 屬性名，Vue.js 並非粗暴地直接添加，而是自動偵測後添加相應的前綴，若無必要，不會添加；採用數組語法時，會對綁定的數組使用 reduce 方法執行從前到後的對象 extend 操做（相似於 jQuery.extend 方法），其結果是若不一樣數組元素中有相同的 CSS 屬性，後出現元素中的 CSS 屬性值覆蓋結果中的 CSS 屬性值，所以是後出現的優先應用；對象語法經常結合返回對象的計算屬性使用，實現數據響應式的效果。

類綁定的對象語法

<span class="switch" :class="{switched: gender}" @click="gender = Math.abs(~-gender)">
      <span class="switch-item-1" data-pseudo-content="男"></span>
      <span class="switch-item-2" data-pseudo-content="女"></span>
</span>
var vm = new Vue({
    el: '#app',
    data: {
      gender: 0,
      off: true,
      nameType: 'Eng'
    }
})

類綁定的數組語法

<table class="table" :class="tableClasses">
    <caption>
      Table Caption
    </caption>
    <thead>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
    </tbody>
</table>
<script>
  var vm = new Vue({
    el: 'body',
    data: {
      tableClasses: ['table-striped', 'table-bordered']
    }
  })
</script>

樣式綁定的對象語法

<div class="container">
  <h1>
    樣式綁定對象與數組語法
  </h1>
  <div class="row">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
      顏色：紅，字體：30px
    </div>
    <hr>
    <div :style="styleObject">
      顏色同樣紅，字體也是30px
    </div>
    <hr>
    <div :style="[styleObjectA, styleObjectB]">
      顏色繼續紅，字體保持30px，而且增長了陰影
    </div>
  </div>
</div>
<script src="../js/vue.js"></script>
<script>
  var vm = new Vue({
    el: 'body',
    data: {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        'font-size': '30px'
      },
      styleObjectA: {
        color: 'red',
      },
      styleObjectB: {
        fontSize: '30px',
        boxShadow: '10px 10px 5px #888888'
      }
    }
  })
</script>

樣式綁定的數組語法

<div v-bind:style="[styleObjectA, styleObjectB]"></div>
styleObjectA: {
    color: red
},
styleObjectB: {
    fontSize: '30px',
    boxShadow: '10px 10px 5px #888'
}

---

++++++++++本人出售本人出售《Vue.js權威指南》，二手價20元！++++++++++