组件

html中<template></template>标签放组件模板，在定义组件时，template的属性值为<template></template>标签的id。

html中<component></component>标签是来放组件渲染结果的，通过is属性来绑定组件。

在Vue里推荐使用ref的方式来获取dom或者组件

<tag ref="a"></tag>

这样就可以使用this.$refs.a取到那个tag

在有些特定的html标签里面。规定了只能放哪些标签，这是候又想用组件的时候，直接是不能用的。需要在规定的标签通过is属性来绑定组件。

例如：

<table>
    <tbody>
        <tr is="组件名"></tr>
    </tbody>
</table>

过渡

单元素/组件的过度

Vue提供了<transition>组件，组件有个name属性，为了区分个体。

列表过度

当内容为多个元素/列表时，运用<transition-group>组件

当定义了<transition>/<transition-group>组件时，css中需要对其设置。

/* xxx为name值 enter为进入 leave为离开*/
/* 进入时 */
.xxx-enter{
    /* 进入过渡的初始设置 */
    opacity: 0;
}
.xxx-enter-to{
    /* 进入过渡的结束设置 */
    opacity: 1;
}
.xxx-enter-active{
    /* 进入过渡生效时的状态 */
    transition: opacity 2s;
}
/* 离开与进入类似 */

还可以通过给<transition>/<transition-group>组件加以下属性来实现，属性值为css类名。

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)