Vue——组件配置实例

点赞功能小例子

HTML

<div id = 'app'>
    <like></like>
</div>

JS
Vue.component('like',{
    template: '<button @click="toggle_like()">赞 {{like_count}}</button>',
    data: function(){
        return {
            like_count: 10,  //存储已点赞次数
            liked:false,    //存储点赞状态
        }
    },
    methods: {
        toggle_like (){
            //如果没有点过赞，次数+1
            if(!this.liked){
                this.like_count++;
                this.liked = true; //更改点赞状态
            }
                //否则，次数-1
            else{
                this.like_count--;
            }
        }
    }
})

new Vue({
    el:'#app'
})

template里面的东西太多了，而且本来是html片段，可以把它放到html文档里。

html文档里，使用template创建一个标签，设定一个id。

js文档里，template绑定该id。

<template id = "like-component">
    <button @click="toggle_like()">
        赞 {{like_count}}
    </button>
</template>



template: '#like-component' ,