初识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>

 

posted @ 2017-12-27 13:07  Angel爽  阅读(310)  评论(0)    收藏  举报