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、實現

<component is="組件名"></component>

is屬性的值是組件名， component標簽就會渲染這個組件替代自己的位置。

2.2、代碼

<template><div class="tab"><div class="tit"><!-- <span :class="curIndex==1 ?'on':''" @click="tab(1)">商品介紹</span><span :class="curIndex==2 ?'on':''" @click="tab(2)">規格與包裝</span><span :class="curIndex==3 ?'on':''" @click="tab(3)">售后包裝</span><span :class="curIndex==4 ?'on':''" @click="tab(4)">商品評價</span> --><span :class="curComName=='Son1' ?'on':''" @click="change(1)">商品介紹</span><span :class="curComName=='Son2' ?'on':''" @click="change(2)">規格與包裝</span><span :class="curComName=='Son3' ?'on':''" @click="change(3)">售后包裝</span><span :class="curComName=='Son4' ?'on':''" @click="change(4)">商品評價</span></div><div class="content"><!-- <template v-if="curIndex==1"><Son1/></template><template v-if="curIndex==2"><Son2/></template><template v-if="curIndex==3"><Son3/></template><template v-if="curIndex==4"><Son4/></template> --><!-- component標簽 叫做動態組件標簽： is屬性指定一個組件的名稱，component就顯示這個組件的內容 --><component :is="curComName"></component></div></div> </template><script> import Son1 from "./Son1" import Son2 from "./Son2" import Son3 from "./Son3" import Son4 from "./Son4" export default {data(){return{// curIndex:1curComName:"Son1"}},methods:{// tab(idx){// this.curIndex = idx;// }change(name){console.log(name)this.curComName = "Son"+name}},components:{Son1,Son2,Son3,Son4} }</script> <style scoped> .tab{background-color: #eee;width: 500px; } .tab .tit {padding:10px; } .tab .content{padding: 40px;border:2px solid blue; } .tab .tit span{display: inline-block;background-color: blue;color:#fff; } .tab .tit span.on{background-color: red; } </style>

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

<link rel="stylesheet" href="./static/css/animate.css@3.5.1.css">

• 給需要動畫的標簽或者組件套上transition標簽

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"><標簽名或組件名/> </transition>

• enter-active-class 屬性值為進入的動畫名
• leave-active-class 屬性值為離開的動畫名

注意： 動畫的效果需要是在 元素 顯示/隱藏的時候生效。 也就是 v-if /v-show/動態組件切換時才生效。

?框架---組件化開發

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。