• 基本示例

    基本示例

    这里有一个 Vue 组件的示例：

    1. // 定义一个名为 button-counter 的新组件
    2. Vue.component('button-counter', {
    3.   data: function () {
    4.     return {
    5.       count: 0
    6.     }
    7.   },
    8.   template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    9. })

    组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

    1. <div id="components-demo">
    2.   <button-counter></button-counter>
    3. </div>
    1. new Vue({ el: '#components-demo' })

    基本示例 - 图1

    因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。