实现效果

实现步骤:

1. 注册vue组件
2. 创建vue对象，使用组件
3. 根据需要，在组件中定义方法和data

html代码

    
    
         
     
    
    
    复制代码

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;}复制代码

附：前端小demo系列会持续更新，这个系列会倾向于比较基础的demo，仅供交流学习，如果你喜欢的话，希望能点个赞哦