第六章组件 52 组件-创建组件的方式1

 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       <!-- 如果要使用组件，直接，把组件的名称，以HTML标签的形式，引入到页面中，即可 -->
16       <my-com1></my-com1>
17       </div>
18 
19 
20       <script>
21       // 1.1 使用Vue.extend来创建全局的Vue组件
22       var com1=Vue.extend({
23         template:'<h3>这是使用 Vue.extend 创建的组件</h3>'//通过template属性，指定了组件要展示的HTML结构
24       })
25       //1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)
26       //如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
27       //如果不使用驼峰，则直接拿名称来使用即可；
28       Vue.component('myCom1',com1)
29 
30           //创建 Vue 实例，得到 ViewModel
31           var vm =  new Vue({
32               el:'#app',
33         data:{
34           msg:''
35         },
36         methods:{}
37           });
38       </script>
39   </body>
40 </html>

 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       <!-- 如果要使用组件，直接，把组件的名称，以HTML标签的形式，引入到页面中，即可 -->
16       <my-com1></my-com1>
17       </div>
18 
19 
20       <script>
21       // 1.1 使用Vue.extend来创建全局的Vue组件
22       // var com1=Vue.extend({
23       //   template:'<h3>这是使用 Vue.extend 创建的组件</h3>'//通过temlate属性，指定了组件要展示的HTML结构
24       // })
25       //1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象)
26       //如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
27       //如果不使用驼峰，则直接拿名称来使用即可；
28       // Vue.component('myCom1',com1)
29 
30       //Vue.component  第一个参数：组件的名称，将来在引用组件的时候，就是一个 标签形式  来引入 它的
31       //第二个参数：Vue.extend 创建的组件 ，其中 template 就是组件将来要展示的HTML内容
32        Vue.component('myCom1',Vue.extend({
33         template:'<h3>这是使用 Vue.extend 创建的组件</h3>'
34        }))
35 
36           //创建 Vue 实例，得到 ViewModel
37           var vm =  new Vue({
38               el:'#app',
39         data:{
40           msg:''
41         },
42         methods:{}
43           });
44       </script>
45   </body>
46 </html>

第六章 组件 52 组件-创建组件的方式1

第六章组件 52 组件-创建组件的方式1