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表达式，一个限制是每个绑定只能包含单个表达式，不能绑定语句和流程控制。

<
4000
ol class="linenums" style="margin:0px;padding-left:30px !important;color:rgb(30,52,123);">

{{ 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>