1. vue怎麼實現訪問第三方 api
在 Vue.js 中使用第三方庫的方式有:
1.全局變數
在項目中添加第三慶絕頃方庫的最簡單方式是講其作為一個全局變數, 掛載到 window 對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
這種方式不適合於服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.
2.在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導入:
MyComponent.vue
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : '譽陸Uh oh..');
}
}
這種方式是允宏蘆許的, 但是比較繁瑣, 並且帶來的問題是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件並刪除該庫的引用. 如果構建工具沒設置正確, 可能導致該庫的多份拷貝被引用.
3.優雅的方式
在 Vuejs 項目中使用 JavaScript 庫的一個優雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:
entry.js
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
由於所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變數或者手動的引入.
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}
2. vue相關API
過濾器函數總接收表達式的值 (之前的操作鏈的結果) 作為第一個參數。在上述例子中,capitalize 過濾器函數將會收到 message 的值作為第一個參數。
注冊或獲取全局過濾器。
用法 :
安裝 Vue.js 插件。如果插件是一個對象,必須提供 install 方法。如果插件是一個函數,它會被作為 install 方法。install 方法調用時,會將 Vue 作為參數傳入。
該方法需要在調用 new Vue() 之前被調用。
當 install 方法被同一個插件多次調用,插件將只會被安裝一次。
當組件和混入對象含有同名選項時,這些選項將以恰當的方式進行「合並」
1)比如,數據對象在內部會進行遞歸合並,並在發生沖突時以組件數據優先。
2)同名鉤子函數將合並為一個數組,因此都將被調用。另外,混入對象的鉤子將在組件自身鉤子 之前 調用。
3)值為對象的選項,例如 methods、components 和 directives,將被合並為同一個對象。兩個對象鍵名沖突時,取組件對象的鍵值對。
請謹慎使用全局混入,因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下,只應當應用於自定義選項,就像上面示例一樣。推薦將其作為 插件 發布,以避免重復應用混入 。
將一個模板字元串編譯成 render 函數。 只在完整版時可用 。
這個可以理解成為簡化版的Vuex, 因為Vuex使用比較復雜, 在非大型項目中使用起來不方便, 為了簡化傳值操作, 2.6之後新增此API
參考 利用vue.observable 寫簡化vuex
3. web前端怎麼調用api介面
1、首先需要確定第三方的介面的基本信息:地址、請求方式,參數、返回值,介面模式這里第三方的介面是restful風格的,採用get請求。