Vue，组件-组件的创建方式2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="../js/vue.js"></script> 9 </head> 10 <body> 11 12 <div id="app"> 13 <mycom2></mycom2> 14 </div> 15 16 </body> 17 </html> 18 <script> 19 20 // 注意： 不管哪种方式创建出来的组件， 组件的 template 属性指向的模板内容， 必须有且只有唯一的 一个根元素 21 Vue.component('mycom2', { 22 template: '<div> <h3> 这是直接使用Vue.component 创建出来的组件 </h3> <span>132</span> </div>' 23 }) 24 25 var vm = new Vue({ 26 el:'#app', 27 data:{ 28 29 }, 30 methods: { 31 32 } 33 }) 34 </script>
效果图
