1、使用template标签定义组件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <my-component></my-component> 10 </div> 11 12 <template id="myComponent"> 13 <div>This is a component!</div> 14 </template> 15 </body> 16 <script src="js/vue.js"></script> 17 <script> 18 19 Vue.component('my-component',{ 20 template: '#myComponent' 21 }) 22 23 new Vue({ 24 el: '#app' 25 }) 26 27 </script> 28 </html>
这种方式可以将以template定义的组件放在当前页面中，也可以以单独的文件形式存在，然后再使用的页面中使用import引入即可。
2、使用script标签定义组件
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <div id="app"> 5 <my-component></my-component> 6 </div> 7 8 <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。--> 9 10 <script type="text/x-template" id="myComponent"> //type类型为 text/x-template; id为组件的名称。 11 <div>This is a component!</div> 12 </script> 13 </body> 14 <script src="js/vue.js"></script> 15 <script> 16 //全局注册组件 17 Vue.component('my-component',{ 18 template: '#myComponent' 19 }) 20 21 new Vue({ 22 el: '#app' 23 }) 24 25 </script> 26 </html>