Vue2.0 【第二季】第3节 Vue.set全局操作

第3节：Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

一、引用构造器外部数据

什么是外部数据，就是不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。 看一个简单的代码：

//在构造器外部声明数据

var outData={

    count:1,

    goodName:'car'

};

var app=new Vue({

    el:'#app',

    //引用外部数据

    data:outData

})

html代码：

<div id="app">

	{{count}}

</div>

浏览器依然输出1

二、在外部改变数据的三种方法：

1、用Vue.set改变

js中加入：

function add(){

       Vue.set(outData,'count',4);

 }

html改为：

<div id="app">

	{{count}}

</div>

<p><button onclick="add()">add</button></p>

点击按钮数字就会变成4：

2、用Vue对象的方法添加

js中加入：

function add(){

	app.count++;

}

浏览器实现按钮逐次加一

3、直接操作外部数据

js中加入：

function add(){

	outData.count++;

}

同样实现按钮逐次加一的效果

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法。

三、为什么要有Vue.set的存在？

由于Javascript的限制，Vue不能自动检测以下变动的数组。

  • 当你利用索引直接设置一个项时，vue不会为我们自动更新。
  • 当你修改数组的长度时，vue不会为我们自动更新。

看一段代码：

<!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 【第二季】第3节 Vue.set全局操作的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】

    缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...

随机推荐

  1. 统计学方法（t-检验）

    数据出来要做几件事:首先判断数据是否符合正态分布,如果符合的话,就要进行t-检验,那么进行t-检验的作用在哪呢? t-检验主要用于样本含量较小(例如n<30),总体标准差σ未知的正态分布 htt ...

  2. 吴裕雄--天生自然python学习笔记：Python3 数据结构

    列表 Python中列表是可变的,这是它区别于字符串和元组的最重要的特点,一句话概括即:列表可以修改,而字符串和元组不能. list.append(x) 把一个元素添加到列表的结尾,相当于 a[len ...

  3. Oauth2.0 协议简介及 php实例代码

    转自:http://www.dahouduan.com/2017/11/21/oauth2-php/ https://blog.csdn.net/halsonhe/article/details/81 ...

  4. Nginx笔记总结十六:nginx优化指南

    1.高层的配置 worker_processes 定义了nginx对外提供web服务时的worker进程数 worker_rlimit_nofile 更改worker进程最大打开文件数量限制,如果没有 ...

  5. TCP 为什么是三次握手，而不是两次或四次？

    TCP是一种全双工的可靠传输协议,核心思想:保证数据可靠传输以及数据的传输效率 A------B 二次握手: 1.A发送同步信号SYN+A's initial sequence number 2.B发 ...

  6. <JZOJ5913>林下风气

    快乐dp 反正考场写挂 #include<cstdio> #include<cstring> #include<cctype> #include<iostre ...

  7. [洛谷P3403] 跳楼机

    题目传送门 套路题,同余最短路. 先只考虑y.z进行连边,再在mod x的意义下进行计算. 这里的“距离”dis[i]指的是,在所有满足a mod x=i的a里,能到达的最小的a是多少. 显然只要能到 ...

  8. 吴裕雄--天生自然python编程：turtle模块绘图（4）

    import turtle bob = turtle.Turtle() for i in range(1,5): bob.fd(100) bob.lt(90) turtle.mainloop() im ...

  9. 如何用js判断一个对象是不是Array

    .如何用js判断一个对象是不是Array 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...

  10. zookeeper基本知识和zk作用体现

    有一段时间没写博客,今天想着把自己近几个月做的笔记分享一波. 前两个月我一直在看zk的视频:https://coding.imooc.com/learn/list/201.html   从开始看这位老 ...