什么是组件：组件是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在组件之外是访问不到的，那么如果我想要获得组件里面的某个数据，我应该如何去做？
Vue.js 基础学习之组件
原文地址：http://www.cnblogs.com/huzhuo/p/7470048.html