15.Vue组件中的data
1.组件中展示数据和响应事件:
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象
// 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}
// 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 5. 组件中 的data 数据使用方式,和实例中的 data 使用方式完全一样!
代码实例：
<!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">
<mycom1></mycom1>
</div>
<script>
// 1. 组件可以有自己的 data 数据
// 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象
// 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}
// 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 5. 组件中 的data 数据使用方式,和实例中的 data 使用方式完全一样!!!
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
注意：
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
})
注意：组件中的 data 必须是一个方法 data: function(){}或者data(){}，这个方法内部,还必须返回一个对象才行：
为什么？
实例：
<!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:表示每个组件中data数据共享
return { count: 0 } //私有
},
methods: {
increment() {
this.count++
}
}
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
Vue组件中的method,见上面代码
15.Vue组件中的data的更多相关文章
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- 为什么vue组件中的data不是一个对象而是一个函数
如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...
- Vue组件中的Data为什么是函数。
简单点说,组件是要复用的,在很多地方都会调用. 如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
随机推荐
- Egret入门学习日记 --- 第十七篇（书中 7.4~8.2节 内容）
第十七篇(书中 7.4~8.2节 内容) 昨天看到 7.3 节,那么今天. 开始 7.4节. 好吧,这些其他的服务器运行知识,就不搞了... 至此,7.4节 内容结束. 开始 7.5节 内容. ...
- 【POJ - 2010】Moo University - Financial Aid（优先队列）
Moo University - Financial Aid Descriptions 奶牛大学:奶大招生,从C头奶牛中招收N(N为奇数)头.它们分别得分score_i,需要资助学费aid_i.希望新 ...
- Eclipse启动时报错Java was started but returned exit code=13
Eclipse启动时报错Java was started but returned exit code=13 如图所示 原因是通过第三方更新JRE时,第三方安装的是32位的JRE,与64位的eclip ...
- opencv根据摄像头名称获取索引值
OpenCV的VideoCapture是一个视频读取与解码的API接口,支持各种视频格式.网络视频流.摄像头读取. 针对一般摄像头的读取,opencv为了实现跨平台读取摄像头时是使用的摄像头索引, V ...
- [转帖]8个优秀Docker容器监控工具，收藏了
8个优秀Docker容器监控工具,收藏了 Docker是目前使用最广泛的容器之一,但它并不总是像物理硬件一样可见.而使用docker容器监控工具有助于消除这种透明度的缺失.以下介绍8种优秀Docker ...
- HTML 是什么？
HTML 指的是超文本标记语言(英语:HyperText Markup Language),是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言,它有一套标记标签 . HTML 使 ...
- WEBservice的浏览器及元素的常用函数及变量整理总结 （selenium ）
由于网页自动化要操作浏览器以及浏览器页面元素,这里笔者就将浏览器及页面元素常用的函数及变量整理总结一下,以供读者在编写网页自动化测试时查阅. from selenium import webdrive ...
- Hystrix的介绍（断路、降级）
在大中型分布式系统中,通常系统很多依赖(HTTP,hession,Netty,Dubbo等),如下图: 在高并发访问下,这些依赖的稳定性与否对系统的影响非常大,但是依赖有很多不可控问题:如网络 ...
- 20191011-构建我们公司自己的自动化接口测试框架-Util的getTestSuite模块
getTestSuite主要是用于在testData里面获取测试集以及对应的测试数据,包括2个主要的方法,一个是获取测试集,一个是获取测试集里面要执行的测试用例 获取测试集方法: from Util. ...
- MyBatis_02 框架
今日内容 动态SQL语句 Xml方式 注解方式 MyBatis的缓存 MyBatis的关联查询 MyBatis逆向工程 动态SQL语句 动态SQL是什么 就是相对与固定SQL.就是通过传入的参数不一样 ...