vue组件中的data与methods

来源:博客园 分类: 文章浏览史 发布时间:2020-09-12 17:22:19 最后更新:2020-09-12 浏览:77
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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>
复制代码

  效果图

 

php技术微信