© 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 转到前端开发，也有一年的时间了。原来颇有些完成任务即可，不思进取的心态，正在渐渐扭转。
明天又要上班了，希望可以把这个系列的学习笔记，坚持写完。
王阳明老先生说的好啊，知行合一，既然道理都明白了，怎么会有做不到的道理呢？
与诸位小伙伴共勉！
网友评论