详解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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
简单谈谈javascript高级特性
Sep 04 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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php生出随机字符串
2017/07/06 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
Javascript模板技术
2007/04/27 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
深入了解Python数据类型之列表
2016/06/24 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
速记Python布尔值
2017/11/09 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
QML用PathView实现轮播图
2020/06/03 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
导师工作推荐信范文
2014/05/17 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS