1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <!--1.导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 </head>
12
13 <body>
14 <div id="app">
15 <a href="" @click.prevent="comName='login'">登录</a>
16 <a href="" @click.prevent="comName='register'">注册</a>
17 <!-- Vue提供了 component ，来展示对应名称的组件 -->
18 <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->
19 <component :is="comName"></component>
20
21 <!-- 总结：当前学习了几个Vue提供的标签了？？？ -->
22 <!-- component,template,transition,transitionGroup -->
23 </div>
24
25 <script>
26 //组件名称是 字符串
27 Vue.component('login',{
28 template:'<h3>登录组件</h3>'
29 })
30
31 Vue.component('register',{
32 template:'<h3>注册组件</h3>'
33 })
34
35 //创建 Vue 实例，得到 ViewModel
36 var vm = new Vue({
37 el:'#app',
38 data:{
39 comName:'login'//当前 component 中的 :is 绑定的组件的名称
40 },
41 methods:{}
42 });
43 </script>
44 </body>
45 </html>
