目 录
第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/动态组件切换时才生效。
框架---组件化开发