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>