目 錄
第1步：在html裏面引入animate.css文件 推薦3.x版本
第2步：給需要動畫的標籤添加上 animated class值
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:1
curComName:"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版本
第2步：給需要動畫的標籤添加上 animated class值
<標籤 class="其他自定義class animated"/>
第3步：根據文檔，使用對應的動畫class名
<標籤 class="其他自定義class animated animate的動畫名"/>
4.2、Animate.css結合Vue使用
- 將animate.css文件放在 static目錄下面的css目錄裏面
- 在根目錄下面的index.html裏面引入css
<link rel="stylesheet" href="./static/css/[email protected]">
- 給需要動畫的標籤或者組件套上transition標籤
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
<標籤名或組件名/>
</transition>
- enter-active-class 屬性值爲進入的動畫名
- leave-active-class 屬性值爲離開的動畫名
注意： 動畫的效果需要是在 元素 顯示/隱藏的時候生效。 也就是 v-if /v-show/動態組件切換時才生效。
框架---組件化開發