[TOC]
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
```
## 思路步驟
### 1.先生成一個組件 將組件放入html頁面中
```
<div id="app"></div>
Vue.component('like',{
template:'<button>??2</button>'
})
new Vue({
el:'#app'
)}
// div中加入
<like></like>
```
### 2. 建立一個data 存儲點贊數
```
data: function(){
return{
like_count:10,
}
}
//相應的button改為
<button >??{{like_count}}</button>
```
### 3.增加點擊事件 @click="toggle_like"
```
<button @click="toggle_like" >??{{like_count}}</button>
//組里增加點擊事件的方法
methods:{
toggle_like:function(){
this.like_count++
}
}
```
### 4.給點擊事件增加一個條件
```
data:function(){
return{
like_count:10,
liked:false,
}
}
toggle_like:function(){
//如果點贊就是liked為true
if(!this.liked){
this.like_count++
}else{
this.like_count--
}
this.liked=!this.liked
}
```
### 5.增加一個樣式 確定已點贊
```
:class='{like:liked}' if / liked為真添加like 為假除去like樣式
```
### 6.將組件用template標簽存放在html里 優化代碼
```
<template id="like-component">
<button @click="toggle_like">??{{like_count}}</button>
</template>
//Vue.component
template:'#like-component'
```
## 代碼塊
```
<div id="app">
<like></like>
</div>
<script>
Vue.component('like', {
template: '<button @click="toggle_like()" :class="{like:liked}">??{{like_count}}</button>',
data: function () {
return {
like_count: 10,
liked: false
}
},
methods: {
toggle_like: function () {
if(!this.liked){
this.like_count++;
}else{
this.like_count--;
}
this.liked=!this.liked
}
}
})
new Vue({
el: '#app',
})
</script>
```
## 優化代碼塊
```
<div id="app">
<like></like>
</div>
<template id="like-component">
<button @click="toggle_like()" :class="{like:liked}">??{{like_count}}</button>
</template>
<script>
Vue.component('like', {
template: '#like-component',
data: function () {
return {
like_count: 10,
liked: false
}
},
methods: {
toggle_like: function () {
if(!this.liked){
this.like_count++;
}else{
this.like_count--;
}
this.liked=!this.liked
}
}
})
new Vue({
el: '#app',
})
</script>
```
