详解Vue.js 响应接口


Posted in Javascript onJuly 04, 2020

Vue 可以添加数据动态响应接口。

例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。

实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。

<div id = "app">
  <p style = "font-size:25px;">计数器: {{ counter }}</p>
  <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    counter: 1
  }
});
vm.$watch('counter', function(nval, oval) {
  alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
  function(){
    vm.counter += 20;
  },10000
);
</script>

效果如下:

详解Vue.js 响应接口

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。

Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一个空值。

如果我们需要在运行过程中实现属性的添加或删除,则可以使用全局 Vue,Vue.set 和 Vue.delete 方法。

Vue.set

Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:

Vue.set( target, key, value )

参数说明:

  • target: 可以是对象或数组
  • key : 可以是字符串或数字
  • value: 可以是任何类型
<div id = "app">
  <p style = "font-size:25px;">计数器: {{ products.id }}</p>
  <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

在以上实例中,使用以下代码在开始时创建了一个变量 myproduct:

var myproduct = {"id":1, name:"book", "price":"20.00"};

该变量在赋值给了 Vue 实例的 data 对象:

var vm = new Vue({ el: '#app', data: { products: myproduct } });

如果我们想给 myproduct 数组添加一个或多个属性,我们可以在 Vue 实例创建后使用以下代码:

vm.products.qty = "1";

查看控制台输出:

详解Vue.js 响应接口

如上图看到的,在产品中添加了数量属性 qty,但是 get/set 方法只可用于 id,name 和 price 属性,却不能在 qty 属性中使用。

我们不能通过添加 Vue 对象来实现响应。 Vue 主要在开始时创建所有属性。 如果我们要实现这个功能,可以通过 Vue.set 来实现:

<div id = "app">
<p style = "font-size:25px;">计数器: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

详解Vue.js 响应接口

从控制台输出的结果可以看出 get/set 方法可用于qty 属性。

Vue.delete

Vue.delete 用于删除动态添加的属性 语法格式:

Vue.delete( target, key )

参数说明:

  • target: 可以是对象或数组
  • key : 可以是字符串或数字
<div id = "app">
  <p style = "font-size:25px;">计数器: {{ products.id }}</p>
  <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
  el: '#app',
  data: {
   products: myproduct
  }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
  alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

以上实例中我们使用 Vue.delete 来删除 price 属性。以下是控制台输出结果:

详解Vue.js 响应接口

从上图输出结果中,我们可以看到 price 属性已删除,只剩下了 id 和 name 属性,price 属性的 get/set 方法也已删除。

以上就是详解Vue.js 响应接口的详细内容,更多关于Vue.js 响应接口的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
JavaScript中数组去重的5种方法
Jul 04 #Javascript
JS制作简易计算器的实例代码
Jul 04 #Javascript
基于原生js实现九宫格算法代码实例
Jul 03 #Javascript
JavaScript DOM常用操作代码汇总
Jul 03 #Javascript
JavaScript缺少insertAfter解决方案
Jul 03 #Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python中Numpy mat的使用详解
2019/05/24 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
社区平安建设方案
2014/05/25 职场文书
农民工讨薪标语
2014/06/26 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
业务员岗位职责范本
2015/04/03 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python