vue组件中的data与methods

时间 2019-11-08
标签 vue 组件 data methods 繁體版
原文原文链接
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <mycom></mycom>
        <counter></counter>
    </div>
    <template id="temp">
        <div>
            <input type="button" value="+1" @click="increment">
            {{count}}
        </div>
    </template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    //组件中的data和实例中的不同，实例中的data是一个对象，而组件中的data则是一个方法而且返回一个对象
    Vue.component("mycom", {
        template: "<h3>{{msg}}，这是一个组件</h3>", //引用时与实例一致
        data: function () {
            return { //返回对象是为了区分各个组件中的数据，由于不一样组件返回的对象的地址都不一致因此不会产生影响
                msg: "hello" //组件中定义的数据
            }
        }
    })
    //添加一个增值函数
    Vue.component("counter", {
                template:"#temp",
                data: function () {
                    return {
                        count: 0
                    }
                },
                methods: {
                    increment() {
                        this.count++
                    }
                }
            }); 
                let vm = new Vue({
                el: "#app",
                data: {

                }
            });
</script>

</html>
　　效果图html