速记：粗浅的理解是，事件的结果是影响单个组件还是多个组件。因为大部分组件是要共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象

返回对象的时候

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title></title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

	<div id="components-demo3" class="demo">

		<button-counter2></button-counter2>

		<button-counter2></button-counter2>

		<button-counter2></button-counter2>

	</div>

	<script>

	Vue.component('button-counter2',{

		data:function(){

			return {

				count:0

			}

		},

		template:'<button v-on:click="count++">点击了{{count}}次</button>'

	})

	new Vue({

		el:'#components-demo3'

	})

	</script>

</body>

</html>



data直接返回值的时候

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title></title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

	<div id="components-demo3" class="demo">

		<button-counter2></button-counter2>

		<button-counter2></button-counter2>

		<button-counter2></button-counter2>

	</div>

	<script>

	buttonCounter2Data={

		count:0

	}

	Vue.component('button-counter2',{

		data:function(){

			return buttonCounter2Data

		},

		template:'<button v-on:click="count++">点击了{{count}}次</button>'

	})

	new Vue({

		el:'#components-demo3'

	})

	</script>

</body>

</html>

Vue中data返回对象和返回值的区别的更多相关文章

  1. 为什么在项目中data需要使用return返回数据呢？

    问:为什么在项目中data需要使用return返回数据呢? 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件.

  2. vue中如何实时修改输入的值

    vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...

  3. C++返回对象和返回引用

    我们发现,在C++中,有些成员函数返回的是对象,而有些函数返回的又是引用. 返回对象和返回引用的最主要的区别就是函数原型和函数头. Car run(const Car &)     //返回对 ...

  4. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  5. c++中返回对象与返回引用的区别

    这几天在做用C++做课程设计,对其返回对象的实现感到迷惑. 通过对汇编代码的分析,可以清楚的看到,直接返回引用和返回对象的区别到底是什么. 分析的程序如下 #include<cstdio> ...

  6. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  7. Vue中的循环以及修改差值表达式

    0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...

  8. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  9. vue中data中引用本地图片报错404

    首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...

随机推荐

  1. python之路--装饰器

    二 .通用装饰器的写法 python里面的动态代理. 存在的意义: 在不破坏原有的函数和原有函数的调用基础上,给函数添加新的功能 def wrapper(fn): # fn是目标函数. def inn ...

  2. 莫烦sklearn学习自修第七天【交叉验证】

    1. 什么是交叉验证 所谓交叉验证指的是将样本分为两组,一组为训练样本,一组为测试样本:对于哪些数据分为训练样本,哪些数据分为测试样本,进行多次拆分,每次将整个样本进行不同的拆分,对这些不同的拆分每个 ...

  3. 原子变量与CAS算法（二）

    一.锁机制存在的问题 (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题. (2)一个线程持有锁会导致其它所有需要此锁的线程挂起. (3)如果一个优先级高的线程等待一个 ...

  4. Linux环境下安装NodeJS和mongoDB

    前面的话 本文将详细介绍如何下Linux环境下安装NodeJS和mongoDB NodeJS [1]使用二进制包安装 1.在官网下载Linux环境下的NodeJS安装包 2.通过xftp软件将安装包上 ...

  5. 使用Windows任务计划程序运行Windows PowerShell脚本

    创建计划任务以运行PowerShell脚本 我需要创建一个计划任务来运行Windows PowerShell脚本的第一件事是我将执行的命令行.找到这个的简单方法是使用Run 命令.有时,我需要知道什么 ...

  6. Node.js 安装与管理

    一.node安装 Windows下,官网下载 Node.js 安装包,运行安装即可, 安装成功后,可查看版本号 node -v 二.npm npm 是 node 包管理工具,随同node一起安装,安装 ...

  7. IntelliJ IDEA default settings 全局默认设置

    可以通过以下两个位置设置IDEA的全局默认设置: 以后诸如默认的maven配置就不需要每次都重复配置了?

  8. BZOJ4205卡牌配对——最大流+建图优化

    题目描述 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值互质,且两张卡牌类别不 ...

  9. BZOJ1005 HNOI2008明明的烦恼（prufer+高精度）

    每个点的度数=prufer序列中的出现次数+1,所以即每次选一些位置放上某个点,答案即一堆组合数相乘.记一下每个因子的贡献分解一下质因数高精度乘起来即可. #include<iostream&g ...

  10. Power Network POJ - 1459 网络流 DInic 模板

    #include<cstring> #include<cstdio> #define FOR(i,f_start,f_end) for(int i=f_startl;i< ...