Vue.js基本规则提炼总结及计算属性学习

Vue.js基本须知:

1)以“{{}}”格式 “Mustache” 语法（双大括号）来绑定表达式输出文本值;

2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容,输出字符串解析后的html内容;

3)绑定表达式由一个简单的javascript表达式与一个或多个过滤器组成,格式如下:{{express|filterOne|filterTwo}}(过滤器可省略);

4)指令为"v-"格式的绑定表达式,其功能是当表达式的值改变时把某些特殊的行为应用到 DOM 上;

5)某些指令带有参数以" v-指令名:参数='绑定表达式' "的格式书写,其作用是将元素的属性以参数的形式与绑定表达式的值连接，表达式的值变了，相应的元素属性的值也就变了;

6)带参数的指定如"v-bind:参数"与"v-on:参数"可以分别简写为":参数"与"@:参数";

计算属性computed,当绑定中含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理，举例如下:

<div id="box">
{{a}}{{b,c}}
<p>{{d}}</p>
</div>

<script>
new Vue(
{
el:"#box",
data:{     //绑定内只有一个表达式时,会在该绑定位置直接输出表达式内容
a:"zhuxingyu",
b:"loujiaxing",
d:""
},
computed:{  //当绑定内含有1个以上的表达式时,多余表达式要放在options的计算属性computed里进行处理
c:function(){
this.d=this.a+this.b;
}
}
}
);

　　$watcher用来指定监测的绑定表达式的值，其是computed也是实时更新的，能用computed的地方尽量用computed,因为它做得更简洁。例子如下：

<div id="demo">{{fullName}}</div>
<script>
var vm = new Vue({
el:"#demo",
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})

vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
});
setTimeout(function(){vm.firstName="Hello"},3000); //指定受监测的firstName变化时，就会立即触发相应函数

　　计算setter用来实时更新设置绑定表达式的值，提供一个默认的参数为计算属性的值，举例如下：

<div id="demo">
<p>{{firstName}}</p>
<p>{{lastName}}</p>
<p>{{fullName}}</p>
</div>
<script>
var vm=new Vue(
{
el:"#demo",
data:{
firstName:"Zhu",
lastName:"xing yu"
},
computed:{
fullName:{
//默认为get,
get:function(){
return this.firstName+" "+this.lastName;
},
//其实可以setter
set:function(newName){  //newName为fullName,实时更新
var names=newName.split(" ");
this.firstName=names[0]; //在set中设置绑定表达式的值获取规则，并且实时更新
this.lastName=names[names.length-1];
}

}
}

});
vm.fullName="Lou jia xing";//当fullName变化时触发set函数