Vue中的动画需要配合css3来实现
1.单个元素动画
在Vue中触发一个元素的动画效果，必须使用v-if或者v-show来切换
Vue单个元素动画，只能包裹一个标签，使用transition标签，取一个name值
在style中设置动画效果，transition中设置的name值为css3中的选择器前缀
.fade-enter-active,.fade-leave-active { //fade为transition中的name值
transition: opacity 3s; //动画时间为3秒，执行动画为opacity透明度变化
opacity: 1;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
2.分组元素动画
分组元素动画的触发时机是：动态的添加或者删除一个元素
分组元素动画使用标签 transition-group 包裹
name 作为css3 class 的前缀
使用 tag 作为解析后主标签包裹，原主标签可以删除，
原标签的CSS样式可以添加在该标签中
二.生命周期钩子函数
生命周期函数就一个自执行的回调函数
created() -- 当前 Vue 实例被 创建的时候触发的钩子函数
mounted() -- Vue中的代码完成了页面的渲染，挂载到了页面上
updated() -- 只要是 data 里面的数据发生了变化，同时更新了页面，那么 这个 updated 就会被触发
destroyed() -- 页面关闭的时候进行触发，一般情况下我们在这里清除计时器等可能造成内存泄漏的变量
其他生命周期函数只会触发一次，data里面的数据多次改变更新页面，updated就会多次触发，频繁的触发会有性能上的缺陷
