Vue過濾器,生命周期函數(shù)和vue

第Vue過濾器,生命周期函數(shù)和vue1、什么是生命周期

從Vue實(shí)例創(chuàng)建、運(yùn)行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統(tǒng)稱為生命周期

2、主要的生命周期函數(shù)分類

1、創(chuàng)建期間的生命周期函數(shù)：

beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來，此時(shí)，還沒有初始化好data和methods屬性

created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時(shí)data和methods已經(jīng)創(chuàng)建OK，此時(shí)還沒有開始編譯模板

beforeMount：此時(shí)已經(jīng)完成了模板的編譯，但是還沒有掛載到頁面中

mounted：此時(shí)，已經(jīng)將編譯好的模板，掛載到了頁面指定的容器中顯示

2、運(yùn)行期間的生命周期函數(shù)：

beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)，此時(shí)data中的狀態(tài)值是最新的，但是界面上顯示的數(shù)據(jù)還是舊的，因?yàn)榇藭r(shí)還沒有開始重新渲染DOM節(jié)點(diǎn)

updated：實(shí)例更新完畢之后調(diào)用此函數(shù)，此時(shí)data中的狀態(tài)值和界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新，界面已經(jīng)被重新渲染好了！

3、銷毀期間的生命周期函數(shù)：

beforeDestroy：實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

destroyed：Vue實(shí)例銷毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

使用例子：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

titleTitle/title

scriptsrc=vue.js/script

/head

body

divid=app

inputtype=buttonvalue=修改msg@click=msg=No

h3id=h3{{msg}}/h3

/div

script

varvm=newVue({

el:#app,

data:{

msg:ok

methods:{

show(){

console.log(執(zhí)行了show方法)

beforeCreate(){

alert(beforeCreate1)

//this.show()

//注意：在beforeCreate生命周期函數(shù)執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有沒初始化

created(){//這是遇到的第二個(gè)生命周期函數(shù)

alert(created2)

//this.show()

//在created中，data和methods都已經(jīng)被初始化好了！

//如果要調(diào)用methods中的方法，或者操作data中的數(shù)據(jù)，最早，只能在created中操作

beforeMount(){//這是遇到的第3個(gè)生命周期函數(shù)，表示模板已經(jīng)在內(nèi)存中編輯完成了，但是尚未把模板渲染到頁面中

alert(beforeMount3)

//在beforeMount執(zhí)行的時(shí)候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串

mounted(){//這是遇到的第4個(gè)生命周期函數(shù)，表示，內(nèi)存中的模板，已經(jīng)真實(shí)的掛載到了頁面中，用戶已經(jīng)可以看到渲染好的頁面了

alert(mounted4)

//注意：mounted是實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)，當(dāng)執(zhí)行完mounted就表示，實(shí)例已經(jīng)被完全創(chuàng)建好了，此時(shí)，如果沒有其它操作的話，這個(gè)實(shí)例，就靜靜的躺在我們的內(nèi)存中，一動(dòng)不動(dòng)

//接下來的是運(yùn)行中的兩個(gè)事件

beforeUpdate(){//這時(shí)候，表示我們的界面還沒有被更新【數(shù)據(jù)被更新了嗎？數(shù)據(jù)肯定被更新了】

alert(beforeUpdate修改)

//得出結(jié)論：當(dāng)執(zhí)行beforeUpdate的時(shí)候，頁面中的顯示的數(shù)據(jù)，還是舊的，此時(shí)data數(shù)據(jù)是最新的，頁面尚未和最新的數(shù)據(jù)保持同步

updated(){

console.log(界面上元素的內(nèi)容：+document.getElementById(h3).innerText)

console.log(data中的msg數(shù)據(jù)是：+this.msg)

//updated事件執(zhí)行的時(shí)候，頁面和data數(shù)據(jù)已經(jīng)保持同步了，都是最新的

/script

/body

/html

三、vue-resource

github地址：/pagekit/vue-resource

1、vue-resource的請求api是按照rest風(fēng)格設(shè)計(jì)的，它提供了7種請求apiget(url,[data],[options]);****head(url,[data],[options]);post(url,[data],[options]);****put(url,[data],[options]);patch(url,[data],[options]);delete(url,[data],[options]);jsonp(url,[data],[options]);****

2、參數(shù)介紹

都是接受三個(gè)參數(shù)：

url（字符串），請求地址?？杀籵ptions對象中url屬性覆蓋。

data（可選，字符串或?qū)ο螅?，要發(fā)送的數(shù)據(jù)，可被options對象中的data屬性覆蓋。

options對象

參數(shù)類型描述

urlstring請求的URL

methodstring請求的HTTP方法，例如：GET,POST或其他HTTP方法

bodyObject,FormDatastringrequestbody

paramsObject請求的URL參數(shù)對象，get

headersObjectrequestheader第三方請求數(shù)據(jù)需要用到

timeoutnumber單位為毫秒的請求超時(shí)時(shí)間(0表示無超時(shí)時(shí)間)

beforefunction(request)請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù)

progressfunction(event)ProgressEvent回調(diào)處理函數(shù)

credentialsboolean表示跨域請求時(shí)是否需要使用憑證

emulateHTTPboolean發(fā)送PUT,PATCH,DELETE請求時(shí)以HTTPPOST的方式發(fā)送，并設(shè)置請求頭的X-HTTP-Method-Override

emulateJSONboolean將requestbody以application/x-www-form-urlencodedcontenttype發(fā)送

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

titleTitle/title

scriptsrc=vue.js/script

scriptsrc=/npm/vue-resource/script

/head

body

divid=app

inputtype=buttonvalue=get請求@click=getInfo

inputtype=buttonvalue=post請求@click=postInfo

inputtype=buttonvalue=jsonp請求@click=jsonpInfo

/div

script

//創(chuàng)建Vue實(shí)例，得到ViewModel

varvm=newVue({

el:#app,

data:{},

methods:{

getInfo(){//發(fā)起get請求

//當(dāng)發(fā)起get請求之后，通過.then來設(shè)置成功的回調(diào)函數(shù)

this.$http.get(http://vue.studyit.io/api/getlunbo).then(function(result){

//通過result.body拿到服務(wù)器返回的成功的數(shù)據(jù)

//console.log(result.body)

postInfo(){//發(fā)起post請求application/x-wwww-form-urlencoded

//手動(dòng)發(fā)起的Post請求，默認(rèn)沒有表單格式，所以，有的服務(wù)器處理不了

//通過post方法的第三個(gè)參數(shù)，{emulateJSON:true}設(shè)置提交的內(nèi)容類型為普通表單數(shù)據(jù)格式

this.$http.post(http://vue.studyit.io/api/post,{},{emulateJSON:true}).then(result={

console.log(result.body)

jsonpInfo(){//發(fā)起JSONP請求

thi