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.效果图