v-bind绑定属性
绑定值为对象
用v-bind绑定类名时，绑定值可以是一个对象，如：
- 绑定对象语法规则
<div :class="{'active':isActive}">呵呵呵呵</div>
当isActive为true绑定生效，为false绑定不生效。
绑定值为数组
用v-bind绑定类名时，绑定值可以是一个对象，如：
可以在数组中使用三元表达式，也可以在数组中嵌套对象。
v-bind绑定css样式
使用v-bind绑定css样式时要采用大括号包裹，样式名称如果是驼峰式可以不加引号，短横线分割式需要加单引号，样式的值也需要加单引号，否则会当做变量处理。采用变量的方式如下：
也可以使用对象的形式来绑定css样式
或者调用方法返回
-
方法：
-
调用：
也可以使用数组的形式来绑定css样式
计算属性 computed
- 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性
- 计算属性将被混入到组件实例中。所有getter和setter的this上下文自动地绑定为组件实例
计算属性的用法
- 选项：computed
- 类型：{[key:string]:Function|{get:Function,set:Function}}
计算属性的setter和getter
计算属性中的方法完整写法
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function(newValue) {
console.log(newValue);
const names = newValue.split(" ")
this.firstName = names[0]
this.lastName = names[1]
}
}
语法糖：
fullName() {
return this.firstName + " " + this.lastName;
}
当存在set方法时，可以在methods当中修改fullName计算属性
changeFirstName() {
this.fullName = 'Coder Why Why'
}
点击后调用set
watch侦听器
watch深度侦听
watch方法平时只能侦听元素本身，不能侦听元素内部定义的数据，如果需要达到这样的效果，可以使用深度侦听。
watch立即执行
- 在watch内定义的方法中添加
immediate:true使侦听器在页面渲染时立即执行
使用$watch
在vue的生命周期中可以使用$watch加入侦听器，第一个属性为需要侦听的元素，第二个属性是侦听方法，还可以以对象形式设置watch属性。
注意： this.$watch是有返回值的，可以通过调用它的返回值来取消侦听。
