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.效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/282543.html
標籤：其他
上一篇：JavaScript異步編程3——Promise的鏈式使用
下一篇：jQuery中Ajax的使用