详解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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 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防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python单例模式实例详解
2017/03/01 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python 实现逻辑回归
2020/12/30 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
EJB的激活机制
2013/10/25 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
研究生导师评语
2014/12/31 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis