vue day03

1.transition结合animate.css实现过渡

步骤：
1.引入animate.css文件
2.在想要进行动画的元素上使用 <transition>组件包住
transition:
在transition 这个标签中有两个属性：
（1） enter-active-class：控制动画的进入
（2） leave-active-class：控制动画的离开
上面两个属性中的值写法注意点：
（1）两个属性中均要编写 animate.css中定义好的一个类 animated
（2） 在两个属性中分别取animate.css中控制的动画样式(按需获取)

2.transition结合钩子函数实现过渡

(1) 过渡动画进入
before-enter 过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
enter 过渡动画进入中，在这个方法中定义目标元素的结束位置
after-enter 过渡动画结束后，通常在这个方法里面重置初始值
enter-cancelled 取消过渡动画时被调用

(2) 过渡动画离开
before-leave 动画离开之前触发
leave 过渡动画进入中触发
after-leave 过渡动画离开结束后
leave-cancelled 取消过渡动画时被调用

注意：当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

3. 组件

三种创建方式
（1）使用Vue.extend()和Vue.component()两个方法创建
Vue.extend()函数会返回一个组件的构造器，它里面包含一个参数，它是一个对象，里面是一些配置项
Vue.component()函数会利用vue.extend()返回的构造器创建一个组件的实例，它有两个参数，一个是组件的名字，另一个是组件的构造器

（2） 直接使用vue.component()方法创建,实际上还是调用了vue.extend()这个方法

（3） 通过指定模板创建，定义模板需在vue管辖范围之外

注意：

• 模板template中只能有一个根节点
• 组件的名字如果采用驼峰命名的话，使用的时候就要用连字符“-”，例如组件名叫indexA，使用的时候就要写成index-a

4. 父子组件之间传值

（1）父组件可以使用 props 把数据传给子组件。
（2）子组件可以使用 emit 触发父组件的自定义事件。 vm.emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；