Vue.js 基础学习之组件

 什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

创建全局组件

<div id="seg1">
        <alert></alert>
    </div>
    <div id="seg2">
        <alert></alert>
    </div>

Vue.component('alert',{
        template : '<button @click="on_click">点我</button>',
        methods : {
            on_click : function(){
                alert("good");
            }
        },
    });
    new Vue({
        el : '#seg1',
    });
    new Vue({
        el : '#seg2',
    })

这个组件的作用是在目标中添加一个Button，当点击这个Button时，alert出一个good。由于是全局组件，所以只要是new Vue出来的都可以使用

也可以将创建与注册分开，

先用Vue.rxtend创建一个组件

var myComponent = Vue.extend({
        template : '<button @click="on_click">点我</button>',
        methods : {
            on_click : function(){
                alert("good");
            },
        },
    });

然后注册

Vue.component('alert',myComponent);

分开会让人看起来更清晰

 

接下来是局部组件的创建

new Vue({
        el : '#app',
        components :{
            alert :{
                template : '<button @click="on_click">点我</button>',
                methods : {
                on_click : function(){
                    alert("good");
            },
        },
        },
        } 
    })

这时，这个组件就只能在app中使用了

接下来我们用组件做一个点赞的button，当button点击第一下点赞数就加一，再点击一下，点赞数就减一

new Vue({
         el : '#app',
         components : {
             like : {
                 template : '<button @click="on_click">赞{{like_counts}}</button>',
                 data : function(){
                     return {
                         like_counts : 10,
                         liked : false,
                     };
                 },
                 methods : {
                     on_click : function(){
                         if(!this.liked){
                             this.like_counts += 1;
                             this.liked = !this.liked;
                         }
                         else{
                             this.like_counts -= 1;
                             this.liked = !this.liked;
                         }

                     }
                 },

             }
         }
     });

在app中加入一个like标签

<div id="app">
        <like></like>
    </div>

这样，初始点赞数为10，点击一下点赞数为11，再点击一下点赞数又为10，我们还可以为其添加一个样式，在点赞时让button变成pink色

首先给这个button绑定class

template : '<button :class="{liked : liked}" @click="on_click">赞{{like_counts}}</button>',

这个class中的第一个liked为类名，第二个liked为data中的liked，这里的意思是当第二个liked值为true时，给这个类加上第一个liked类

然后在样式用加入这个类的样式

<style>
        .liked {
            background-color: pink;
        }
    </style>

这样我们的一个点赞按钮就完成了。

这里我有一个困惑，组件之内的data在组件之外是访问不到的，那么如果我想要获得组件里面的某个数据，我应该如何去做？