>實現效果  >實現步驟: 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; } ```