Vue-元件(二)
阿新 • • 發佈：2020-08-19
元件的案例，可通過案例更好的學習元件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>元件-註冊、呼叫、prop</title> 7 <script src="./jquery-3.5.1.min.js"></script> 8 <script src="./vue.js"></script> 9 <script src="./vue-router.js"></script> 10 </head> 11 <body> 12 <!-- 呼叫、註冊 --> 13 <div> 14 <div id="app1"> 15 <!-- 呼叫元件 --> 16 <component_1></component_1> 17 <!-- 元件可複用，並且數值為獨立的--> 18 <component_1></component_1> 19 <component_2></component_2> 20 <component_3></component_3> 21 <!-- ps:元件名字使用駝峰命名，呼叫時使用‘大寫前加-，大寫改小寫的’寫法也是可以的 22 如：元件名：ComtName 呼叫：<ComName>或<Com-name>23 直接在DOM中使用時只有Com-name有效 24 --> 25 </div> 26 <script> 27 //全域性註冊 28 Vue.component('component_1',{//component_1為元件名 29 data:function(){//data必須是函式的形式 30 return {count:0} 31 }, 32 template:'<div><h2>this is component_1</h2><button @click="count++">The {{count}} .</button></div>' 33 }) 34 //區域性註冊 35 var Component_2 = { 36 template:'<h2>this is Component_2</h2>' 37 } 38 //區域性註冊的元件在其子元件中不可用,如需要則如下操作 39 var Component_3 = { 40 components:{ 41 'component_2':Component_2 42 }, 43 template:'<div>\ 44 <h2>this is component_3 Star</h2>\ 45 <component_2></component_2>\ 46 <h2>this is component_3 End</h2>\ 47 </div>' 48 } 49 /* 使用babel和webpack： 50 * import Component_3 from './Component_3.vue' 51 * export default{ 52 * components:{ 53 * Component_3 54 * }, 55 * //... 56 * } 57 */ 58 var vm1 = new Vue({ 59 el:'#app1', 60 //區域性註冊的元件在其子元件中不可用(33行) 61 components:{ 62 'component_2':Component_2, 63 'component_3':Component_3 64 } 65 }) 66 </script> 67 </div> 68 <!-- prop --> 69 <div> 70 <div id="app2"> 71 <!-- prop是元件上註冊的自定義的attribute， 72 當一個值傳遞給一個prop attribute的時候， 73 它變成了那個元件例項的一個property 74 --> 75 <component_4 title="This is prop4_1"></component_4> 76 <component_4 title="This is prop4_2"></component_4> 77 <component_4 title="This is prop4_3"></component_4> 78 <!--每個元件只能有一個根目錄， 79 當想傳入多個數據時，可將資料以陣列形式寫入data內， 80 用v-for遍歷，v-bind繫結陣列，之後在元件中的props呼叫 81 元件中的資料就可以呼叫data中陣列的值 82 --> 83 <component_5 v-for="post in posts1" :keys="post.id" :title="post.value" ></component_5> 84 <component_6 v-for="post in posts2" :key="post.id" :post="post"></component_6> 85 <!--可直接寫入屬性，如類，樣式 86 87 --> 88 <component_7 class="this" style="color:blue"></component_7> 89 </div> 90 <script> 91 Vue.component('component_4',{ 92 props:['title'], 93 template:'<h2>{{title}}</h2>' 94 }) 95 Vue.component('component_5',{ 96 props:['title','keys'], 97 template:'<h2>This is {{keys}} No.{{title}}</h2>' 98 }) 99 Vue.component('component_6',{ 100 props:['post'], 101 template:'<h2>this is {{post.id}} , No.{{post.value}}</h2>' 102 }) 103 Vue.component('component_7',{ 104 // 如不想繼承元件的屬性，可使用：inheritAttrs:flase 105 template:'<h2>this is Component_7</h2>' 106 }) 107 new Vue({ 108 el:"#app2", 109 data:{ 110 posts1:[ 111 {id:'5-1',value:'prop5_1'}, 112 {id:'5-2',value:'prop5_2'}, 113 {id:'5-3',value:'prop5_3'} 114 ], 115 posts2:[ 116 {id:'6-1',value:'prop6_1'}, 117 {id:'6-2',value:'prop6_2'}, 118 {id:'6-3',value:'prop6_3'} 119 ] 120 } 121 }) 122 </script> 123 </div> 124 </body> 125 </html>