vue第2天(vue生命周期鉤子、日期格式化庫 moment.js、vue計算屬性、網(wǎng)絡(luò)請求庫axios)

1、DEMO-聊天機(jī)器人

1、拿到文本框內(nèi)容(v-model),給它加keyup事件,只能由回車觸發(fā)

?2、給按鈕加點擊事件,點擊事件觸發(fā)的代碼應(yīng)該跟keyup一樣,所以他們調(diào)用同一個函數(shù)就行了

?3、把你輸入的內(nèi)容渲染成li標(biāo)簽

?4、把內(nèi)容發(fā)請求到服務(wù)器,拿到服務(wù)器的回答,再渲染成li標(biāo)簽

?5、’把文本框內(nèi)容清空

?6、讓界面自動滾到最后

關(guān)于nexttick介紹:第三種解決辦法

2 Vue生命周期鉤子

傳送門:https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

生命周期鉤子:

beforeCreate:

vue實例剛剛創(chuàng)建完畢,但是還不能訪問data中的數(shù)據(jù)

created:

vue實例創(chuàng)建完畢,并且可以訪問data中的數(shù)據(jù)

beforeMount:

被Vue管理起來的DOM還沒渲染完,但是快渲染了

mounted:

被Vue管理的DOM渲染完畢,所以在這個鉤子里可以訪問DOM元素了

beforeUpdate

數(shù)據(jù)發(fā)生改變,但是界面還沒渲染

updated

數(shù)據(jù)發(fā)生改變,并且界面也渲染完畢觸發(fā)

beforeDestroy

vue實例即將銷毀之前調(diào)用

destroyed

vue實例銷毀后調(diào)用

-----------------------------------------------------------------------------------------------------------------------------

今天學(xué)習(xí)這兩個


目前學(xué)的Vue的生命周期鉤子

beforeCreate

數(shù)據(jù)發(fā)生改變,但是還沒渲染到頁面就會調(diào)用

vue剛剛創(chuàng)建調(diào)用的鉤子,不能訪問data和methods中的內(nèi)容

created

vue創(chuàng)建完畢,可以訪問data和methods中的內(nèi)容

beforeMount

dom被vue重新掛載之前調(diào)用,不能訪問dom元素

mounted

dom被vue重新掛載之后調(diào)用,可以訪問dom元素

beforeUpdate

數(shù)據(jù)發(fā)生改變調(diào)用,但是此時dom還沒重新渲染

updated

后面如果數(shù)據(jù)發(fā)生改變,并且界面渲染完畢都會觸發(fā)(數(shù)據(jù)發(fā)生改變就會觸發(fā),會觸發(fā)多次)

3 、日期格式化庫 moment.js

[傳送門](http://momentjs.cn/docs/#/parsing/)

作用:獲取日期的,按格式來獲取日期字符串

moment() 獲取當(dāng)前時間

moment(時間) 以傳入的時間為準(zhǔn)

后面有個方法叫 format() 按格式輸出日期字符串

YYYY:4位年

MM:2位月

DD:2位日

HH:2位小時(24小時,小寫h為12小時制)

mm:2位分

ss:2位秒

4 、vue計算屬性(computed:{? })

傳送門:https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

有的時候?qū)傩缘闹挡皇俏覀兿胍?,我們還需要經(jīng)過計算得到結(jié)果,就可以用計算屬性

特點:

可以當(dāng)普通屬性一樣來用

只要計算出結(jié)果,都會緩存起來,其他地方要用,直接從緩存結(jié)果拿

如果它里面依賴的數(shù)據(jù)變了,會重新調(diào)用一次重新計算結(jié)果

復(fù)習(xí)字符串和數(shù)組方法

計算屬性:

計算屬性本質(zhì)上是函數(shù),顯示的值是函數(shù)的返回值,只不過可以讓你像普通屬性那么使用,所以我們稱之為計算屬性

計算屬性例子:

??它計算出一個結(jié)果后會緩存起來,后面要用就直接拿到這個緩存的結(jié)果

? ?如果他里面用到的數(shù)據(jù)發(fā)生改變,它會重新調(diào)用一次,重新計算

Demo-品牌管理



5 網(wǎng)絡(luò)請求庫axios

傳送門:https://github.com/axios/axios

專門用來發(fā)ajax請求的

axios更方便,庫文件更小,讓網(wǎng)頁打開速度更快,因為它僅僅只是發(fā)ajax請求所以比較單純簡潔


用法:

axios發(fā)的post請求,請求報文里的提交的參數(shù),默認(rèn)使用的JSON格式(FormData),如果想用以前的

Content-type:application/x-www-form-urlencoded這種形式

需要用到 URLSearchParams 這個對象

其他用法:

5.1 axios的基本用法

5.2 axios的另外一種用法

5.3 表單傳遞

axios.get('路徑',{ params:{參數(shù)} })

axios.post('路徑',{ 參數(shù) })

注意:如果接口是application/x-www-form-urlencoded,那么需要配合URLSearchParams對象來傳遞數(shù)據(jù),請求頭要改成application/x-www-form-urlencoded

另外寫法:

axios({})

method:請求方式

url:請求路徑

data:請求體,一般是POST寫

params:傳遞的數(shù)據(jù),一般是GET請求寫

headers:設(shè)置請求頭

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容