vue电商实战笔记（第四、五章）

有个比较好的使用工具：

https://mobaxterm.mobatek.net/

动画部分：

animate.vue文件：

<template>
  <div>
    <button v-on:click="show=!show">
      toggle
    </button>
    <div class="ab">
      <!--例子1-->
      <!--通过transition属性来实现一些过渡效果，需要配合一些条件来实现，需要用到v-if和v-show这些，在vue中实现动画效果有-->
      <!--两种方式，一种是通过css实现，一种是通过js来实现-->
      <transition name="fade">
        <p v-show="show">i am show</p>
      </transition>
      <!--例子2-->
      <!--另外一种动画效果-->
      <transition name="my-trans">
        <p v-show="show">another transition</p>
      </transition>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        show:true
      }
    }
  }
</script>
<style>
  .fade-enter-active,.fade-leave-active{
    transition:all .5s ease-out;
  }
  .fade-enter,.fade-leave-active{
    opacity:0;
  }
  .my-trans-enter-active,.my-trans-leave-active{
    transition:all .5s ease-out;
  }
  .my-trans-enter{
    transform:translateY(-500px);
    opacity:0;
  }
  .my-trans-leave-active{
    transform:translateY(500px);
    opacity:0;
  }
</style>

App.vue文件：

<template>
  <div>
    <!--例子2-->
    <button v-on:click="toggleCom">
      toggleCom
    </button>
    <button v-on:click="toshow=!toshow">show</button>
    <!--通过mode控制动画的模式，out-in,in-out-->
    <transition name="fade" mode="in-out">
      <div :is="currentView"></div>
    </transition>
    <!--例子3这里需要注意的是transition里包裹的含有v-if的标签不能是同一个，不然没有动画效果，如果是同一个的话，需要使用key来区分-->
    <transition name="fade" mode="out-in">
      <!--<div v-if="toshow">这是一句话</div>-->
      <!--<p v-else>这是另一句话</p>-->
      <div v-if="toshow" key="1">这是一句话</div>
      <div v-else key="2">这是另一句话</div>
    </transition>
    <!--例子1-->
    <animate-com></animate-com>

  </div>
</template>
<script>
  import Vue from 'vue'
  import animateCom from './components/animate.vue'
  import aniA from './components/aniA.vue'
  import aniB from './components/aniB.vue'
  export default{
    components:{
      animateCom,
      aniA,
      aniB
    },
    data(){
      return {
        currentView:'ani-a',
        toshow:true
      }
    },
    methods:{
      toggleCom(){
        if(this.currentView==='ani-a'){
          this.currentView='ani-b';
        }else{
          this.currentView='ani-a';
        }
      }
    }
  }
</script>
<style>
  .fade-enter-active,.fade-leave-active{
    transition:all .5s ease-out;
  }
  .fade-enter,.fade-leave-active{
    opacity:0;
  }
</style>

aniA.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'I am from aniA'
      }
    }
  }
</script>

aniB.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'I am from aniB'
      }
    }
  }
</script>

知识点：