进修笔记：
前端开辟文档
盘算属性
一切的盘算属性都以函数的情势写在Vue实例中的computed选项内，终究返回盘算后的结果。
盘算属性的用法
在一个盘算属性中能够完成种种庞杂的逻辑，包括运算、函数挪用等，只需终究返回一个结果即可。
盘算属性还能够依靠多个Vue实例的数据，只需个中任一数据变化，盘算属性就会从新实行，视图也会更新。
每个盘算属性都包括一个getter和一个setter。
绝大多数情况下，只会用默许的getter要领读取一个盘算属性，在营业中很少用到setter，所以在声明一个盘算属性时，能够直接运用默许的写法，不势必getter和setter都声明。
盘算属性除了简朴的文本插值外，还常经常使用于动态地设置元素的款式称号class和内联款式style。当运用组件时，盘算属性也常经常使用来动态通报props。
盘算属性另有两个很有用的小技能轻易被疏忽：
- 一是盘算属性能够依靠其他盘算属性；
- 二是盘算属性不仅能够依靠当前Vue实例的数据，还能够依靠其他实例的数据。
<div id="app1"></div>
<div id="app2">
{{reverseText}}
</div>
var app1 = new Vue({
el: "#app1",
data: {
text: '123,456'
},
});
var app2 = new Vue({
el: "#app2",
computed: {
reverseText: function () {
//这里依靠的是实例app1的数据text
return app1.text.split(',').reverse().join(',');
}
}
});盘算属性缓存
没有运用盘算属性，在methods中定义了一个要领完成了雷同的结果，以至该要领还能够接收参数，运用起来更天真。
运用盘算属性的缘由在于它的依靠缓存。一个盘算属性所依靠的数据发生变化时，它才会从新取值，在上例中只需text值不转变，盘算属性也就不更新。然则methods则差别，只需从新衬着，它就会被挪用，因而函数也会被实行。
运用盘算属性照样methods取决于你是不是须要缓存，当遍历大数组和做大量盘算时，应当运用盘算属性，除非你不愿望获得缓存。
v-bind及class与style绑定
v-bind的重要用法是动态更新HTML元素上的属性。
在数据绑定中，v-bind最常见的两个运用就是元素的款式称号class和内联款式style的动态绑定。
绑定class的几种体式格局
对象语法
给v-bind:class设置一个对象，能够动态地切换class：
<div id="app">
<div :class="{'active':'isActive'}">测试笔墨</div>
</div>
new Vue({
el: "#app",
data: {
isActive: true
},
});
对象中也能够传入多个属性，动态切换class。别的，:class能够与平常class共存。
<div class="static" :class="{'active':'isActive','error':isError}">测试笔墨</div>
data: {
isActive: true,
isError: false
}
当:class的表达式太长或逻辑庞杂时，还能够绑定一个盘算属性。当前提多于两个时，都能够运用data或computed。
除了盘算属性，也能够直接绑定一个Object范例的数据，或许运用相似盘算属性的methods。
数组语法
当须要运用多个class时，能够运用数组语法，给:class绑定一个数组，运用一个class列表：
<div id="app">
<div :class="[activeCls,errorCls]">测试笔墨</div>
</div>
new Vue({
el: "#app",
data: {
activeCls: 'active',
errorCls: 'error'
}
});
// 结果
<div class="active error">测试笔墨</div>
也能够运用三元表达式来依据前提切换class：
<div :class="[isActive ? activeCls : '',errorCls]">测试笔墨</div>
new Vue({
el: "#app",
data: {
isActive: true,
activeCls: 'active',
errorCls: 'error'
}
});
当class有多个前提时，能够在数组语法中运用对象语法：
<div id="app">
<div :class="[{'active':isActive},errorCls]">测试笔墨</div>
</div>
运用盘算属性给元素动态设置类名，在营业中常经常使用到，尤其是在写复用的组件时，所以在开辟过程当中，假如表达式较长或逻辑庞杂，应当尽量地优先运用盘算属性。
在组件中运用
假如直接在自定义组件上运用class或:class，款式规则会直接运用到这个组件的根元素上。
Vue.component('my-component', {
template: `<p class="article">一些文本</p>`
});
然后在挪用这个组件时，运用对象语法或数组语法给组件绑定class：
<div id="app">
<my-component :class="{'active':isActive}"></my-component>
</div>
这类用法仅适用于自定义组件的最外层是一个根元素，否则会无效。当不满足这类前提或须要给详细的子元素设置类名时，应当运用组件的props来通报。
绑定内联款式
运用:style能够给元素绑定内联款式，要领与:class相似，也有对象语法和数组语法，很像直接在元素上写CSS。
<div id="app">
<div :style="{'color':color, 'fontSize':fontSize+'px'}">文本</div>
</div>
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 14
}
});
平常把款式写在data或computed中：
<div id="app">
<div :style="styles">文本</div>
</div>
new Vue({
el: "#app",
data: {
styles: {
color: 'red',
fontSize: 16 + 'px'
}
}
});
在现实营业中，:style的数组语法并不经常使用，能够写在一个对象内里，而较为经常使用的是盘算属性。
别的，运用:style时，Vue.js会自动给特别的CSS属性称号增添前缀，比方transform。
