[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> ~~~