vue模板語法三

3.1 axios && fetch

目的： 是在框架中使用數據請求

回顧：

1. 封裝ajax

1. jquery 【 $$.get $$ .post $$.ajax $$ .load 】

框架：

數據請求

1. 使用原生js提供的fetch

2. 使用第三方封裝庫： axios

• Vue中能夠統一對axios進行掛載

Vue.prototype.$http = axios

1. fetch vs axios

• axios 對已得到的數據進行了一層封裝 XSRF

• axios底層自動對數據進行了格式化

• fetch並無進行封裝，拿到就是格式化後的數據

• fetch進行了多一層的格式化

• res.json()

• res.blob() 格式化二進制

• res.text()

Axios總結

1.get方法

 

 

A: 無參數

axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))

B: 有參數

axios({

url: 'http://xxx',

method: 'get' //默認就是get,這個能夠省略，

params: {

key: value

}

})

 

2.post

注意： axios中post請求若是你直接使用npmjs.com官網文檔， 會有坑

解決步驟：

\1. 先設置請求頭

\2. 實例化 URLSearchParams的構造器函數獲得params對象

\3. 使用params對象身上的append方法進行數據的傳參

 

 

// 統一設置請求頭

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let params = new URLSearchParams()

 

// params.append(key,value)

 

params.append('a',1)

params.append('b',2)

 

axios({

url: 'http://localhost/post.php',

method: 'post',

data: params，

headers: { //單個請求設置請求頭

'Content-Type': "application/x-www-form-urlencoded"

}

})

.then(res => {

console.log( res )

})

.catch( error => {

if( error ){

throw error

}

})

 

 

Fetch

1.get

 

fetch('http://localhost/get.php?a=1&b=2')

.then(res=> res.text()) // 數據格式化 res.json() res.blob()

.then(data => {

console.log( data )

})

.catch(error => {

if( error ){

throw error

}

})

 

注意事項：

A: fetch 的 get 請求的參數是直接鏈接在url上的， 咱們可使用Node.js提供的url或是qureystring模塊來將

Object --> String

B: fetch 的請求返回的是Promise對象，因此咱們可使用.then().catch(),可是要記住.then()至少要寫兩個， 第一個then是用來格式化數據的，第二個then是能夠拿到格式化後的數據

格式化處理方式有

fetch('./data.json')

.then(res=>{

res.json() //res.text() res.blob()

})

.then( data => console.log(data))

.catch( error => console.log( error ))

 

 

2.post

fetch 文檔

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

 

fetch項目使用的博客

https://blog.csdn.net/hefeng6500/article/details/81456975

歷史

• Vue1.0

• Vue1.0數據請求咱們使用的是一個第三方的封裝庫，這個封裝庫叫作 vue-resource

• vue-resource如今已經淘汰了,它的做者也推薦咱們使用axios

• vue-resource使用形式和axios同樣的

• this.$http.get

• this.$http.post

• this.$http({})

• vue-resource有jsonp方法,而axios是沒有的

• Vue2.0

• axios [ 能夠說是目前最好的數據請求的封裝庫 ]

• fetch

3.2 計算屬性

computed 是Vue中的一個選項

做用： ？

業務： 若是我想讓一個字符串反向，如何實現？

分析： 反向 -> 數組【 reverse 】

 

3.2.1 偵聽屬性

watch 是Vue中一個選項

做用： ？

監聽數據的變化，當數據發生改變時，咱們完成一些操做

業務：

watch: {

firstName ( val ) {

this.fullName = val + this.lastName

},

lastName ( val ) {

this.fullName = this.firstName + val

},

num: {

deep: true, // 深度監聽

handler ( val ) {

// 當num發生改變時，觸發的方法

console.log( val )

}

}

}

• 總結： methods vs computed vs watch

• 項目中如何使用

1. 事件處理程序： methods

1. watch

有大量數據交互和異步處理時進行

1. computed

• 有邏輯處理

• V中像全局變量同樣使用

3.3 混入 【 青銅 】

minxin

1. 混入的形式

• 全局混入 【 不推薦 】

• 局部混入

1. 混入的做用：

1. 將選項中某一個或是多個單獨分離出去管理，讓職能更加單一高效，符合模塊化思想

1. 局部混入的使用

選項 minxins

1. 全局混入

Vue.mixin({})

3.4 組件 【 王者 】

1. 瞭解前端組件化發展歷史

• 先後端耦合

• 先後端不分離項目

1. 找後臺搭建項目開發環境

1. 尋找項目目錄中的靜態資源目錄

• js

• img

• css

1. 同步修改css

• 先後端分離

• 前端團隊合做項目的出現

• 組件化爲了解決多人協做衝突問題

• 複用

1. 組件的概念

• 組件是一個html 、 css 、js 、img 等的一個聚合體

1. Vue中的組件屬於擴展性功能

• 經過 Vue.extend() 來擴展的

ƒ Vue (options) {

if (!(this instanceof Vue)

) {

warn('Vue is a constructor and should be called with the new keyword');

}

this._init(options);

}

ƒ VueComponent (options) {

this._init(options);

}

• VueComponet這個構造函數咱們不進行new實例化，咱們但願組件是以標籤化的形式展現

<Hello/> --> <div></div>

<Banner></Banner>

• 組件要想合法化，必須註冊解析

• 組件的註冊 【 建立 】

• 全局註冊

• 局部註冊

3.5 做業

1. 面試題： ajax 和 fetch 有什麼區別？ 【 提問率： 60% 】

2. 瞭解先後端耦合，先後端分離