<body>

        <div id="app">

            <counter></counter>

        </div>

        <template id="temp1">

            <div>

                <input type="button" value="+1" @click="increment">

                <h3>{{count}}</h3>

            </div>

        </template>

        <script type="text/javascript">

            var dataObj = {count: 0};

            Vue.component('counter',{

                template:'#temp1',

                data(){

                    return dataObj

                },

                methods:{

                    increment() {

                        this.count++

                    }

                }

            })

            var vm = new Vue({

                el: "#app",

                data:{},

                methods: {}

            })

        </script>

    </body>

分析如上代码：

1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错

2、在浏览器中运行代码

每次点击+1按钮，下边的值就会加一

3、如果我们在页面上同时使用三个counter组件

<div id="app">

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

 </div>

然后在浏览器中再次浏览

点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改

data: function (){

    //return dataObj

    return{

        count：0

    }

},

vue组件中data为什么必须是个函数的更多相关文章

  1. vue组件中data为什么必须是一个函数？

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  2. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  3. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  4. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

  6. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  8. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

随机推荐

  1. centos 7 selinux开启关闭

    1 查看selinux状态 [root@localhost ~]# sestatus SELinux status: disabled 2 关闭 零时关闭 [root@localhost ~]# se ...

  2. JavaScript中编码函数escape,encodeURI,encodeURIComponent

    第一:escape():对字符串进行编码,escape()不编码的字符:@*/+ 第二:encodeURI() 函数可把字符串作为 URI 进行编码.不会进行转义的:;/?:@&=+$,# 第 ...

  3. docker容器安装vi （一般容器都是Debian GNU/Linux 9）

    在使用docker容器时,同时你docker里的系统正好是debian或ubuntu的时候,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要 ...

  4. [POI2015]PUS

    嘟嘟嘟 这题只要往正确的方面想,就很简单. 首先,这是一道图论题! 想到这,这题就简单了.对于两个数\(i\)和\(j\),如果\(i\)比\(j\)大,就从\(i\)向\(j\)连边.然后如果图中存 ...

  5. spring boot 自定义sql分页查询

    1.自定义sql查询分页 @Override public <T> Page<T> pageSQL(@Nonnull String sql, @Nonnull Pageable ...

  6. nginx基础之【study one】

    Nginx是种代理服务器,即可以作为反向代理服务器.邮件服务器等HTTP服务器,支持很多第三方模块扩展,如GZip.SSL.FastCGI. 最常用的功能有Http反向代理.负载均衡和Web缓存: 1 ...

  7. C#-之属性（1）

    1. 属性定义方式与字段类似,但还包括Set和Get两个访问器,其格式如下: public/private <type> Name { get { return variable:    ...

  8. Django（六）Session、CSRF、中间件

    大纲 二.session 1.session与cookie对比 2.session基本原理及流程 3.session服务器操作(获取值.设置值.清空值) 4.session通用配置(在配置文件中) 5 ...

  9. linux 上 mysql 的使用

    1.登录mysql 第一次登录 没有密码 可以直接输入 mysql 有密码可以使用  mysql -u root -p  回车会提示需要输入密码  -u 用户名 -p 密码 这个mysql文件在/us ...

  10. mysql和mariadb备份工具xtrabackup和mariabackup（mariadb上版本必须用这个）

    简介 xtraBackup(PXB) 工具是 Percona 公司用 perl 语言开发的一个用于 MySQL 数据库物理热备的备份工具,支持 MySQl(Oracle).Percona Server ...