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 <!-- 在 被控制的 #app 外面，使用 template 元素，定义组件的HTML模板结构 --> 19 <template id="tmp1"> 20 <div> 21 <h1>这是通过template 元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1> 22 <h4>好用，不错！</h4> 23 </div> 24 </template> 25 26 <script> 27 Vue.component('mycom3',{ 28 template:'#tmp1' 29 }) 30 31 //创建 Vue 实例，得到 ViewModel 32 var vm = new Vue({ 33 el:'#app', 34 data:{ 35 msg:'' 36 }, 37 methods:{} 38 }); 39 </script> 40 </body> 41 </html>