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

一、总结

一句话总结：

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

二、why components data must be a function

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.    <meta charset="UTF-8">
  6.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.    <title>Document</title>
  9.    <script src="./lib/vue-2.4.0.js"></script>
  10.  </head>
  11.  
  12.  <body>
  13.    <div id="app">
  14.      <counter></counter>
  15.      <hr>
  16.      <counter></counter>
  17.      <hr>
  18.      <counter></counter>
  19.    </div>
  20.  
  21.    <template id="tmpl">
  22.      <div>
  23.        <input type="button" value="+1" @click="increment">
  24.        <h3>{{count}}</h3>
  25.      </div>
  26.    </template>
  27.  
  28.    <script>
  29.      var dataObj = { count: 0 }
  30.  
  31.      // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  32.      Vue.component('counter', {
  33.        template: '#tmpl',
  34.        data: function () {
  35.          // return dataObj
  36.          return { count: 0 }
  37.        },
  38.        methods: {
  39.          increment() {
  40.            this.count++
  41.          }
  42.        }
  43.      })
  44.  
  45.      // 创建 Vue 实例，得到 ViewModel
  46.      var vm = new Vue({
  47.        el: '#app',
  48.        data: {},
  49.        methods: {}
  50.      });
  51.    </script>
  52.  </body>
  53.  
  54.  </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. ajax请求的五个步骤

    创建XMLHttpRequest异步对象 var xhr = new XMLHttpRequest() 设置回调函数 xhr.onreadystatechange = callback 使用open方 ...

  2. MySQL Windows安装连接

    1.首先进入mysql的安装目录下的bin目录,例如我的是[C:\WINDOWS\System32\cmd.exe]   2.接着输入cmd,回车     3.在命令行中输入命令[mysql -hlo ...

  3. apk签名文件生成

    一.生成签名文件 命令: keytool -genkey -v -keystore 签名文件名称.keystore -alias 签名文件别名 -keyalg RSA -keysize 2048 -v ...

  4. JDK8 dockerfile

    # AlpineLinux with a glibc-2.28-r0 and Oracle Java 8FROM hub.devops.docker.com/library/alpine-glibc: ...

  5. python学习笔记：建立一个自己的搜索引擎

    写学习笔记是我学习python以来养成的一个习惯,每学习一个知识点,便整理成文字记录下来.搜索引擎大家经常都有在使用,国内外也很很多搜索引擎平台. Google搜索引擎建立至今已经快20年了,之后全球 ...

  6. Jupyter Notebook 插件安装

    刚才安装notebook插件jupyter_contrib_nbextensions,搜了很多教程都没有作用.直到用了这个命令,一行解决. pip install jupyter_contrib_nb ...

  7. Maven生命周期——2

    Maven牛人说-Maven生命周期 http://juvenshun.iteye.com/blog/213959 Maven的三套生命周期: Clean Lifecycle 在进行真正的构建之前进行 ...

  8. Jupyter的学习

    一 .Jupyter中的魔术命令 %load test.py  :”可以将test.py 中的文件加载到jupyter框中 %matplotlib inline :可以将Matplotlib 的结果嵌 ...

  9. spring replaced method 注入

           replaced method注入是spring动态改变bean里方法的实现.需要改变的方法,使用spring内原有其他类(需要继承接口org.springframework.beans ...

  10. 大数据之路week05--day01（JDBC 初识）

    一.概述 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写 ...