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

一般vue項(xiàng)目中，前后端服務(wù)接口調(diào)試數(shù)據(jù)，需要配置api的代理。在代理文件config/index.js中，配置 后臺(tái)服務(wù)的IP地址、如圖。

如果想在某個(gè)頁(yè)面上查看，代理的該IP地址。

則在該頁(yè)面上引入配置文件，在找到對(duì)應(yīng)的值。

引入
import  API_CONFIG from "../../../config/index.js"

使用 
 // console.log("api==",API_CONFIG.dev.proxyTable['/api'].target)

即可找到對(duì)應(yīng)的值。

帶你了解vue中的API

我們之前了解了Vue 的全局配置，現(xiàn)在去了解一個(gè)Vue 中的 API。

全局API

• Vue.extend( options )：這個(gè) API 用于創(chuàng)建一個(gè)“子類(lèi)”，參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。用于創(chuàng)建組件構(gòu)造器，具體在組件的注冊(cè)有講解
• Vue.set( target, key, value )：用于設(shè)置 Vue 實(shí)例某個(gè)對(duì)象的屬性值，目標(biāo)對(duì)象不能是一個(gè) Vue 實(shí)例或 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。

?let vm = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? user: {
? ? ? ? ? ? ? ? ? ? name: "張三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? Vue.set(vm.user, "sex", "女")

• Vue.delete(target, key)：用于刪除Vue 實(shí)例某個(gè)對(duì)象的屬性值，目標(biāo)對(duì)象不能是一個(gè) Vue 實(shí)例或 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。

?? ?let vm = new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? user: {
? ? ? ? ? ? ? ? ? ? name: "張三"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? Vue.delete(vm.user, "name")

• Vue.directive( id, [definition] )：用于注冊(cè)或獲取全局指令。在自定義指令有詳細(xì)講解
• Vue.filter( id, [definition] )：用于注冊(cè)或獲取全局過(guò)濾器。在組件過(guò)濾器有詳細(xì)講解
• Vue.component( id, [definition] )：注冊(cè)或獲取全局組件。在組件注冊(cè)有詳細(xì)講解
• Vue.mixin( mixin )：全局注冊(cè)一個(gè)混入，影響注冊(cè)之后所有創(chuàng)建的每個(gè) Vue 實(shí)例?；烊氤巳只烊脒€有局部混入，在組件混入有詳細(xì)講解

Vue 實(shí)例中的選項(xiàng)

• data：Vue 實(shí)例的數(shù)據(jù)對(duì)象，用于存放數(shù)據(jù)。實(shí)例創(chuàng)建之后，可以通過(guò) vm.$data 訪問(wèn)原始數(shù)據(jù)對(duì)象。Vue 實(shí)例也代理了 data 對(duì)象上所有的 property，因此訪問(wèn) vm.a 等價(jià)于訪問(wèn) vm.$data.a。
• props：props 可以是數(shù)組或?qū)ο螅糜诮邮諄?lái)自父組件的數(shù)據(jù)。
• computed：Vue 實(shí)例的計(jì)算屬性，用于對(duì) data 中的數(shù)據(jù)做處理。
• methods：Vue 實(shí)例的方法。
• watch：Vue 實(shí)例的偵聽(tīng)器。
• el：提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。在實(shí)例掛載之后，元素可以用 vm.$el 訪問(wèn)。
• template`： 一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。
• 生命周期選項(xiàng)：beforeCreate、created、beforeMount、mounted 、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
• directives：Vue 實(shí)例的自定義指令。用于局部注冊(cè)指令時(shí)使用
• filters：Vue 實(shí)例的過(guò)濾器。用于局部注冊(cè)過(guò)濾器時(shí)使用
• components：Vue 實(shí)例的組件。用于局部注冊(cè)組件時(shí)使用
• mixins：Vue實(shí)例的混入。在使用局部混入時(shí)使用

以上這些選項(xiàng)就是Vue 實(shí)例中常見(jiàn)的選項(xiàng)，這些選項(xiàng)在之前都有講解過(guò)，這里只是做一個(gè)簡(jiǎn)單的概述總合

實(shí)例屬性與方法

Vue 實(shí)例中有一些有用的實(shí)例屬性與方法，他們?cè)趧?chuàng)建實(shí)例時(shí)，寫(xiě)在配置對(duì)象中，創(chuàng)建實(shí)例后可以通過(guò)

添加前綴 $ 后的屬性名調(diào)用，以便與用戶(hù)定義的屬性區(qū)分， 例如： data、prop。

• vm.$data：Vue 實(shí)例觀察的數(shù)據(jù)對(duì)象。
• vm.$props：當(dāng)前組件接收到的 props 對(duì)象。
• vm.$el：Vue 實(shí)例使用的根 DOM 元素
• vm.$parent：父實(shí)例，如果當(dāng)前實(shí)例有的話。
• vm.$root：當(dāng)前組件樹(shù)的根 Vue 實(shí)例。
• vm.$children：當(dāng)前實(shí)例的直接子組件
• vm.slots：訪問(wèn)被插槽分發(fā)的內(nèi)容 （子組件中獲得插入的內(nèi)容）
• vm.$refs：一個(gè)對(duì)象，持有已注冊(cè)過(guò) ref 的所有子組件。（父組件中對(duì)子組件設(shè)置）
• vm.$attrs：包含了父作用域中不被認(rèn)為 (且不預(yù)期為) props 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 props 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過(guò) v-bind=”$attrs” 傳入內(nèi)部組件 （子組件中調(diào)用，得到父組件傳入的沒(méi)有在 props 屬性中聲明的屬性）
• vm.$on(event, callback)：監(jiān)聽(tīng)當(dāng)前實(shí)例上的自定義事件。事件可以由 vm.$emit 觸發(fā)?；卣{(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

vm.$on('test', function (msg) {
console.log(msg)
})

• vm.$emit(event, [..args])：觸發(fā)當(dāng)前實(shí)例上的事件，附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)

vm.$emit('test', 'hi')
// => "hi"

• vm.$once(event, callback)：與 vm.$on() 一致用法，監(jiān)聽(tīng)一個(gè)自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽(tīng)器。
• vm.$off([event, callback])：移除自定義事件監(jiān)聽(tīng)器。如果沒(méi)有提供參數(shù)，則移除所有的事件監(jiān)聽(tīng)器；如果只提供了事件，則移除該事件所有的監(jiān)聽(tīng)器；如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)回調(diào)的監(jiān)聽(tīng)器。
• vm.\$mount()：如果 Vue 實(shí)例在實(shí)例化時(shí)沒(méi)有收到 el 選項(xiàng)，則它處于“未掛載”狀態(tài)，沒(méi)有關(guān)聯(lián)的 DOM 元素?？梢允褂?vm.$mount() 手動(dòng)地掛載一個(gè)未掛載的實(shí)例；參數(shù)為一個(gè) dom 或者一個(gè)選擇器
• vm.$forceUpdate()：迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
• vm.$destroy()：完全銷(xiāo)毀一個(gè)實(shí)例。清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽(tīng)器。觸發(fā) beforeDestroy 和 destroyed 的鉤子。

特殊的屬性

在Vue 中，除了上述的一些屬性，還有一些特殊屬性，這些屬性不是用于實(shí)例中的，而是用在組件中使用。

• key：Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類(lèi)型元素，有時(shí)候?yàn)榱吮苊庵苯忧袚Q元素，則使用 key 來(lái)表示唯一性，使其不復(fù)用元素
• ref：ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例：

<!-- `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：這個(gè)屬性只用用于動(dòng)態(tài)組件。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論