Vuejs——（3）计算属性，样式和类绑定
先上总结：
（⼗九）标签和API总结（2）
vm指new Vue获取的实例
①当dom标签⾥的值和data⾥的值绑定后，更改data对应的值可以实时更新标签⾥的值；
但后续添加的值是⽆效的（绑定失败）。
②将可以将对象直接作为data的⼀个属性，是有效的（因为对象按值传递）；
所以该属性和该对象是全等的；
③vm的接⼝有：
vm.$data是vm的data属性；
vm.$el是el属性指向的dom结点；
vm.$watch是监视属性变化（⽐如data⾥的值）（参照（九））
④vue实例的声明周期，有⼏个关键函数：
created：事件绑定结束后，函数直接在声明vue实例的时候，作为vue实例中的⼀个属性，下同。
vm.$mount：挂载dom结点；
beforeCompile：加载模板之前；
compiled：加载模板之后；
ready：完成之后（我猜的）；
beforeDestroy：摧毁之前；
destroyed：摧毁之后；
⑤vm.$mount(挂载的id或者类名)
在new Vue实例的时候，不加el，则表⽰不挂载只⽣成，⽣成之后，可以通过该⽅法来⼿动挂载到某个地⽅，如果符合条件的有多个，则挂载到第⼀个地⽅；
⑥v-for遍历数组、对象，可以创建多个标签；⽐如⽤于创建表格；
⑦转义：{{}} 两个⼤括号，不会转义值的html标签；
{{{}}}  三个⼤括号，会将值的html标签转义，即变为html⽂本；
不能在值内再放⼊绑定数据（除⾮使⽤partials，但我还不会）；
⑧在插值的⼤括号内，可以放⼊表达式（不能放函数）；
⑨在插值的⼤括号内，加⼊管道符|，可以使⽤过滤器；
capitalize就是将⾸字母⼤写的过滤器；
过滤器只能放在表达式最后，不能成为表达式的⼀部分；
过滤器可以加参数；
过滤器可以⾃定义（但⽬前还不知道⾃定义的⽅法）；
⑩指令：
v-if=”变量名”          当某个值为true时存在；
v-bind：属性名=”变量名”            将等号后的变量名（指向vm的data属性⾥的同名属性），和该标签的html属性绑定在⼀起。
v-on：事件类型=”函数名”            触发事件类型时，执⾏methods⾥的函数；
v-on的缩写是@；v-bind的缩写是:（冒号）；
计算属性computed
这⾥的属性，可以当做data属性⾥的使⽤；优点是data⾥的数值变更时，这⾥会跟着⼀起改变；
可以使⽤更复杂的表达式（插值⾥只能使⽤简单的表达式）；
计算属性的setter和getter
默认是getter（对象的get属性），即当某个值改变时，触发回调函数（或get⽅法）；
当计算属性改变时，需要改变某些值（⽐如改变10个值，在其他地⽅写监听这个值就不好），那么则需要设置setter（对象的set属性），即当计算属性改变时，触发set⽅法；
监视属性vm.$watch(被监视的属性, 回调函数)
监视的是data属性；
回调函数的第⼀个参数是改变后的值，第⼆个参数是改变前的值；
属性的值改变时触发；
class绑定：
⽤v-bind:class
class使⽤对象形式，key为class类名，值表⽰是否显⽰这个class类；
可以直接将⼀个object对象放置在v-bind:class的值中，并将这个对象放置在data属性中，这样设置这个object对象的属性即可；
class的数组写法：数组⾥的成员为变量名，如果该变量不是object对象，则变量的值为类名；如果是对象时，对象的key是类名，值表⽰是否显⽰；
style绑定：
⽤v-bind:style
形式是⼀个对象，对象的key是样式名（如fontSize，注意样式名需要采⽤驼峰式⽽不是css式），值是样式的值；
可以直接将对象名放在v-bind:style的等式右边；
对象的值改变，将实时影响内联样式；
对于某些样式，可以针对浏览器加前缀（但某些不能对所有浏览器兼容）；
（⼗七）计算属性
①简单来说，假如data⾥⾯有属性a=1，然后你需要⼀个变量跟着a变化，例如b=a+1，那么就需要⽤到计算属性，Vue实例的computed 属性中，设置b为其属性，其表现为⼀个函数，返回值是b的值。
具体见代码：
<div id="app">
<table>
<tr>
<td>a</td>
<td>b=a+1</td>
</tr>
<tr>
<td>{{a}}</td>
<td>{{b}}</td>
</tr>
</table>
<button @click="add">a = a + 1</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function () {
this.a++;
}
},
computed: {
b: function () {
return this.a + 1;
}
}
})
</script>
效果：
初始a的值为1，b的值为2。
点击按钮，会让a的值增加1（注意，没有动b的值）。
但由于b和a是相关的（这⾥的this.a指的是a），因此，在a的值改变后，b的值也会跟着改变。
之所以这么做，回想⼀下，Vuejs禁⽌在变量绑定时输⼊⼀个函数，因此如果表达式⽐较复杂，那么就必须这么做，好处是可以防⽌模板太重（放很⼤的表达式在模板中）。
②vm.$watch(“属性”, function(newVal, oldVal){
//回调函数的具体内容
})
⽤于观察Vue实例上的数据变动；
【1】可以监视data属性中的某个属性（⽐如上⾯的a）；
【2】可以监视computed属性中，某个属性的值，例如上⾯的b；⽀持字符串的变化，如代码：
var vm = new Vue({
el: "#app",
data: {
a: 1
},
methods: {
add: function () {
this.a++;
}
},
computed: {
b: function () {
var str = "";
for (var i = 0; i < this.a; i++) {
str += String(i);
}
return str;
}
}
})
vm.$watch("b", function (val) {
alert(val);
})
这⾥的监视b是有效的。
但假如b返回的是⼀个固定的字符串，或者值，那么则不会触发（因为值没有改变）
【3】另外，在$watch的回调函数中，第⼀个参数val的值是新值（即变动后的值），他也可以有第⼆个参数，⽽第⼆个参数的值是旧值（即变动前的值）。
【4】watch的回调函数⾥，this指向的是vm这个对象；
③setter
计算属性默认是getter（写作get），可以这么理解，他监视某个值，那个值变化时会触发这个回调函数；
但也可以设置为setter（写作set），setter和getter的区别在于，setter是当computed这个属性的值变化时所触发的。例如：
<div id="app">
<input v-model="firstName"/>
<input v-model="lastName"/>
<input v-model="fullName"/>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]js合并两个数组
}
}
}
})
</script>
我们修改前两个输⼊框的值，将影响第三个输⼊框的值；
我们也可以修改第三个输⼊框的值，来影响前两个输⼊框的值。
另外，由于这种绑定形式，我们将⽆法让fullName的名字是三个单词，原因在于，set触发了lastName的改变（获取最后⼀个单词），⽽lastName的改变⼜会触发getter（将firstName和lastName拼接起来），因此只会保留第⼀个单词和最后⼀个单词。
（⼗⼋）Class和Style绑定

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。