初识vue.js,我的学习之路(四)
vue中的组件
什么是组件:
1、扩展HTML元素
2、重用性
3、可以实现特殊的功能
通过Vue.component来定义全局组件,第一个参数是组件名称,第二个参数是一个对象,template属性里面放的是组件内容,通过在id为app的div里面放入组件名称的标签来显示出组件的内容。
1 <div id="app"> 2 3 <zhangsan></zhangsan> 4 5 </div> 6 7 <script src="vue.js"></script> 8 <script> 9 Vue.component("zhangsan",{ 10 11 template:"<h1>这是一个全局组件</h1>" 12 13 }); 14 new Vue({ 15 el:"#app" 16 }); 17 </script>
也可以将组件单拎出来赋给一个变量,里面可以写数据也可以写方法。组件中的data是一个函数,返回的必须是一个对象,这点要注意!
1 <div id="app"> 2 3 <zhangsan></zhangsan> 4 </div> 5 6 <script src="vue.js"></script> 7 <script> 8 var tpl = { 9 data:function(){ 10 return{ 11 str:"===这是数据了===" 12 } 13 }, 14 template:"<div @click='run'>这是一个组件{{str}}</div>", 15 methods:{ 16 run:function(){ 17 18 alert(1); 19 } 20 21 } 22 }; 23 Vue.component("zhangsan",tpl); 24 25 new Vue({ 26 el:"#app", 27 data:{ 28 29 } 30 }) 31 32 33 34 </script>
也可将new出来的vue对象当作是父组件,里面的都是子组件。
1 <div id="app"> 2 3 <lisi></lisi> 4 <lisi></lisi> 5 <lisi></lisi> 6 <lisi></lisi> 7 8 <wangwu></wangwu> 9 <wangwu></wangwu> 10 <wangwu></wangwu> 11 12 </div> 13 14 <script src="vue.js"></script> 15 <script> 16 17 new Vue({ //父组件 18 el:"#app", 19 components:{ 20 21 "lisi":{ 22 template:"<div @click='run'>这是局部组件(子组件){{str}}</div>", 23 data:function(){ 24 return{ 25 str:123 26 } 27 }, 28 methods:{ 29 run:function(){ 30 alert(1); 31 } 32 } 33 34 }, 35 "wangwu":{ 36 37 template:"<h3>这是王五组件</h3>" 38 39 } 40 41 42 } 43 44 }) 45 </script>