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.方法
随机推荐
- DataSource接口 Connection pooling（连接池
一.DataSource接口是一个更好的连接数据源的方法: JDBC1.0是原来是用DriverManager类来产生一个对数据源的连接.JDBC2.0用一种替代的方法,使用DataSource的实 ...
- Game and Application Protocol
This privacy policy details the information collected by the team ("we" or "our" ...
- WebGL高级编程：开发Web3D图形 PDF（中文版带书签）
WebGL高级编程:开发Web3D图形 目录 WebGL简介11.1 WebGL基础11.2 浏览器3D图形吸引人的原因21.3 设计一个图形API31.3.1 即时模式API31.3.2 保留模式A ...
- lombok 插件安装使用
Lombok是一个Java库,它自动插入编辑器并构建工具,为Java添加香料.永远不要再编写另一个getter或Eques方法,您的类有一个功能齐全的构建器,可以自动化您的日志变量以及更多的注释. 官 ...
- ECOC 2019展会：以太网联盟公开展示其下一代网络100/200/400G互通测试能力，网络自动化测试能力再次被提出
欧洲光纤通讯展ECOC 2019正在火热进行,以太网联盟组织Ethernet Alliance在其公开展台演示了其下一代高速网络100G/200G/400G相关能力,其成员单位Cisco,Arista ...
- 模型-视图-控制器的C++解释
模型-视图-控制器 (MVC) 并非一种技术,而是软件设计/工程的一个概念.MVC包含三个组成部分,如下图所示 模型 模型直接响应对数据的处理,比如数据库.模型不应依赖其它组成部分,即视图或控制器,换 ...
- 微信小程序,内容组件中兼容的H5组件
受信任的HTML节点及属性 全局支持class和style属性,不支持id属性. 节点 属性 a abbr address article aside b bdi bdo ...
- Beginning Linux Programming 学习--chapter 11 Processes and Signals
What's process--什么是进程? The UNIX standards, specifically IEEE Std 1003.1, 2004 Edition, defines a pr ...
- PHP与Cookie
不管什么语言写的cookie,本质上没区别. cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PH ...
- 修改 ubuntu NTFS 文件系统下没有执行权限的问题
由于NTFS本身的特殊性,不能对其分区的文件权限进行修改,无论是sudo还是root都没有用. 安装以下两个插件解决问题: sudo apt-get install ntfs-3g //这个12.04 ...