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 <!-- 还是使用 标签形式，引入自己的组件 --> 16 <mycom2></mycom2> 17 </div> 18 19 20 <script> 21 // template:'<h3>这是直接使用 Vue.component 创建出来的组件</h3>' 22 //注意：不论是哪种方式创建出来的组件，组件的template 属性指向的模板内容，必须有且只能有唯一的一个根元素 23 Vue.component('mycom2',{ 24 template:'<div><h3>这是直接使用 Vue.component 创建出来的组件</h3><span>123</span></div>' 25 }) 26 27 //创建 Vue 实例，得到 ViewModel 28 var vm = new Vue({ 29 el:'#app', 30 data:{ 31 msg:'' 32 }, 33 methods:{} 34 }); 35 </script> 36 </body> 37 </html>