Vue组件的定义方式

时间：2021-07-16 10:24:51

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>

 

标签：

相关文章