Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】 

目   录

1、复习父子组件通信

1.1、父传子（自定义属性）

1.2、子传父（自定义事件）

2、动态组件

2.1、实现

2.2、代码

3、组件生命周期

3.1、Vue的生命周期

3.2、四阶段

4、动画

4.1、Animate.css使用

第1步：在html里面引入animate.css文件 推荐3.x版本

第2步：给需要动画的标签添加上 animated class值

第3步：根据文档，使用对应的动画class名

4.2、Animate.css结合Vue使用

---

1、复习父子组件通信

1.1、父传子（自定义属性）

1.2、子传父（自定义事件）

2、动态组件

有时候，希望在一个地方展示不同的组件信息内容，则可以使用动态组件。

2.1、实现

is属性的值是组件名， component标签就会渲染这个组件替代自己的位置。

2.2、代码

3、组件生命周期

生命周期： 一个东西从产生到消亡的整个过程。

3.1、Vue的生命周期

3.2、四阶段

• 创建阶段

  • beforeCreate 创建之前

  • created 创建之后 【重要】 创建之后，这里可以获取到data里面的数据！ 通常我们会在这里 请求数据，赋给data里面的变量

• 挂载阶段

  • beforeMount 挂载之前

  • mouted 挂载之后 【重要】 挂载之后，只有在这里才可以获取到真是的DOM节点内容

• 更新阶段

  • beforeUpdate 更新之前

  • updated 更新之后

• 消亡阶段

  • beforeDestroy 消亡之前

  • destroyed 消亡之后

4、动画

使用方式1、引用CSS文件。

使用方式2、按“Ctrl+S”保存文件--->引入文件。

动画框架

4.1、Animate.css使用

第1步：在html里面引入animate.css文件 推荐3.x版本

https://www.dowebok.com/demo/2014/98/animate.min.css

第2步：给需要动画的标签添加上 animated class值

<标签 class="其他自定义class animated"/>

第3步：根据文档，使用对应的动画class名

<标签 class="其他自定义class animated animate的动画名"/>

https://www.dowebok.com/demo/2014/98/

4.2、Animate.css结合Vue使用

• 将animate.css文件放在 static目录下面的css目录里面
• 在根目录下面的index.html里面引入css

• 给需要动画的标签或者组件套上transition标签

  	<标签名或组件名/>

• enter-active-class 属性值为进入的动画名
• leave-active-class 属性值为离开的动画名

注意： 动画的效果需要是在 元素 显示/隐藏的时候生效。 也就是 v-if /v-show/动态组件切换时才生效。

 框架---组件化开发