Vuejs学习笔记(二)-1.组件的基本使用-全局组件和局部组件

组件化开发是程序代码的分类复用，使用抽象的思想,将相同的页面模块抽象成一个组件，以便在不同页面复用，不同项目复用。

一、全局组件

解释下，全局组件就是构建的组件所有vue实例都可以用，

vue组件创建的基本方法如下：

1.创建组件构造器 ：

const cpn =Vue.extend({

　　template:''

})

注解：使用Vue实例的extend方法构造组件，参数之一，html的模板。并将构建的组件给到一个变量cpn，cpn是component的缩写。

 

2.注册组件：

Vue.component( 'cpn-name',cpn)

在Vue实例中注册一个组件，其中cpn-name为组件的名称，可以直接作为标签放在Html中使用，cpn这是实际组件的对象变量。注册时，组件名称在前面，引号引用.

这个注册属于全局注册，所有的Vue实例都可以使用。

 

3.使用组件

就是在Vue对应挂载的Html内容中是使用,

 

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-vue组件的基本使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/2 14:43
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-vue组件的基本使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  3.使用组件-->
21   <my-cpn></my-cpn>
22 </div>
23 
24 <script src="../js/vue.js"></script>
25 <script>
26 
27   // 1.创建组件构造器对象
28   const cpn = Vue.extend({
29     template: `
30       <div>
31         <h2>我是标题</h2>
32         <p>我是内容</p>
33       </div>
34     `
35   })
36 
37   // 2.注册组件
38   Vue.component('my-cpn', cpn)
39   const app = new Vue({
40     el: '#app',
41     data: {
42       message: 'hello'
43     },
44   })
45 </script>
46 </body>
47 </html>

 

 

这个是最原始的组件创建和使用的代码，后面会慢慢演化

。

 



二、局部组件


全局组件所有的Vue实例都可以用，而局部组件属于某一个Vue实例，哪个Vue实例内部注册了该组件，哪个Vue实例的对应挂载的Html中就可以引用该组件。




 


 


代码如下：




 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-vue组件的基本使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/2 14:43
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-vue组件的基本使用</title>
16 </head>
17 <body>
18 <div id="app1">
19   <h2>{{ message }}</h2>
20   <!--  3.1使用全局组件cpn1和局部组件cpn2-->
21   <cpn1></cpn1>
22   <cpn2></cpn2>
23 </div>
24 
25 <div id="app2">
26   <h2>{{ message }}</h2>
27   <!--  3.2使用全局组件cpn1和局部组件cpn2-->
28   <cpn1></cpn1>
29   <cpn2></cpn2>
30 </div>
31 
32 <script src="../js/vue.js"></script>
33 <script>
34 
35   // 1.1 创建组件构造器对象cpn1
36   const cpn1 = Vue.extend({
37     template: `
38       <div>
39         <h2>我组件1(全局组件)的标题</h2>
40         <p>我组件1(全局组件)的内容</p>
41       </div>
42     `
43   })
44   // 1.2 创建组件构造器对象cpn2
45   const cpn2 = Vue.extend({
46     template: `
47       <div>
48         <h2>我组件2(局部组件)的标题</h2>
49         <p>我组件2(局部组件)的内容</p>
50       </div>
51     `
52   })
53 
54   // 2.1注册组件(全局组件)
55   Vue.component('cpn1', cpn1)
56 
57   // 0.创建vue实例1
58   const app1 = new Vue({
59     el: '#app1',
60     data: {
61       message: "i'm Vue实例1"
62     },
63   })
64   // 0.创建vue实例2
65   const app2 = new Vue({
66     el:'#app2',
67     data:{
68       message:"i'm Vue实例2"
69     },
70     // 2.2Vue实例2内注册组件(局部组件)
71     components:{
72       cpn2:cpn2
73     }
74   })
75 </script>
76 </body>
77 </html>




 


 


 









            

            
posted @ 
2021-07-02 14:55 
kaer_invoker 
阅读(166) 
评论(0) 
编辑 
收藏 
举报