Vue，组件-组件的创建方式3
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 </head> 9 <script src="../js/vue.js"></script> 10 <body> 11 <div id="app"> 12 <mycom3></mycom3> 13 </div> 14 15 <!-- 在被控制的 #app 外面， 使用 template 元素， 定义组件的HTML模板结构 --> 16 <template id="tmpl"> 17 <div> 18 <h1>这是通过 template 元素， 在外部定义的组件结构， 这个方式， 有代码的智能提示和高亮</h1> 19 <h4>好用，不错！</h4> 20 </div> 21 </template> 22 </body> 23 </html> 24 <script> 25 26 Vue.component('mycom3', { 27 template: '#tmpl' 28 }) 29 30 var vm = new Vue({ 31 el:'#app', 32 data:{ 33 34 }, 35 method:{ 36 37 } 38 }) 39 40 </script>
效果图
