<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.v-enter{
opacity:0;
transform:translateX(80px);
}
.v-leave-to{
opacity:0;
transform:translateX(80px);
}
.v-enter-active{
transition:all 0.4s ease;
}
.v-leave-active{
transition:all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<!--Vue提供了component,来展示对应名称的组件-->
<!--component是一个占位符，：is属性可以用来指定要展示的组件的名称-->
<!--mode="out-in"设置这个防止动画没有执行完就开始了-->
<transition mode="out-in">
<component :is="name"></component>
</transition>
<a href="" @click.prevent="name='myCom1'">登录</a>
<a href="" @click.prevent="name='myCom2'">注册</a>
<a href="" @click.prevent="name='myCom3'">解释</a>
</div>
<script>
Vue.component('myCom1',{
template:'<h1>登录组件</h1>',
});
Vue.component('myCom2',{
template:'<h1>注册组件</h1>',
});
Vue.component('myCom3',{
template:'<h1>我是解释</h1>',
});
var vm=new Vue({
el:"#app",
data:{
name:'myCom1'
}
})
// 总结：已经学习了的vue提供的标签
// component
// template
// transition
// transitionGroup
</script>
</body>
</html>
