vue组件中的data与methods
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
</head> <body>
<div id="app">
<mycom></mycom>
<counter></counter>
</div>
<template id="temp">
<div>
<input type="button" value="+1" @click="increment">
{{count}}
</div>
</template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
//组件中的data和实例中的不一样，实例中的data是一个对象，而组件中的data则是一个方法并且返回一个对象
Vue.component("mycom", {
template: "<h3>{{msg}}，这是一个组件</h3>", //引用时与实例一致
data: function () {
return { //返回对象是为了区分各个组件中的数据，因为不同组件返回的对象的地址都不一致所以不会产生影响
msg: "hello" //组件中定义的数据
}
}
})
//添加一个增值函数
Vue.component("counter", {
template:"#temp",
data: function () {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
});
let vm = new Vue({
el: "#app",
data: { }
});
</script> </html>
效果图
vue组件中的data与methods的更多相关文章
- 黑马vue---59-60、组件中的data和methods
黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 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属性专门用来以对象方式存放数据,它有两种用法. 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或methods
1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法
随机推荐
- centos6的kibana7.1无法启动报错 FATAL Error: /lib64/libc.so.6: version `GLIBC_2.14' not found 升级glibc的问题处理
centos6的kibana7.1无法启动报错 FATAL Error: /lib64/libc.so.6: version `GLIBC_2.14' not found 升级glibc的问题处理 ...
- ISO/IEC 9899:2011 条款6.5.9——相等操作符
6.5.9 相等操作符 语法 1.equality-expression: relational-expression equality-expression == relational- ...
- maven项目中，添加依赖后，出现"Dependency 'xxxx‘ not found"解决过程
转自:https://blog.csdn.net/lixld/article/details/82284269 idea中修改pom.xml文件,添加各种工程依赖的jar,一直没有问题, 但今天遇到问 ...
- CVAE-GAN论文学习-1
CVAE-GAN: Fine-Grained Image Generation through Asymmetric Training 摘要 我们提出了一个变分生成对抗网络,一个包含了与生成对抗网络结 ...
- Closing the Sim-to-Real Loop: Adapting Simulation Randomization with Real World Experience
Closing the Sim-to-Real Loop: Adapting Simulation Randomization with Real World Experience 模拟到实际循环闭环 ...
- bind智能DNS + bindUI管理系统（postgresql + bind dlz）
# 软件环境: * Centos 7.6 * bind-9.14.1.tar.gz * postgresql 11 * python 3.7 * django 2.2.1 QPS:单节点1590 qp ...
- (?:pattern) 与 (?=pattern)的区别
共同点 (?:pattern) 与 (?=pattern)都匹配pattern,但不会把pattern结果放到Matches的集合中. 区别 (?:pattern) 匹配得到的结果包含pattern. ...
- 常用OID(SNMP)
系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...
- Pycharm一些额外使用笔记
(1)关于调试的一个小技巧: 在上面下栏的调试界面中可以修改变量a的值: (2)指定参数执行脚本: 第一步在run中指定edit configuration,然后在Parameters中指定训练的参数 ...
- 关于PF_INET和AF_INET的区别
在写网络程序的时候,建立TCP socket: sock = socket(PF_INET, SOCK_STREAM, 0);然后在绑定本地地址或连接远程地址时需要初始化sockaddr_in结构 ...