黑马vue---61、为什么vue组件的data要是一个函数

一、总结

一句话总结：

因为js中以函数为变量作用域，所以这样可以保证每个组件的数据不互相影响

二、why components data must be a function

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="./lib/vue-2.4.0.js"></script>

 </head>

 <body>

   <div id="app">

     <counter></counter>

     <hr>

     <counter></counter>

     <hr>

     <counter></counter>

   </div>

   <template id="tmpl">

     <div>

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

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

     </div>

   </template>

   <script>

     var dataObj = { count: 0 }

     // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1

     Vue.component('counter', {

       template: '#tmpl',

       data: function () {

         // return dataObj

         return { count: 0 }

       },

       methods: {

         increment() {

           this.count++

         }

       }

     })

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 </html>
 

黑马vue---61、为什么vue组件的data要是一个函数的更多相关文章

  1. vue学习笔记之：为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  2. vue组件中data是个函数

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

  3. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

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

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

  5. 【Vue】淘气三千问之 data为什么是函数而不是对象？这河狸吗

    朋友,当你提出以上问题的时候建议你先去复习下原型链的知识 但是我好人做到底直接就讲了吧,我们先看一下下面的这段代码: function Component () { this.data = this. ...

  6. Vue 组件 data为什么是函数？

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  7. [Vue]组件——组件的data 必须是一个函数

    普通的Vue实例data是一个对象: data: { count: 0 } 组件的data是一个方法: data: function () { return { count: 0 } } 详情见官网: ...

  8. Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

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

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

随机推荐

  1. vue 2.0+ 怎么写本地接口获取数据

    在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图: 找到文件后添加下面的内容,写在头部: //这是 webpack.dev.conf ...

  2. 简单注册表单--HTML练手项目3【Table】

    [本文为原创,转载请注明出处] 技术[HTML]   布局[Table] 步骤1  划分table布局 步骤2 填充内容 文本框+密码框+单选框+复选框+多行文本域+按钮 <input> ...

  3. Python 基础问题大全

    前言 Python现在依托大数据,AI人工智能等等这些最火的项目,俨然已经成为了当下最火的一门编程语言之一. 所以,近来也是有非常非常多的工程师来进修python这么语言. 但是实际上,对于0代码基础 ...

  4. K2 工作流_【解决方案】车企CAL应用解决方案，攻克新车质检环节管理难题_全球领先的工作流引擎

    ​ 截止去年,中国已连续第九年成为全球最大汽车市场,与此同时关于乘用车新车售前检查(PDI)相关的诉讼纠纷案件也逐年呈上升趋势(PDI全称为Pre-Delivery Inspection,是经销商对乘 ...

  5. iframe内嵌页面——跨域通讯

      <template> <div class="act-form"> <iframe :src="src" ref=" ...

  6. windows系统编辑过的脚本文件，在linxu上执行报错 /bin/sh^M: bad interpreter: No such file or directory

    如题! 现象: 当时的场景是这样的:我在IDEA中编辑了项目中的脚本sh,然后利用maven打成zip包.把zip包上传到linux服务器解压运行. 当在linux服务器上运行该sh脚本文件时,提示错 ...

  7. Endless looping of packets in TCP/IP networks (Routing Loops)

    How endless looping of packets in a TCP/IP network might occur? Router is a device used to interconn ...

  8. ACM-ICPC 2018 青岛赛区现场赛 D. Magic Multiplication && ZOJ 4061 （思维+构造）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4061 题意:定义一个长度为 n 的序列 a1,a2,..,an ...

  9. 配置IIS使其支持APK文件的下载

    在管理工具里打开Internet 信息服务(IIS)管理器.然后选择需要配置的网站. 右侧的界面中会显示该网站的所有功能配置,我们选择并点击进入“MIME类型”   在左侧的操作区选择点击“添加”MI ...

  10. POJ-1661-Help Jimmy(DP, 递推)

    链接: https://vjudge.net/problem/POJ-1661 题意: "Help Jimmy" 是在下图所示的场景上完成的游戏. 场景中包括多个长度和高度各不相同 ...