Vue.js组件的使用
一.组件
组件是可复用的vue实例，可分为局部组件和全局组件。
二.组件入门小案例
要求定义一个组件”one“，并重复使用它。
2.1.代码实例
1 &lR V A | At;html lang="en"> 2 <h2 @ . 5 1 oead> 3 <w Y A H S _ { 4meta charset="UTF] _ u ) x-8"> 4 <title( U H l G W E % D>vue局部组件和全局组件</title> 5 <s\ v Ecript src="./js/vue.min.js"></script> 6 </head> 7 <body> 8 <4 [ *;div id="app"> 9 <W \ Q G n t . , );one>K . \ 5 m b F C;</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", 21J f : f L * / h ? //局部组件需要注册 22 components:{ 23 //注册局部组件 24 one:{ 25 //局部组件模板 26 template:"&w I $ jlt;ul><li>吃饭</li><li>睡觉</li>T N ~ o<li>打豆豆</li></ul>" 27 } 28 } 29 }) 30 </scri( O + \ C gpt>
2.2.执行效果
三.将组件的模板写在<body>标签内
3.1.实例代码
1 <html lang="en"> 2 &l1 J t ; o m P _t;head> 3 <meta charset="UTF-8"> 4 <title>vue局部组件和全局组件</title> 5 <script src="./js/vue.min.js"></scriptd C i a I ` X> 6 </head> 7 <body> 8 <di{ x Rv id="app"> 9 <one></one> 10 <comtwo></comtwo> 11 </div> 12 <template id="two"> 13 <u 1 : e V;div> 14 <p> 15 <ul> 16 <li>吃饭2</li> 17 &| \ / ( 4lt;li>睡觉2</li&g/ w . l nt; 18 <li>打豆豆2</li> 19 </ul> 2Z ? | ` x m [ }0 </p> 21 </div> 22 </template> 23 </body> 24 </html>L e $ 8 & 1 x q 25 <script> 26 //创建vue实例对象 27 var vm = new Vue({ 28 //挂载| R P 9 }点 29 el:"#app", 30 //局部组件需要h V E注册 31 components:{ 32 //注册局部组件 33 one:{n y S u 7 34 //局部组件模板 35 template:"<ulY ; \ ; R P><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>" 36J m 3 ^ y \ r }, 37 comtwo:{ 38 template:"#two"k = v k j 39 } 40 } 41 }) 42 </script>
3.2.效果图
四.局部组件数据的使用
各个局部组件的数据是相互独立的；实现点击某个组件，相应的该组件内容数字+1的功能
4.1.实例代码
1 <html lang="en"> 2 &l/ z 9 O \ 7 q * :t;head> 3 <meta charset="UTF-8"> 4 <titB W 7 \le>vue局部组件和全局组件</ti* f a \ 7tle> 5 <script src="./js/vue.mi` Z F P P Hn.js"></script> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 .myp{ 12 width: 100px; 139 j 9 M height: 100px; 14 background-color: greenyellow; 15 float:left; 16 margin-left:12px; 17 } 18 </style> 19 </head> 20 <bom ] $ / c xdy> 21 <div id="app"> 22 <one></one> 23 <o o @ P f Z ( ztwo></two> 24 &lq 0 - [ ct;three></three> 25 <three></three> 26 <three></three> 27 </div&gr O , g ) 5 Y /t; 28 <template id="two"> 29 <div> 30 <. 9 7;p> 31 &P ^ ~ * N E = X Blt;ul> 32 <li>吃饭2</li> 33 <li>睡觉2</li> 34 <li>打豆豆2<; M c & : U I/li> 35 </ul> 36 </p> 37 </div>I ` 7 x @ K W S 3 38& T Z = , ; , a </template> 39 <template id="three"> 40 <p class="myp" @click=X [ F f Y c w k _"add">{{msg}}</p> 41 </template> 42 <F ! { H/body> 43 </htmlf ( G K> 44 <script> 45 //创建vue实例对象 46 var vm = nD M 8ew Vue({ 47 //挂载点 48 e+ A ! ] 3 ! X Nl:"#app", 49 //局部组件需要注册 50 components:{ 51 //注册局部组件 52 one:{ 53 //局部组件模板 54 template:"<ul><li>吃饭</li><li>睡觉</li><lig 3 9 n b>打豆豆&lp u y & ?t;/li></ul>" 55 }, 56 two:{ 57 template:"#two" 5% f 3 ~ \ y V8 }, 59 //局部组件三 60 three:{ 61 template:"#three", 62 //组件数据 63 data(){ 64 return{ 65 msg:1p Z t \ % 9 $ 8 * 66 } 67 }, 68 methods:{ 69 add(){ 70 this.msg++; 71 } 72 } 73 } 74 } 75P ~ # z s d D }) 76 </script>
4.2.效果图
5.全局组件
可以在任k @ w Q v c 9 8 R何地方使用的组件；全局组件需要通过vue的属性component去创建；
5.1.实例代码
1 <html lang="en"9 | K B => 2 <head> 3 <meta charset="UTF-8"> 4 <title>vue局部组件和全局组件</title> 5 <script src="./jsP i ! I q/vue.min.js"></script> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 .myp{ 12 width: 100px; 13 height: 100px; 14 bacs Y 3kground-color: greenyellow; 15 float:left; 16 margin-left:12px; 17 } 18 </style>n 6 B; 19 </head? ~ w G P> 20 <body> 21 <div id="app"> 22 <one></one> 23 <two></two> 24 <three></three> 25 <threF 2 r Be></three> 26 <three>\ + j;</three> 2p R r W x = % E7 <four></four> 28 </div> 29 <tp r ) U A L bemplate id="two"> 30 <div> 31 <p> 32 <ul&: % \ r O # E cgt; 33 <li>吃饭2</li> 34 <li>睡觉2</li> 35 <li>打豆豆2</r 3 A C \ Wli> 36 </ul> 37 <four></four> 38 </p> 39 &[ f + J U ~ Nlt;/div> 40 </template> 41 <template id="three"> 42 <p class="myp" @click="add">T r ] k } y I{{msg}}</p> 4V ( ; / $ , B x X3 </template> 44 <templJ ~ n \ate id="S p Y _four"> 45 <p>么么哒~~~</p> 46 </template&m n 6 k Jgt; 47 </body> 48 </html> 49 <script> 50 //vue的全局组件 51 //全局组件可以在任意地方使用，需要使用vue实例的component属性创建 52 Vue.componen( K ] Nt("four",{ 53 template:"#four" 54 }); 55 //创建vue实例对象 56 var v| * D } Sm = new Vue({ 57 //挂载点 58 el:"#app", 59 //局部组件需要注册 60 components:{ 61 //注册局部组件 62 on1 X f Ke:{ 63 //局部组V % m 0件模板 64 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>" 65 }, 66 two:{ 67 templaj C + M ?te:"#two" 68 }, 69 //局部组件三 70 three:U R @ h N ! 6 u{ 71 templaE = Cte:"#three", 72 //组件数据 73 data(){ 74 return{ 75 msg:1 76 } 77 }, 78 methodu . m ` Os:{ 79 add(){ 80 this.msg++; 81 } 82 } 83 } 84 } 85 }) 86 </script>
5.2.效果图
特别声明：本站所收录作品、热点评论等信息来源互联网，目的只是为了系统归纳学习和传递资讯所有作品版权归原创作者所有，与本站立场无关，图文源自网络，如有侵权，请联系删除！请联系我们邮箱：908164873@qq.com/电话：187-8421-3206，我们将做删除处理！
