Vue快速学习笔记(3)Vue的组件

Vue中的组件

首先注册组件：

    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

需要一个组件名称和组件的代码模板，组件中的数据和Vue实例的数据不同，一个组件的data选项必须是一个函数。

定义模板

<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次！</button>
</template>

编写Vue实例，完整代码如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://suiyan.cc/assets/plugins/vue.js"></script>
<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次！</button>
</template>

<div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>

<script>
    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

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

</script>

如上，就可以实现一个全局的组件注册，可以重复使用。