vue.js权威指南读书笔记（第二章）

Posted 2020-08-16

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