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

<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版本

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/动态组件切换时才生效。

框架---组件化开发

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

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步：在html里面引入animate.css文件推荐3.x版本