<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>
老师给看一下
京公网安备 11011402011233号