Vue.js笔记-数据绑定

       Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板。

插值

文本

      使用Mustache语法（双大括号）进行文本插值

       Mustache标签会被相应数据对象的msg属性的值替换，每当这个属性变化时它也会更新。也可以只处理单次插值，今后的数据变化就不会再引起插值更新了。

<span>This will never change: {{* msg }}</span>

原始的HTML

        为了输出真的HTML字符串，需要用三Mustache标签。

<div>{{{ raw_html }}}</div>

HTML特性

       Mustache标签也可以用在HTML特性内：

<div id="item-{{ id }}"></div>

       在 Vue.js 指令和特殊特性内不能用插值。

绑定表达式

        放在Mustache标签内的文本称为绑定表达式，一段绑定表达式由一个简单的JavaScript表达式和一个可选的一个或多个过滤器构成。

JavaScript表达式

       只绑定到简单的属性键，支持全功能的JavaScript表达式，一个限制是每个绑定只能包含单个表达式，不能绑定语句和流程控制。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

过滤器

        在表达式后添加可选的过滤器Filter，以管道符指示。

        内置过滤器：

       filterBy过滤器 : 过滤器的值必须是一个数组，filterBy + 过滤条件。过滤条件是：‘string || function’ + in ‘optionKeyName’

       orderBy过滤器 : 过滤器的值必须是一个数组，orderBy + 过滤条件。过滤条件是：‘string || array ||function’ + ‘order ≥ 0 为升序 || order < 0 为降序’

       接下来，我们可以看下第二个例子：我们有一个商品数组products，我们希望遍历这个数组，并把他们打印成一张清单，这个用v-for很容易实现。

<li v-for="product in products">
      {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

       capitalize过滤器 : 将输入的字符串首字母转换成大写字母的过滤器。currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号（默认$）和保留的小数位（默认2）。

       利用上面的两个过滤器，能够很好的把一个json数组的商品清单格式化成通熟易懂的商品价格清单。

       如果只想要电器类商品，可以在v-for上加过滤条件：

<li v-for="product in products | filterBy 'electronics' in 'category' ">
      {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

       上面的例子，就是用filterBy 过滤在 'category'中含有'electronics' 关键字的列表，返回的列表就是只含有 'electronics' 关键字的列表。

如果想要多个搜索条件：

<li v-for="product in products | filterBy 'electronics' in 'category'  'name' ">
      {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

       上面的例子，就是用filterBy 过滤在 'category' 和 'name' 中含有'electronics' 关键字的列表。

最后我们还需要将这个列表用字母进行排序。我们可以在 filterBy 过滤器的基础上，链式调用orderBy 过滤器。

<ul>
       <li v-for="product in products
                   | filterBy 'electronics' in 'category'
                   | orderBy  'name' "
       >
            {{ product.name | capitalize }} - {{ product.price | currency }}
      </li>
</ul>

       orderBy 的排序方式默认是升序，如果想要降序，只需要加一个小于0的参数：

<li v-for="product in products
           | filterBy 'electronics' in 'category'
           | orderBy  'name'  -1 "
>

        自定义过滤器：

       使用Vue.filter()构造器，需要过滤器ID和过滤器函数两个参数。

       过滤器可以串联：{{ message | filterA | filterB }}

       过滤器也可以接受参数：{{ message | filterA 'arg1' arg2 }}

例子：输出打了五折之后的所有商品的清单列表

 例子2：任意折扣（Vue实例里构造我们的过滤器）

 指令

       指令是特殊的带有前缀v-的特性，指令的值限定为绑定表达式，指令的职责是当其表达式的值改变时把某些特殊的行为应用到DOM上。

<p v-if="greeting">Hello!</p>//v-if指令将根据表达式greeting值的真假 删除/插入<p>元素

       参数：有些指令可以在其名称后面带一个参数，中间放一个冒号隔开

<a v-on:click="doSomething">

        修饰符：以半角句号.开始的特殊后缀，用于表示指令应当以特殊方式绑定，例如

<a v-bind:href.literal="/a/b/c"></a>//.literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式

缩写

       Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写。

v-bind 缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on 缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>