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

【第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^_^