Vue.js三.组件的使用

Posted on 2021-05-03 18:18  策马抢  阅读(116)  评论(0编辑  收藏  举报

Vue.js组件的使用

一.组件

  组件是可复用的vue实例,可分为局部组件和全局组件。

二.组件入门小案例

  要求定义一个组件”one“,并重复使用它。

2.1.代码实例

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>vue局部组件和全局组件</title>
 5     <script src="./js/vue.min.js"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <one></one>
10         <one></one>
11         <one></one>
12         <one></one>
13     </div>
14 </body>
15 </html>
16 <script>
17     //创建vue实例对象
18     var vm = new Vue({
19         //挂载点
20         el:"#app",
21         //局部组件需要注册
22         components:{
23             //注册局部组件
24             one:{
25                 //局部组件模板
26                 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
27             }
28         }
29     })
30 </script>

2.2.执行效果

 

三.将组件的模板写在<body>标签内

3.1.实例代码

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>vue局部组件和全局组件</title>
 5     <script src="./js/vue.min.js"></script>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <one></one>
10         <comtwo></comtwo>
11     </div>
12     <template id="two">
13         <div>
14             <p>
15                 <ul>
16                     <li>吃饭2</li>
17                     <li>睡觉2</li>
18                     <li>打豆豆2</li>
19                 </ul>
20             </p>
21         </div>
22     </template>
23 </body>
24 </html>
25 <script>
26     //创建vue实例对象
27     var vm = new Vue({
28         //挂载点
29         el:"#app",
30         //局部组件需要注册
31         components:{
32             //注册局部组件
33             one:{
34                 //局部组件模板
35                 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
36             },
37             comtwo:{
38                 template:"#two"
39             }
40         }
41     })
42 </script>

3.2.效果图

 

四.局部组件数据的使用

  各个局部组件的数据是相互独立的;实现点击某个组件,相应的该组件内容数字+1的功能

4.1.实例代码

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>vue局部组件和全局组件</title>
 5     <script src="./js/vue.min.js"></script>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         .myp{
12             width: 100px;
13             height: 100px;
14             background-color: greenyellow;
15             float:left;
16             margin-left:12px;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="app">
22         <one></one>
23         <two></two>
24         <three></three>
25         <three></three>
26         <three></three>
27     </div>
28     <template id="two">
29         <div>
30             <p>
31                 <ul>
32                     <li>吃饭2</li>
33                     <li>睡觉2</li>
34                     <li>打豆豆2</li>
35                 </ul>
36             </p>
37         </div>
38     </template>
39     <template id="three">
40         <p class="myp" @click="add">{{msg}}</p>
41     </template>
42 </body>
43 </html>
44 <script>
45     //创建vue实例对象
46     var vm = new Vue({
47         //挂载点
48         el:"#app",
49         //局部组件需要注册
50         components:{
51             //注册局部组件
52             one:{
53                 //局部组件模板
54                 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
55             },
56             two:{
57                 template:"#two"
58             },
59             //局部组件三
60             three:{
61                 template:"#three",
62                 //组件数据
63                 data(){
64                     return{
65                         msg:1
66                     }
67                 },
68                 methods:{
69                     add(){
70                         this.msg++;
71                     }
72                 }
73             }
74         }
75     })
76 </script>

4.2.效果图

 

 5.全局组件

  可以在任何地方使用的组件;全局组件需要通过vue的属性component去创建;

5.1.实例代码

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>vue局部组件和全局组件</title>
 5     <script src="./js/vue.min.js"></script>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         .myp{
12             width: 100px;
13             height: 100px;
14             background-color: greenyellow;
15             float:left;
16             margin-left:12px;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="app">
22         <one></one>
23         <two></two>
24         <three></three>
25         <three></three>
26         <three></three>
27         <four></four>
28     </div>
29     <template id="two">
30         <div>
31             <p>
32                 <ul>
33                     <li>吃饭2</li>
34                     <li>睡觉2</li>
35                     <li>打豆豆2</li>
36                 </ul>
37             <four></four>
38             </p>
39         </div>
40     </template>
41     <template id="three">
42         <p class="myp" @click="add">{{msg}}</p>
43     </template>
44     <template id="four">
45         <p>么么哒~~~</p>
46     </template>
47 </body>
48 </html>
49 <script>
50     //vue的全局组件
51     //全局组件可以在任意地方使用,需要使用vue实例的component属性创建
52     Vue.component("four",{
53         template:"#four"
54     });
55     //创建vue实例对象
56     var vm = new Vue({
57         //挂载点
58         el:"#app",
59         //局部组件需要注册
60         components:{
61             //注册局部组件
62             one:{
63                 //局部组件模板
64                 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
65             },
66             two:{
67                 template:"#two"
68             },
69             //局部组件三
70             three:{
71                 template:"#three",
72                 //组件数据
73                 data(){
74                     return{
75                         msg:1
76                     }
77                 },
78                 methods:{
79                     add(){
80                         this.msg++;
81                     }
82                 }
83             }
84         }
85     })
86 </script>

5.2.效果图

 

Copyright © 2021 策马抢
Powered by .NET 5.0 on Kubernetes