Vue2.0 - 全局操作 Vue.set
引：http://www.cnblogs.com/zccblog/p/7192420.html
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。
一、引用构造器外部数据：
什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。
看一个简单的代码：
|
1
2
3
4
5
6
7
8
9
10
|
//在构造器外部声明数据
var outData={
count:1,
goodName:'car'
};
var app=new Vue({
el:'#app',
//引用外部数据
data:outData
})
|
二、在外部改变数据的三种方法：
1、用Vue.set改变
|
1
2
3
|
function add(){
Vue.set(outData,'count',4);
}
|
2、用Vue对象的方法添加
|
1
|
app.count++;
|
3、直接操作外部数据
|
1
|
outData.count++;
|
其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。
三、为什么要有Vue.set的存在?
由于Javascript的限制，Vue不能自动检测以下变动的数组。
*当你利用索引直接设置一个项时，vue不会为我们自动更新。
*当你修改数组的长度时，vue不会为我们自动更新。
看一段代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Vue.set 全局操作</title>
</head>
<body>
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已经执行了");
app.arr[1]='ddd';
//Vue.set(app.arr,1,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
</body>
</html>
|
这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。
Vue2.0 - 全局操作 Vue.set的更多相关文章
- vue2.0实践 —— Node + vue 实现移动官网
简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...
- vue2.0全局组件之pdf
目的:像elementUI那样注册全局组件 预览pdf文件 技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/ 准备:新建一个CPdf.vue文件,把火 ...
- vue2.0 正确理解Vue.nextTick()的用途
什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...
- Vue2.0 【第二季】第3节 Vue.set全局操作
目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...
- Vue.js系列之项目搭建（vue2.0 + vue-cli + webpack ）
1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令 ...
- vue2.0自学教程(一)：走进vue2.0大观园
人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vuevue是一个前端框架,使用MVVM(Mode ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用 在main.js内部直接导入 用vue-cli直接安装jquery和bo ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字
缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
随机推荐
- 20155207 2006-2007-2 《Java程序设计》第3周学习总结
20155207 2006-2007-2 <Java程序设计>第X周学习总结 教材学习内容总结 比较字符串实际字符内容是否相同,不要使用==,要使用equals() 关于类的语法问题 pu ...
- 20155301第十二周java课程程序
20155301第十二周java课程程序 内容一:在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Ar ...
- 20145226夏艺华 《Java程序设计》第9周学习总结
教材学习内容总结 学习目标 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛型和自定义枚举 会使用标准注解 第16章 整合数据库 16.1 JDBC入门 (一)JDB ...
- 2801 LOL-盖伦的蹲草计划
2801 LOL-盖伦的蹲草计划 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫 ...
- 【MySQL高级特性】高性能MySQL第七章
2017-07-25 14:15:43 前言:MYSQL从5.0和5.1版本开始引入了很多高级特性,例如分区.触发器等,这对有其他关系型数据库使用 背景的用户来说可能并不陌生.这些新特性吸引了很多用户 ...
- Android开源的精美日历控件，热插拔设计的万能自定义UI
Android开源的精美日历控件,热插拔设计的万能自定义UI UI框架应该逻辑与界面实现分离,该日历控件使用了热插拔的设计 ,简单几步即可实现你需要的UI效果,热插拔的思想是你提供你的实现,我提供我的 ...
- 03-运行第一个docker容器
环境选择 容器需要管理工具.runtime 和操作系统,我们的选择如下: 1.管理工具 - Docker Engine因为 Docker 最流行使用最广泛. 2.runtime - runc Dock ...
- Siki_Unity_2-7_Stealth秘密行动
Unity 2-7 Stealth秘密行动 Abstract:向量运算:Animation动画:Navigation寻路系统:Mecanim动画系统 任务1&2&3:游戏介绍 & ...
- Red Hat Enterprise Linux / CentOS 7 yum安装zabbix4.0
添加Zabbix存储库安装存储库配置包. 该软件包包含yum(软件包管理器)配置文件. rpm -ivh https://repo.zabbix.com/zabbix/4.0/rhel/7/x86_6 ...
- PowerDesigne 建立概念数据模型
本文主要介绍PowerDesigner概念数据模型以及实体.属性创建. 一.新建概念数据模型1)选择File-->New,弹出如图所示对话框,选择CDM模型(即概念数据模型)建立模型. 2)完成 ...