本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
大家好，我是布布。vue基础知识重点已经讲完了模板语法、监听、组件、生命周期（欢迎移步专栏查看更多内容），今天来讲讲vue的几个API（官网太多API，我们先掌握以下几个吧）和动画。
数据相关API
Vue.set
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
使用方法： Vue.set(target, propertyName/index, value)
Vue.delete
删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。
使用方法： Vue.delete(target, propertyName/index)
事件相关API
vm.$on
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit
触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$emit('test', 'hi')
典型应用：事件总线
通过在Vue原型上添加一个Vue实例作为事件总线，实现组件间相互通信，而且不受组件间关系的影响
Vue.prototype.$bus = new Vue();
//这样做可以在任意组件中使用 this.$bus 访问到该Vue实例
vm.$once
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off
-
移除自定义事件监听器。
-
如果没有提供参数，则移除所有的事件监听器；
-
如果只提供了事件，则移除该事件所有的监听器；
-
如果同时提供了事件与回调，则只移除这个回调的监听器。
-
vm.$off() // 移除所有的事件监听器
vm.$off('test') // 移除该事件所有的监听器
vm.$off('test', callback) // 只移除这个回调的监听器
组件或元素引用
ref和vm.$refs
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件
注意：
ref是作为渲染结果被创建的，在初始渲染时不能访问它们，至少要在mounted时;$refs不是响应式的，不要试图用它在模板中做数据绑定; 当v-for用于元素或组件时，引用信息将是包含 DOM 节点或组件实例的数组。
过度&动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
css过度动画
transition组件会为嵌套元素自动添加class，可用于做css过度动画
<style>
/* 定义过度动画 */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
- v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
.fade-enter { opacity: 0; }
- v-enter-active ：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。
.fade-enter-active { transition: opacity .5s; }
- v-enter-to : 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
.fade-enter-to { opacity: 1; }
- v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
.fade-leave { opacity: 1; }
- v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
.fade-leave-active { transition: opacity .5s; }
- v-leave-to : 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
.fade-leave-to { opacity: 0; }
JavaScript 钩子
可以在属性中声明 JavaScript 钩子，使用JS实现动画。
<transition
v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态
v-on:enter="enter" // 执行动画
v-on:after-enter="afterEnter" // 动画结束，清理工作
v-on:enter-cancelled="enterCancelled" // 取消动画
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
></transition>
列表过度
利用transition-group可以对v-for渲染的每个元素应用过度。 有一些动画库还是蛮不错的，可以引入自己玩玩。你是最棒的，我说的。因为我信你！
