vueinit.zi。。。。。。。。。。。。。。。。。。。

<template>
    <div>
     动画处理
     <button v-on:click='show=!show'>按钮</button>
     <transition name='fade'> 
     <p v-if='show'>Hello</p>
      <transition/> 
    </div>
</template>
<script>
export default {
    name:'Animates',
    data(){
        return{
            show:true
        }
    }
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>



<template>
  <div >
   <!--{{ msg }}
   <HelloWorld @myEvent='eventHandler' @myChange='inputMessage'/>-->
   <!--
     <slotComponent> 
     <template v-slot:n1>  
      <div>
        我就是插槽
        <p>{{showValue}}</p>
      </div>
      </template>  
      <template v-slot:n2="slotProps">
        <p> 我是n2:{{slotProps.msg}}</p> 我是n2
      </template>
      
    
      <template v-slot:default="slotProps">
      <p>我是插槽3:{{slotProps.msg}}</p>
      </template>
      
    </slotComponent>  
   
   <MyComponents/>
   访问根实例  $root
    {{this.$root.rootMsg}}-->
    <Animates/>
    
  </div>
  
</template>

<script>
import HelloWorld from './components/HelloWorld'
import slotComponent from './components/slotComponent'
import MyComponents from "./components/MyComponets"
import Animates from './components/Animates'
export default {
  name: 'App',
  components: {
    HelloWorld,
    slotComponent,
    MyComponents,
    Animates
  },
  data () {
    return {
      msg:'',
      showValue:'编译作用域',
      value:'读取app的value值'
    }
  },
  methods: {
    eventHandler(data){
     this.msg=data
    },
    inputMessage(value){
      this.msg=value
    },
    
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

老师给看一下

老师 额 什么时候讲过swiper

 课程中有吗