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.效果圖
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。