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. RabbitMQ传输原理、五种模式

    本文代码基于SpringBoot,文末有代码连接 .首先是一些在Spring Boot的一些配置和概念,然后跟随代码看下五种模式 MQ两种消息传输方式,点对点(代码中的简单传递模式),发布/订阅(代码 ...

  2. 在CentOS安装CMake （CentOS7 64位适用）

    在CentOS安装CMake 转自:http://www.cnblogs.com/mophee/archive/2013/03/19/2969456.html 一.环境描述 1.系统:CentOS 6 ...

  3. optogenetics|

    Bird &optogenetics&day&night 光遗传学(optogenetics)——结合遗传工程与光来操作个别神经细胞的活性,发现脑部如何产生γ波(gamma o ...

  4. Steve Lin:如何撰写一篇优秀的SIGGRAPH论文

    Lin:如何撰写一篇优秀的SIGGRAPH论文" title="Steve Lin:如何撰写一篇优秀的SIGGRAPH论文"> 英文原版 PPT下载:http:// ...

  5. 整合SSM遇到的错误,数据库连接失败问题集合

    Could not get JDBC Connection; nested exception is java.sql.SQLException: Connections could not be a ...

  6. spring配置ConcurrentMap实现缓存

    spring本身内置了对Cache的支持,本次记录的是基于Java API的ConcurrentMap的CacheManager配置. 1.xml文件中增加命名空间 <beans xmlns=& ...

  7. 吴裕雄--天生自然KITTEN编程：掉金币

  8. mongodb配置windows服务启动

    第一步 下载MongoDB http://www.mongodb.org/downloads 第二步 解压到D:\mongodb\目录下,为了命令行的方便,可以把D:\mongodb\bin加到系统环 ...

  9. Thrift RPC实战(三) thrift序列化揭秘

    本文主要讲解Thrift的序列化机制, 看看thrift作为数据交换格式是如何工作的? 1.构造应用场景: 1). 首先我们先来定义下thrift的简单结构. 1 2 3 4 5 namespace ...

  10. JavaScript if为true的情况

    变量如果不为0,null,undefined,false,都会被处理为true.只要变量有非0的值或是某个对象,数组,字符串,都会认为true