第六章组件 53 组件-创建组件的方式2-优快云博客

本文详细介绍了如何使用Vue.js框架创建网页组件，并将其嵌入到HTML页面中。通过实例展示了如何定义一个Vue组件，以及如何在页面上使用该组件。

 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>