>实现效果  >实现步骤: 1. 注册vue组件 2. 创建vue对象，使用组件 3. 根据需要，在组件中定义方法和data >html代码 ``` <div id="app"> <!-- 引用组件 --> <like></like> </div> <!-- 创建组件模板：id:like-component --> <template id="like-component"> <button @click="toggle_like" :class='{liked}'>👍{{like_count}}</button> </template> ``` >js代码 ``` /* 注册vue组件 */ /* 组件名：like 组件模板id: like-component */ Vue.component('like', { template: '#like-component', /* 利用函数return动态数据 */ data: function(){ return { /* 点赞数 */ like_count: 10, /* 点赞状态 */ liked: false } }, methods: { /* 创建方法取反liked状态，动态渲染点赞数 */ toggle_like(){ if(!this.liked){ this.like_count++; }else{ this.like_count--; } this.liked = !this.liked; } } }) new Vue({ el: '#app' }) ``` >css代码 ``` .liked { background-color: pink; } ```