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. iOS UITableView Tips(2)

    #TableView Tips(2) (本来想一章就结束TableView Tips,但是发现自己还是太天真了~too young,too simple) ##架构上的优化 在Tips(1)中指出了一 ...

  2. 吴裕雄--天生自然Android开发学习：魅蓝3开启USB调试

    打开手机点击:设置 选择:关于手机 在详情里面找到:版本号,然后不断地点击那个版本号. 然后返回一步 再选择设置里面的:辅助功能 再选择辅助功能里面的:开发者选项 进入开发者选项后,选择打开两项:一是 ...

  3. Archlinux安装与出现的问题

    arch的安装 arch的安装主要参考官网arch wiki,基本上按照Beginners' guide的步骤就可以安装,不过这里推荐用U盘刻录的方法来安装,我尝试过用硬盘安装的办法,还是感觉U盘刻录 ...

  4. drf分页组件补充

    drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  5. symbolicatecrash解析crash文件

    导出crash文件 Xcode -> Window -> Devices and Simulators -> View Device Logs ,然后选中导出. 找到.app文件和. ...

  6. tomcat——nginx负载均衡

    Tomcat一般应用在这种小型系统中应用非常广泛,是开发调试jsp的首先应用.Tomcat和其他web软甲一样具有解析HTML语言的功能,但是处理效率远不及Apacge和Nginx,所以Tomcat一 ...

  7. <NOI2002>银河英雄传说の思路

    emm并没有什么好说的.毕竟我这个蒟蒻都能yy出来 #include<cstring> #include<cstdio> #include<iostream> #i ...

  8. Hessian简介

    Hessian Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为 ...

  9. Django学习之路02

    静态文件配置 html文件默认全都放在templates文件夹下 对于前段已经写好了的文件, 我们只是拿过来使用 那么这些文件都可以称之为叫"静态文件"静态文件可以是 bootst ...

  10. 360若真入股HTC 到底是谁来拯救谁

    到底是谁来拯救谁" title="360若真入股HTC 到底是谁来拯救谁"> 我总是持有一种观点,那就是拯救是相互的.就像老师拯救"堕落"学生, ...