© fengyu学习

端午节最后一天，坚持就是胜利。

开始 ** Vue.js ** 的第三次学习吧！

本次学习主要内容： ** 再探数据绑定 ** 、 ** computed属性 **

1、再探数据绑定

在 ** MVVM ** 框架中，** Data Bindings ** 可是重中之重，尽管我们已经了解了一些数据绑定的写法，但是还有一些需要补充的新知识！

1.1、Mustache语法

当我看到这个词的时候，我的内心是疑惑的，为什么将 ** 双大括号 ** 即 {{ content }} 这种语法称之为 ** Mustache ** 语法。

直到我查询了这个词的中文翻译，才豁然开朗

mustache 英[mə'stɑ:ʃ] 美[ˈmʌsˌtæʃ, məˈstæʃ]

n.胡子; 髭; 须状物; （哺乳动物的） 触须;

这个 ** 胡子 ** 这个形象的比喻， 把 ** 双大括号 ** 形容的十分恰当。

尽管纠结名词叫法并没有什么实际意义，但是也给学习过程平添了不少意外之喜！

闲话不多说，下面来聊聊 ** Mustache ** 在 ** Vue ** 中的使用

// 第一种场景：普通使用
<div id="vue_demo1">
    {{ content }}
</div>
<script>
    var demo1 = new Vue({
        el: '#vue_demo1',
        data: {
            content: 'Mustache普通使用'
        }
    })
</script>

---

// 第二种场景：显示数据中的html
<div id="vue_demo2">
    {{{ content }}}
</div>
<script>
    var demo2 = new Vue({
        el: '#vue_demo2',
        data: {
            content: '<p style="color:red">Mustache显示HTML</p>'
        }
    })
</script>

注意 ：显示数据中的html需要使用 ** 三个大括号 ** 、可能叫 ** Big-Mustache ** 语法吧！

PS :千万不要直接使用此语法显示用户提交的内容，可能会导致 XSS 攻击

---

// 第三种场景：在Mustache语法中，可以解析js
<div id="vue_demo3">
    {{ content + " Javascript表达式使用" }}
</div>
<script>
    var demo3 = new Vue({
        el: '#vue_demo3',
        data: {
            content: 'Mustache'
        }
    })
</script>

注意 : 仅能够使用 单个 表达式，不能用多条语句

---

还有一种方式，称为 绑定过滤器 ，由于之前没有接触过，所以单独起一个小标题，讲讲内置的过滤器！

1.2、内置过滤器 filter

学习中发现了3个 Vue 内置的过滤器

• uppercase 将数据中的字母均显示为大写字母

• lowercase 将数据中的字母均显示为小写字母

• capitalize 将数据中的首字母显示为大写字母

• 使用方法 {{ content | 过滤器名称 }}

下面是使用uppercase的栗子

<div id="vue_demo4">
    {{ content | uppercase}}
</div>
<script>
    var demo4 = new Vue({
        el: '#vue_demo4',
        data: {
            content: 'abcdefg'
        }
    })
</script>

效果为：

ABCDEFG

尽管在示例中，filter 并没有发挥很强的功效，但是我发现了他的 两 个优点

• filter 不会改变 Vue 对象中数据的值，他只会按照定义的规则，来显示数据。这一点非常符合 M 与 V 分离的思想。

• filter 是具备 复用性 的，这样可以大大的提升开发的效率，避免代码冗余。

---

可能有小伙伴会问，这说出花来的东西，能不能自定义啊！

答案是肯定的，不过我还没研究到自定义。

而且据最近看的一些资料，Vue2.0 会取消过滤器，我没有验证这个观点的真实性。所以自定义放到以后再聊！

1.3、指令

还记得 v-if、v-for、v-model么，原来这些以 v- 开头的属性，有一个专用名称 —— 指令(Directives)

而如 v-on:click 冒号后面的，被称为　指令　的 参数 ，** 参数 ** 是用来告诉 ** Vue ** 对象，该属性应该和 ** HTML ** 的什么属性进行绑定

举个栗子：

<div id="vue_demo5">
    <a v-bind:href="url">Vue指令</a>
</div>
<script>
    var demo5 = new Vue({
        el: '#vue_demo5',
        data: {
            url: 'http://cn.vuejs.org/guide/syntax.html#指令'
        }
    })
</script>

v-bind 指令的参数为 href ，即将 A 元素的 href 属性与 Vue 实例对象的 url 属性进行了关联

v-bind 指令后面，不仅可以跟着参数，还可以添加修饰符，还是刚才的栗子：

<div id="vue_demo6">
    <a v-bind:href.literal="http://cn.vuejs.org/guide/syntax.html#指令">Vue指令</a>
</div>
<script>
    var demo6 = new Vue({
        el: '#vue_demo6'
    })
</script>

当参数后，以 ** . + 修饰符 ** 的形式，添加了 literal 修饰符后，A 元素绑定的 href 属性值，就可以直接使用字符串了！

此外，v-bind 与 v-on 还有缩略写法

• v-bind 直接使用 : 连接参数即可,如<a :href.literal='http://cn.vuejs.org/guide/syntax.html#v-bind-缩写'></a>

• v-on 直接使用 @ 连接参数即可，如<a @click="helloVue">v-on缩写</a>，前提是 Vue 实例对象有 helloVue 这个方法

2、computed 属性

computed 顾名思义：计算。

当我了解这个属性的作用时，简直太佩服作者的奇思妙想了，如此牛X的一个属性，给我们带来了好大的便捷。

computed的作用：当数据中有参数的值，会随着多个其他参数的值变化时，使用computed属性，能快捷的实现两者的关联。

有点拗口，究竟是什么意思呢，举个计算总分的例子，您看完后，肯定和我一样，会觉得computed简直神了！

<!-- 计算总分 -->
<div id="vue_demo9">
    语文：<input type="text" v-model="Chinese" number>
    数学：<input type="text" v-model="math" number>
    英语：<input type="text" v-model="English" number>
    总分：<label>{{score}}</label>
</div>
<script>
    var demo9 = new Vue({
        el: '#vue_demo9',
        data:{
            Chinese: 100,
            math: 90,
            English: 80
        },
        computed: {
            score: function(){
                return this.Chinese + this.math + this.English;
            }
        }
    })
</script>

这个程序会产生如下效果，改变语文、数学或是英语中，任何一项的值，总分都会重新计算

语文：100 数学：100 英语：80 总分：280

先描述一下这个程序：

• 使用 v-model 完成了语文、数学、英语成绩与 Vue实例对象 的双向绑定

• 使用 computed 属性，将总分 score 作为一个计算属性，值等于 this.Chinese + this.math + this.English 三门成绩之和

• computed 方法在 Vue实例对象 生命周期的 beforeCompile 后，会触发一次，之后，当计算值中的属性改变时，会再次进行计算

再对比一下，如果使用原生js来实现这段代码，两者的工作量，真的天差地别。

---

我是根据，计算属性这一章，来学习的computed属性

文章中有提到 $watch 与 computed 的对比，大赞 computed 在多属性变更下，更为出彩的表现！

个人认为（没有看过源码，YY的），computed 和 $watch 在原理层面应该是相差无几的，主要是 computed 强调的是 计算，而 watch 强调的是 监控 。

我不知道是否 computed 属性只是一个 多层监控 的封装，这可以以后再研究。

现在需要掌握的是，如何将两者带给我们的便捷，应用在具体的场景中，达到 物尽其用、人尽其才 的目的

---

文章中还提到了setter方法，

由于暂时没有想到太好的例子，我就直接传送门了计算属性的set方法

不过从这，也可以发现为什么 Vue.js 只能支持 IE9+ 浏览器的其中一个原因了，使用了 set 和 get 访问器。

这两个方法是 ** ECMAScript 5 ** 的特性，^_!

3、结语

** Vue ** 的基础知识学习也有 1/3 了，这门 MVVM 框架语言，带给了我很多惊喜。

从 java web 转到前端开发，也有一年的时间了。原来颇有些完成任务即可，不思进取的心态，正在渐渐扭转。

明天又要上班了，希望可以把这个系列的学习笔记，坚持写完。

王阳明老先生说的好啊，知行合一，既然道理都明白了，怎么会有做不到的道理呢？

与诸位小伙伴共勉！