Vue.js 响应接口

🌙
手机阅读
本文目录结构

Vue.js 响应接口

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

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

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

  1. <div id = "app">
  2. <p style = "font-size:25px;">计数器: {{ counter }}</p>
  3. <button @click = "counter++" style = "font-size:25px;">点我</button>
  4. </div>
  5. <script type = "text/javascript">
  6. var vm = new Vue({
  7. el: '#app',
  8. data: {
  9. counter: 1
  10. }
  11. });
  12. vm.$watch('counter', function(nval, oval) {
  13. alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
  14. });
  15. setTimeout(
  16. function(){
  17. vm.counter += 20;
  18. },10000
  19. );
  20. </script>

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

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

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

Vue.set

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

  1. Vue.set( target, key, value )

参数说明:

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

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

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

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

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

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

  1. vm.products.qty = "1";

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

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

  1. <div id = "app">
  2. <p style = "font-size:25px;">计数器: {{ products.id }}</p>
  3. <button @click = "products.id++" style = "font-size:25px;">点我</button>
  4. </div>
  5. <script type = "text/javascript">
  6. var myproduct = {"id":1, name:"book", "price":"20.00"};
  7. var vm = new Vue({
  8. el: '#app',
  9. data: {
  10. counter: 1,
  11. products: myproduct
  12. }
  13. });
  14. Vue.set(myproduct, 'qty', 1);
  15. console.log(vm);
  16. vm.$watch('counter', function(nval, oval) {
  17. alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
  18. });
  19. </script>

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

Vue.delete

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

  1. Vue.delete( target, key )

参数说明:

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

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

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了