vue组件中的data与methods

来源:博客园分类: 文章浏览史发布时间:2020-09-12 17:22:19 最后更新:2020-09-12 浏览:1003

转载声明：

本文为摘录自“博客园”，版权归原作者所有。

原文链接:

https://www.cnblogs.com/angle-xiu/p/11728553.html

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-09-12 17:22:19

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

　　效果图