[TOC] ### 1. 先new 一個 vue ~~~ new Vue({ el: '#app', }) ~~~ ### 2. 創建組件 ~~~ like為組件的名字 Vue.component('like', { template: "" 作用域 data: function () { return { } methods: { } }） ~~~ ### 3. 創建模板 ~~~ <template id="like-component"> <button @click="toggle_like()" :class="{liked}">??{{like_count}}</button> </template> ~~~ ### 4. 在html中使用組件 ~~~ <like></like> ~~~ ### 5. 根據點贊特性在組件中方法中定義響應的方法 ~~~ methods: { toggle_like: function () { if(!this.liked){ this.like_count++; }else{ this.like_count--; } this.liked=!this.liked } ~~~ ### 6. 設置樣式 ~~~ true{ background: red; } ~~~ ### 代碼展示 ~~~ <div id="app"> <like></like> </div> <template id="like-component"> <button @click="toggle_like()" :class="{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> ~~~