关闭

Vue中用的比较多的几个API

时间: 2020-09-10阅读: 93标签: api

1. 数据vue.set 和 vue.delete

在Vue2.x中,当一个Vue实例创建好了以后,如果想要后续给该实例的某一个data添加属性,该属性是不会触发视图更新的,解决方法是使用Vue.set或者vm.$set方法添加指定属性。

例如

<template>
  <div>
      <p>foo.a is {{foo.a}}</p>
      <p>foo.b is {{foo.b}}</p>
      <button @click="foo.a = 111">change a to 111</button>
      <button @click="foo.b = 111">change b to 111</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: { a: 123 }
    }
  },
  created() {
    //在Vue实例创建成功,但是还未挂载到dom树之前给foo增加b属性。
    this.foo.b = 456;
  }
}
</script> 

以上代码在Vue实例创建成功,但是还未挂载到dom树之前给foo增加b属性,此时再页面上可以正常看到foo.a,但是点击修改foo.b页面并不会发生变化。

正确的写法

created() {
  this.$set(this.foo, 'b', 456);
  //或者
  Vue.set(this.foo, 'b', 123);
  
  //对于数组,第二个参数是下表
}

同样的,想要删除一个属性并触发视图更新,并不能直接使用delete,而要用Vue.delete(target, propertyName/index)或者vm.$delete(target, propertyName/index)。

但是,目前在Vue3中,直接使用**this.foo.b = 456**也一样可以触发视图更新,也可以直接使用delete删除属性。


2. 事件:vm.onemit onceoff

vm.$emit和vm.$on是基于发布订阅模式的,常用在子组件向父组件派发事件的时候使用,在子组件上使用@xxx="callback"指令即可,但是除了这种方法,也可以直接在子组件中使用vm.$on也可以触发vm.$emit派发的事件,需要注意的是在哪个组件派发就应该在哪个组件订阅,即事件的派发者既是事件的订阅者。

vm.$emit('test', 'hello'); //派发事件
vm.$on('test', (msg) => {  //订阅事件
  console.log(msg);
}) 

基于这两个api,可以实现一个简单的跨组件通信的方法:事件总线,原理是在Vue的原型上添加一个Vue实例,之后所有组件都可以通过这个Vue实例进行发布消息和订阅消息。

Vue.prototype.$bus = new Vue();

const vm1 = new Vue({...});
const vm2 = new Vue({...});

vm1.$bus.$emit('test', 'hello'); //vm1派发事件
vm2.$bus.$on('test', (msg) => {  //vm2订阅事件
  console.log(msg);
})

vm.$once和vm.$on差不多,区别在于前者在监听到一次事件后就会将该事件移除。

vm.$off用于移除事件监听器

如果没有提供参数,则移除所有监听器。
如果提供了事件的名称,则移除该事件所有的监听器。
如果提供了事件名称与回调引用,则移除这个回调的监听器。

vm.$off(); //移除所有的事件监听器
vm.$off('test'); //移除该事件所有的监听器
vm.$off('test', callback); //只移除这个回调的监听器
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9839

关闭

API是什么?

API就是接口,就是通道,负责一个程序和其他软件的沟通,本质是预先定义的函数。譬如我们去办事,窗口就类似一个API,如果对于某一件不简单的事情,这个窗口能做到让我们,当然,API不太一样,适用接口隔离原则,即使用多个隔离的接口

H5中的history方法Api介绍

history方法可以直接调用,例:history.pushState(),也可以用window.history.pushState()来调用。因为history是属于浏览器中的子对象,两种调用方法都是生效的;

Moment.js常用API速查

日常开发经常会用Moment.js来处理时间,现对频繁使用的几个API做下整理,以便日后查阅。

API接口设计,需要注意这4点

原则上API接口设计一般出现在开发的详细设计中,但是随着诸多公司建立开放平台,产品经理也逐渐需要能理解API接口,尤其是做平台性的产品,还要学会定义接口。本文就关于产品经理在设计接口中需要定义什么

API文档管理工具折射出的技术视野

网上看到不少关于如何提升技术视野的讨论,但却没有人给出定义,到底什么是技术视野?所谓技术视野,就是看问题时所能切换的不同角(维)度。下面就以API管理工具

如何更好的设计 RESTful API

当您的数据模型已开始稳定,您可以为您的网络应用程序创建公共API。 你意识到,很难对你的API进行重大更改,一旦它发布,并希望尽可能得到尽可能多的前面。 现在,互联网对API设计的意见有很多。

Composition API

Composition API的主要思想是,我们将它们定义为从新的 setup 函数返回的JavaScript变量,而不是将组件的功能(例如state、method、computed等)定义为对象属性。

什么是RESTful API?

要弄清楚什么是RESTful API,首先要弄清楚什么是REST。REST -- REpresentational State Transfer,英语的直译就是“表现层状态转移”。如果看这个概念,估计没几个人能明白是什么意思。

RESTful API风格

首先要说,不管你的API属于哪种风格,只要能够满足工作需要,就足够了。API格式并不存在绝对的标准,只存在不同的设计风格。API设计包含两部分:请求和响应。

用Node.js创建安全的 GraphQL API

本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。使用 GraphQL API 的目的是什么?什么是GraphQL API?什么是GraphQL查询?GraphQL的好处是什么?GraphQL是否优于REST?为什么我们使用Node.js?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!