Vue 组件创建 组件中的data和methods

<div id="app">
    <counter></counter>
</div>

<template id="tmpl">
    <div>
        <input type="button" value="+1" @click = "increment">
        <h3>{{ count }}</h3>
    </div>
</template>
<script>
    Vue.component('counter',{
        template: 'tmpl',
        data: function () {
            return { count: 0}
        },
        methods: {
            increment() {
                this.count++
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>

总结

1. 组件可以有自己的data数据
2. 组件的data和实例的data区别在于，实例中的data可以为一个对象，但组件中的data必须是一个方法
3. 组件中的data除了必须为一个方法之外，方法内部还必须返回一个对象
4. 组件中的data数据使用方式和实例中的data使用方式完全一样