Vue-组件(二)
组件的案例，可通过案例更好的学习组件
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>
