1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../js/vue.js"></script>
9 </head>
10 <style>
11 .v-enter,
12 .v-leave-to{
13 opacity: 0;
14 transform: translateX(150px);
15 }
16
17 .v-enter-active,
18 .v-leave-active{
19 transition: all 0.5s ease;
20 }
21 </style>
22 <body>
23 <div id="app">
24
25 <a href="" @click.prevent="comName='login'">登录</a>
26 <a href="" @click.prevent="comName='register'">注册</a>
27
28 <!-- 通过 mode 属性， 设置组件切换时候的 模式 -->
29 <transition mode="out-in">
30 <component :is="comName"></component>
31 </transition>
32
33
34 </div>
35
36
37
38 </body>
39 </html>
40 <script>
41
42 //组件名称是 字符串
43 Vue.component('login', {
44 template: '<h3>登录组件</h3>'
45 })
46
47 Vue.component('register', {
48 template: '<h3>注册组件</h3>'
49 })
50
51 var vm = new Vue({
52 el: '#app',
53 data:{
54 comName: '' // 当前 component 中的 :is 绑定的组件的名称
55 },
56 methods: {
57
58 },
59 })
60
61 </script>
