黑马vue---61、为什么vue组件的data要是一个函数
黑马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要是一个函数的更多相关文章
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue组件中data是个函数
当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- 怎样理解 Vue 组件中 data 必须为函数 ?
组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...
- 【Vue】淘气三千问之 data为什么是函数而不是对象？这河狸吗
朋友,当你提出以上问题的时候建议你先去复习下原型链的知识 但是我好人做到底直接就讲了吧,我们先看一下下面的这段代码: function Component () { this.data = this. ...
- Vue 组件 data为什么是函数？
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- [Vue]组件——组件的data 必须是一个函数
普通的Vue实例data是一个对象: data: { count: 0 } 组件的data是一个方法: data: function () { return { count: 0 } } 详情见官网: ...
- Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
随机推荐
- MySQL: Can’t connect to MySQL server on (111 “Connection refused”)
1. Mysql连接问题 远程访问mysql或者通过docker访问宿主机mysql经常会碰到下面的问题: Can't connect to MySQL server on (111 "Co ...
- B树Java代码实现以及测试
B树定义 B 树又叫平衡多路查找树.一棵m阶的B 树 (m叉树)的特性如下: 根节点至少有两个孩子 每个非根节点至少有M/2(上取整)个孩子,至多有M个孩子. 每个非根节点至少有M/2-1(上取整)个 ...
- MyBatis-Spring 之SqlSessionFactoryBean
要创建工厂 bean,放置下面的代码在 Spring 的 XML 配置文件中: <bean id="sqlSessionFactory" class="org.my ...
- flask中重定向所涉及的反推：由视图函数反推url
flask中重定向所涉及的反推:由视图函数反推url 例如有视图index() 反推 url的/default # -*- coding: utf-8 -*- from flask import Fl ...
- 转：IDEA中如何使用debug调试项目 一步一步详细教程
原文链接:http://www.yxlzone.top/show_blog_details_by_id?id=2bf6fd4688e44a7eb560f8db233ef5f7 在现在的开发中,我们经常 ...
- MVC方式使用EasyUI - 搭建环境
_Layout.cshtml <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ ...
- MySQL sql_mode 说明（及处理一起 sql_mode 引发的问题）
1. MySQL莫名变成了 Strict SQL Mode 最近测试组那边反应数据库部分写入失败,app层提示是插入成功,但表里面里面没有产生数据,而两个写入操作的另外一个表有数据.因为 insert ...
- 浅谈angularJs
在家都知道,angular 可以实现双项数据绑定,其中它的占位符是{{}},他是是MVC数据分离, 首先要在<html>或<body>中建一个<body ng-app=& ...
- nginx添加模块记录
查看现有nginx的编译参数: [root@iZbp1d0dkjhfmxnxp7wuhmZ nginx-1.12.2]# nginx -Vnginx version: nginx/1.12.2buil ...
- Windows Media Player播放视频导致程序闪退
在有的电脑上发现,使用Windows Media Player组件播放视频导致程序闪退. 发现是显卡问题,独立显卡换成集成显卡 解决: 打开显卡控制面板->管理3D设置->集成图形-> ...