vue组件中的data与methods

编程人生 发表于:2019-10-24 14:11 阅读: 106次

<!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>

  效果图

 

酷码派 [KuMaPai.COM] - 陕ICP备案证 18010024号-2