获取配置代理文件的api地址值

一般vue项目中,前后端服务接口调试数据,需要配置api的代理。在代理文件config/index.js中,配置 后台服务的IP地址、如图。

如果想在某个页面上查看,代理的该IP地址。

则在该页面上引入配置文件,在找到对应的值。

引入
import  API_CONFIG from "../../../config/index.js"
使用 
 // console.log("api==",API_CONFIG.dev.proxyTable['/api'].target)

即可找到对应的值。

带你了解vue中的API

我们之前了解了Vue 的全局配置,现在去了解一个Vue 中的 API。

全局API

  • Vue.extend( options ):这个 API 用于创建一个“子类”,参数是一个包含组件选项的对象。用于创建组件构造器,具体在组件的注册有讲解
  • Vue.set( target, key, value ):用于设置 Vue 实例某个对象的属性值,目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
 let vm = new Vue({
            el: "#app",
            data: {
                user: {
                    name: "张三"
                }
            }
        })
        Vue.set(vm.user, "sex", "女")
  • Vue.delete(target, key):用于删除Vue 实例某个对象的属性值,目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
    let vm = new Vue({
            el: "#app",
            data: {
                user: {
                    name: "张三"
                }
            }
        })
        Vue.delete(vm.user, "name")
  • Vue.directive( id, [definition] ):用于注册或获取全局指令。在自定义指令有详细讲解
  • Vue.filter( id, [definition] ):用于注册或获取全局过滤器。在组件过滤器有详细讲解
  • Vue.component( id, [definition] ):注册或获取全局组件。在组件注册有详细讲解
  • Vue.mixin( mixin ):全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。混入除了全局混入还有局部混入,在组件混入有详细讲解

Vue 实例中的选项

  • data:Vue 实例的数据对象,用于存放数据。实例创建之后,可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property,因此访问 vm.a 等价于访问 vm.$data.a。
  • props:props 可以是数组或对象,用于接收来自父组件的数据。
  • computed:Vue 实例的计算属性,用于对 data 中的数据做处理。
  • methods:Vue 实例的方法。
  • watch:Vue 实例的侦听器。
  • el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。在实例挂载之后,元素可以用 vm.$el 访问。
  • template`: 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
  • 生命周期选项:beforeCreate、created、beforeMount、mounted 、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
  • directives:Vue 实例的自定义指令。用于局部注册指令时使用
  • filters:Vue 实例的过滤器。用于局部注册过滤器时使用
  • components:Vue 实例的组件。用于局部注册组件时使用
  • mixins:Vue实例的混入。在使用局部混入时使用

以上这些选项就是Vue 实例中常见的选项,这些选项在之前都有讲解过,这里只是做一个简单的概述总合

实例属性与方法

Vue 实例中有一些有用的实例属性与方法,他们在创建实例时,写在配置对象中,创建实例后可以通过

添加前缀 $ 后的属性名调用,以便与用户定义的属性区分, 例如: data、prop。

  • vm.$data:Vue 实例观察的数据对象。
  • vm.$props:当前组件接收到的 props 对象。
  • vm.$el:Vue 实例使用的根 DOM 元素
  • vm.$parent:父实例,如果当前实例有的话。
  • vm.$root:当前组件树的根 Vue 实例。
  • vm.$children:当前实例的直接子组件
  • vm.slots:访问被插槽分发的内容 (子组件中获得插入的内容)
  • vm.$refs:一个对象,持有已注册过 ref 的所有子组件。(父组件中对子组件设置)
  • vm.$attrs:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件 (子组件中调用,得到父组件传入的没有在 props 属性中声明的属性)
  • vm.$on(event, callback):监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$on('test', function (msg) {
console.log(msg)
})
  • vm.$emit(event, [..args]):触发当前实例上的事件,附加参数都会传给监听器回调
vm.$emit('test', 'hi')
// => "hi"
  • vm.$once(event, callback):与 vm.$on() 一致用法,监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
  • vm.$off([event, callback]):移除自定义事件监听器。如果没有提供参数,则移除所有的事件监听器;如果只提供了事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。
  • vm.\$mount():如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例;参数为一个 dom 或者一个选择器
  • vm.$forceUpdate():迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
  • vm.$destroy():完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。触发 beforeDestroy 和 destroyed 的钩子。

特殊的属性

在Vue 中,除了上述的一些属性,还有一些特殊属性,这些属性不是用于实例中的,而是用在组件中使用。

  • key:Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素,有时候为了避免直接切换元素,则使用 key 来表示唯一性,使其不复用元素
  • ref:ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
  • is:这个属性只用用于动态组件。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。 

vue如何获取配置代理文件中的api地址值的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  8. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部