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 <mycom3></mycom3> 16 </div> 17 18 <div id="app2"> 19 <mycom3></mycom3> 20 <login></login> 21 </div> 22 23 24 <!-- 在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 --> 25 <template id="tmp1"> 26 <div> 27 <h1>这是通过template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1> 28 <h4>好用，不错！</h4> 29 </div> 30 </template> 31 32 <template id="temp12"> 33 <h1>这是私有的 login 组件</h1> 34 </template> 35 36 <script> 37 Vue.component('mycom3',{ 38 template:'#tmp1' 39 }) 40 41 //创建 Vue 实例，得到 ViewModel 42 var vm = new Vue({ 43 el:'#app', 44 data:{ 45 msg:'' 46 }, 47 methods:{} 48 }); 49 50 var vm2 = new Vue({ 51 el:'#app2', 52 data:{ 53 msg:'' 54 }, 55 methods:{}, 56 components:{//定义实例内部私有组件的 57 login:{ 58 template:'#temp12' 59 } 60 }, 61 }) 62 63 64 </script> 65 </body> 66 </html>