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

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

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

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

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

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

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

帶你了解vue中的API

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

全局API

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

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

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

?? ?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 )：全局注冊一個混入，影響注冊之后所有創(chuàng)建的每個 Vue 實例?；烊氤巳只烊脒€有局部混入，在組件混入有詳細講解

Vue 實例中的選項

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

以上這些選項就是Vue 實例中常見的選項，這些選項在之前都有講解過，這里只是做一個簡單的概述總合

實例屬性與方法

Vue 實例中有一些有用的實例屬性與方法，他們在創(chuàng)建實例時，寫在配置對象中，創(chuàng)建實例后可以通過

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

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

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

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

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

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

特殊的屬性

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

• key：Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素，有時候為了避免直接切換元素，則使用 key 來表示唯一性，使其不復(fù)用元素
• 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：這個屬性只用用于動態(tài)組件。

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

最新評論