黑马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.16 - 3Sum Closest
题面 Given an array nums of n integers and an integer target, find three integers in nums such that th ...
- CSS3 filter滤镜
其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...
- Spark学习笔记2——RDD（上）
目录 Spark学习笔记2--RDD(上) RDD是什么? 例子 创建 RDD 并行化方式 读取外部数据集方式 RDD 操作 转化操作 行动操作 惰性求值 Spark学习笔记2--RDD(上) 笔记摘 ...
- pythoth 中常用的魔法方法
Python魔法方法(magic method),顾名思义,魔法总是带有一些神奇色彩,就跟魔术似的.它也是有自己的规律,在这里或者说规则更合适一些. 魔法方法有一个非常鲜明的特征,就是总是被双下划线所 ...
- excel单元格数据与文本框数据同步
Private Sub Worksheet_SelectionChange(ByVal Target As Range) ActiveSheet.Shapes().TextFrame2.TextRan ...
- 面对runc逃逸漏洞，华为云容器为您保驾护航
背景信息 基于runc运行时的容器存在安全漏洞,攻击者可以通过恶意容器镜像等方式获取宿主机root执行权限.漏洞CVE-2019-5736的详细信息,请参见 https://cve.mitre.org ...
- 【NOIP/CSP2019】D2T1 Emiya 家今天的饭
这个D2T1有点难度啊 原题: 花了我一下午的时间,作为D2T1的确反常 条件很奇怪,感觉不太直观,于是看数据范围先写了个暴力 写暴力的时候我就注意到了之前没有仔细想过的点,烹饪方式必须不同 虽然a很 ...
- ASP.NET Core 2.0身份和角色管理入门
见 https://blog.csdn.net/mzl87/article/details/84892916 https://www.codeproject.com/Articles/1235077 ...
- Linux-删除文件空间不释放问题解决
场景描述: 收到zabbix监控报警,晋中生产机器出现磁盘空间不足报警. 远程到该服务器,排查占员工磁盘空间的原因,发现tomcat日志过多,于是清除3天前的日志. 日志清理后,发现磁盘空间没有释放, ...
- jQuery序列化乱码解决
query之提交序列化表单(serialize)及乱码处理1 提交乱码处理JSP文件声明如下 <%@ page language="java" pageEncoding=&q ...