【vue.js權威指南】讀書筆記（第二章）

標籤：過濾器   rip   data   pipe   bsp   更新   back   空格   括弧   

【第2章：資料繫結】

1. 何為資料繫結？答曰：資料繫結就是將資料和視圖相關聯，當資料發生變化的時候，可以自動的來更新視圖。
2. 資料繫結的文法主要分為以下幾個部分：
   1. 文本插值：文本插值可以說是最基本的形式了。在vue.js中，使用了Mustache的文法，類似於Angular中的{{}}雙大括弧的形式。代碼如下

      <span>Text:{{text}}</span>

      當然，如果你只想渲染一次資料，而對以後的資料不再關心的話，你也可以使用下面的文法：

      <span>Text:{{*text}}</span>

      如果你的值是html片段的話，你也可以使用三個大括弧的形式來進行綁定，如下所示：

      <span>Text:{{{logo}}}</span>logo:‘<span>ABCD</span>‘

      此外，雙大括弧標籤還可以放在html標籤的內部，也是會被解析出來。如下：

      <span data-id="{{id}}"></span>

      總之，vue.js提供了一系列的文本渲染的方式，足夠我們應對日常的模版渲染情況。但是必須注意的是，vue的指令和自身特性內是不可以插值的，如果用錯了地方，vue.js會發出警告。

   2. 運算式：Mustache標籤可以接受運算式形式的值，運算式可以由JavaScript運算式和過濾器構成。當然，過濾器可以沒有，也可以有多個。
      • 在這裡，我們必須瞭解運算式的含義，一定要區分運算式和語句。所謂運算式，就是各種數值，變數，運算子的綜合體。簡單的運算式可以是常量或者變數名稱，而運算式的值則是它的運算結果。代碼如下：

        <!--js運算式-->{{center/100}}{{true:1:0}}{{example.split(",")}}<!--無效的樣本。因為它們都是語句-->{{var logo = "ABCD"}}{{if(true) return "EFGH"}} //條件控制語句是不支援的，可以使用三元式

         

      • vue.js中的過濾器類似於pipe,即管道的意思。可以將過濾器添加到運算式後面，代碼如下：

        {{example | toUpperCase}}{{example | filterA | filterB}}

        不僅如此，過濾器還支援傳入參數，代碼如下：

        {{example | filter a b}}//這裡的a和b都是參數，使用空格來分隔開

        vue.js中內建的過濾器遠不止這些，想要瞭解更多？我會加快看書，加快更新，大家喝杯茶，稍等片刻。^_^

   3. 指令：就像Angular中的ng-*指令，vue.js中也有自己的指令，只不過是v-*而已，怎麼樣？是不是很簡單？有Angular基礎的同學，掌握起來都是分分鐘的事。指令的值限定為綁定運算式。而指令的作用正是當運算式的值發生變化的時候，將這個變化也反映到DOM上。
      • 那麼問題來了，啥叫綁定運算式？書中所說，綁定運算式，就是JavaScript運算式和過濾器。說白了，就是加了過濾器的運算式，其實質和運算式是一個概念。代碼如下：

        <div v-if="show"></div>

        這段代碼的意思就是：當show為true的時候，展示這個div；當show為false的時候，不展示這個div。這也印證了上面所說的指令的作用，就是根據它的值，來改變DOM。

      • 此外，在指令和綁定運算式中間，我們還可以插入一個參數，這個參數和指令之間，使用:來進行分隔。如v-bind指令，代碼如下：

        <a v-bind:href = "url"></a><div v-bind:click="action"></div>

         

   4. 分隔字元：vue.js中的資料繫結的文法被設計為可配置的。如果大家不習慣Mustache的雙大括弧文法{{}}，完全可以自己設定。
      • 我們可以在vue.config中配置綁定的文法。vue.config是一個對象，包含了vue.js的所有全域的配置，可以在vue執行個體化之前來修改其中的屬性。分隔字元在vue.config中的源碼定義如下：

        let delimiters = [‘{{‘,‘}}‘]let unsafeDelimiters = [‘{{{‘,‘}}}‘]

        我們可以通過配置vue.config.delimiters的值來改變預設的文本插值的分隔字元，如下：

        Vue.config.delimiters = [‘<%‘,‘%>‘]

        這樣我們的文本插值文法就不再是雙大括弧文法，而是<%example%>這樣的文法了。html插值的分隔字元與此類似。

         

   5. 第二章：資料繫結就先總結到這裡，有什麼錯誤，還請大家在評論裡指出，我會第一時間更正。3Q^_^　　

【vue.js權威指南】讀書筆記（第二章）