黑马vue---59-60、组件中的data和methods
黑马vue---59-60、组件中的data和methods
一、总结
一句话总结：
1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
1、组件数据使用实例？
template: '<h1>这是全局组件 --- {{msg}}</h1>'
Vue.component('mycom1', {
template: '<h1>这是全局组件 --- {{msg}}</h1>',
data: function () {
return {
msg: '这是组件的中data定义的数据'
}
}
})
二、组件中的data和methods
<!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 可以为一个对象,但是 组件中的 data 必须是一个方法
// 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
// 4. 组件中 的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---59-60、组件中的data和methods的更多相关文章
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- vue 父组件使用子组件中的data或methods
1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 第六章 组件 56 组件-组件中的data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-为什么子组件中的data选项必须是函数？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Array + two points leetcode.18 - 4Sum
题面 Given an array nums of n integers and an integer target, are there elements a, b, c, and d in num ...
- log4j日志properties配置
#Console Log log4j.rootLogger=INFO,console,debug,info,warn,error LOG_PATTERN=[%d{yyyy-MM-dd HH:mm:ss ...
- MySQL在command line Client下的一些命令
MySQL在command line Client下的一些命令 通过CMD进入到本地数据库: mysql -h localhost -u -root -p 参数说明: -h 要连接的服务器的主机名或I ...
- Atollic TrueSTUDIO编译选项-优化设置
最近在玩stm32f407,比较懒,就直接使用Atollic TrueSTUDIO,官方版本,还免费,但是编译后,一直感觉代码添加了优化,语句执行顺序和代码不一致,在线调试时,有些变量的数值被优化了, ...
- 2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 J Beautiful Numbers (数位DP)
2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 J Beautiful Numbers (数位DP) 链接:https://ac.nowcoder.com/acm/contest/163/ ...
- 大数据之路week05--day02（Maven安装，环境变量的配置及基本使用）
今天我们就来学习一下maven,怎么说呢,maven更像是一种管理的工具,实现的原理是使用插件. 举个例子,比如说,一个公司需要做一个项目,这个项目又分成了很多的模块,每个模块又分成了许多的业务等等, ...
- Entity Framework二、 模型优先 ,ObjectContext类
https://www.cnblogs.com/ejiyuan/archive/2009/05/27/1490786.html 1.ObjectContext 封装.NET Framework和数据库 ...
- BZOJ 4318 OSU! (概率DP)
题意 中文题面,难得解释了 题目传送门 分析 考虑到概率DPDPDP,显然可以想到f(i,j)f(i,j)f(i,j)表示到第iii位末尾有jjj个111的期望值.最后输出f(n+1,0)f(n+1, ...
- 「ZJOI2014」力 FFT
FFTl裸题,小于的部分直接做,大于的部分倒序后再做就行了. #include <bits/stdc++.h> using namespace std; const int MAXN = ...
- date对象获取get
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...