1、watch监听
方法：
action(nv, ov){
this.msg = nv
}
监听的几种方法
name: function(nv, ov){
this.msg = nv
}
name(nv, ov){
this.msg = nv
}
'name'(nv, ov){
this.msg = nv
}
'name': 'action'
obj: {
handler(nv, ov){
this.msg = nv
},
deep: true // 深度监听，值为false时，对象中的属性值变化，不会执行handler方法
}
2、计算属性
在 vue 模板里面使用表达式是非常便利的，但是设计他们的初衷是用来简单运算的。在实际的开发过程中在模板里放入过多的表达式会让项目的可维护性大大降低。
计算属性中使用data中的数据一旦有变化，计算属性就会更新
total( ){
if(this.shop.count > 5){
return this.shop.price * this.shop.count
}else{
return this.shop.price * this.shop.count + 5
}
}
计算属性传参数
num( ){
return function(i){
return this.num.toFixed(i)
}
}
3、$set、$delete
{{obj.age}}
obj: {id:1, name: 'xx'}
add(){
this.obj.age = 18 // 不会触发视图更新
this.$set(this.obj, 'age', 18) // 会触发视图更新
delete this.obj.name // 不会触发视图更新
this.$delete(this.obj, 'name') // 会触发视图更新
}
4、过滤器
文本格式化，可以在表达式{{ }}和v-bind中使用
{{3.1415926 | number}}
{{3.1415926 | num(2)}}
filters: {
number(data){
return data.toFixed(2)
},
num(data,n){
return data.toFixed(n)
}
}
5、全局过滤器
先创建一个filters文件夹，再创建一个index.js文件
index.js文件
export function filterSex(data){
return data == 'man' ? '男' : '女'
}
export function filterState(data){
return data == 1 ? '已购买' : '未购买'
}
main.js文件
import * as filters from './filters/index'
Object.keys(filters).forEach(key => {
Vue.filter(key,filters[key])
})
6、transition动画
第一种
<transition name='fade'>
<p>显示与隐藏</p>
</transition>
.fade-enter{ opacity:0 }
.fade-enter-active{ transition: opacity 1s ease}
.fade-enter-to{ opacity:1 }
.fade-leave{ opacity: 1 }
.fade-leave-active{ transition: opacity 1s ease}
.fade-leave-to{ opacity:0 }
第二种
<transition enter-active-class='' leave-active-class=''>
<p>动画</p>
</transition>
计算属性和watch监听的区别
watch监听：监听具体的属性或对象，当监听的对象发生变化，执行对应的函数
computer计算属性：函数中所用到data中的数据发生变化，都会执行对应函数
计算属性和方法的区别
计算属性有缓存，多次用到同一个计算属性，计算属性只会执行一次
方法没有缓存，多次用到同一个方法，方法会执行多次