这样我们就可以使用自定义的类名来定义不同的过渡效果，下面我们结合第三方css库来使用：
<button @click="show = !show">Toggle</button> <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"> <h3 v-show="show">This is a message.</h3> </transition> <link href="http://cdn.jsdelivr.net/npm/animate.css@3.5.1" type="text/css">我们使用了Animation.css提供的类样式：animated、bounceIn和bounceOut。只需要放在适合的类中即可自动加载触发。
Vue动画CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
js钩子上面我们可以通过类名来控制过渡效果，下面我们还可以使用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>还有很多的Vue动画特性，这样不再赘述，可自行到官网查阅学习。
三、组件 组件名给一个组件注册一个符合其用途的名称是我们应当考虑的，且尽量遵循W3C规范，即名称全小写，必要的单词以以字符分隔开。例如：
Vue.component('show-number', {/*...*/}); Prop 1、prop的命名在html中特性名称prop是大小写不敏感的，浏览器会将大写当做小写来处理，所以驼峰式（camelCase）的写法可以换成连字符的写法（kebab-case）。
2、props的类型有两种写法：
字符串数组形式：
js props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
对象形式：
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }推荐使用对象形式，因为这种不但清晰地标明了数据类型，还能在js报错的时候发出相应的信息提示。
3、静态赋值和动态赋值所谓的静态赋值就是将一个不变的数据传给prop，而动态赋值就是将一个变量传给prop，以此来达到动态赋值的效果。
静态
<my-component titile="Boom"></my-component>
动态
<my-component :title="data.title"></my-component> <my-component :title="'this is' + data.title"></my-component>虽然我们都是在传递一个字符串，但理论是支持任意类型的数据。需要注意的是，如果我们希望传递一个数字就不能单纯的使用静态赋值，因为这样会变被当成字符串来处理。同样的道理，对于Boolean值、数组、对象，我们都需要使用动态赋值来保证数据的类型。
一次性赋值
如果你希望将所有的prop作为整个对象传入，可以使用不带名称的v-bind进行赋值。例如：假定有一个对象
props = { id: 1, title: 'hiahia' }一次性赋值：
<my-component v-bind="props"></my-component>等价于：
<my-component :id="props.id" :title="props.title"></my-component> 4、单向流数据所有的prop都使得其父子之间的prop形成一个单向下行绑定：父级更新将会更新子组件的prop，但反过来却不行，所以Vue不允许在子组件中出现修改prop的情况。
5、prop验证上面提到的推荐的prop类型是对象类型，我们可以对组件进行验证性信息传入，当不符合注册规则是发出错误信息。如：
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) 6、禁用特性继承如果你不希望组件的根元素继承特性，那么你可以在注册是加上这个特性：inheritAttrs: false。