Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
更新時(shí)間：2021年01月12日 11:13:32 作者：巽逸
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
一、過濾器
使用例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
//把msg的內(nèi)容的abc替換成'你好123'，最后添加上'========'
<p>{{ msg | msgFormat('你好', '123') | test }}</p>
</div>
<script>
// 定義一個(gè) Vue 全局的過濾器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一個(gè)參數(shù)，除了可寫一個(gè) 字符串之外，還可以定義一個(gè)正則
return msg.replace(/abc/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'abc,abcdefg,哈哈哈'
},
methods: {}
});
</script>
</body>
</html>
二、vue的生命周期函數(shù)
1、什么是生命周期
從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ì)被銷毀。
使用例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
var vm = new Vue({
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地址：https://github.com/pagekit/vue-resource
1、vue-resource 的請求api是按照rest風(fēng)格設(shè)計(jì)的，它提供了7種請求api
- get(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ù) 類型 描述
url string 請求的URL method string 請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 body Object, FormData string request body params Object 請求的URL參數(shù)對象 ，get headers Object request header 第三方請求數(shù)據(jù)需要用到 timeout number 單位為毫秒的請求超時(shí)時(shí)間 (0 表示無超時(shí)時(shí)間) before function(request) 請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù) progress function(event) ProgressEvent回調(diào)處理函數(shù) credentials boolean 表示跨域請求時(shí)是否需要使用憑證 emulateHTTP boolean 發(fā)送PUT, PATCH, DELETE請求時(shí)以HTTP POST的方式發(fā)送，并設(shè)置請求頭的X-HTTP-Method-Override emulateJSON boolean 將request body以application/x-www-form-urlencoded content type發(fā)送
3、例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>
</head>
<body>
<div id="app">
<input type="button" value="get請求" @click="getInfo">
<input type="button" value="post請求" @click="postInfo">
<input type="button" value="jsonp請求" @click="jsonpInfo">
</div>
<script>
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
var vm = new Vue({
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 請求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script>
</body>
</html>
以上就是Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹的詳細(xì)內(nèi)容，更多關(guān)于Vue過濾器,生命周期函數(shù)和vue-resource的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue單文件組件lint error自動(dòng)fix與styleLint報(bào)錯(cuò)自動(dòng)fix詳解
這篇文章主要給大家介紹了關(guān)于vue單文件組件lint error自動(dòng)fix與styleLint報(bào)錯(cuò)自動(dòng)fix的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了rem使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Element封裝一個(gè)表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個(gè)表格組件tableList的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實(shí)現(xiàn)列表顏色切換，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi),只響應(yīng)最后一次,如果在指定的時(shí)間內(nèi)再次觸發(fā),則重新計(jì)算時(shí)間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了解決Vue-cli無法編譯es6的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決vue-cli項(xiàng)目開發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問題
最近開發(fā)一個(gè)vue項(xiàng)目時(shí)遇到電腦卡死問題，突然間系統(tǒng)就非?？?，然后卡著卡著就死機(jī)了，鼠標(biāo)也動(dòng)不了了，只能冷啟動(dòng)。這篇文章主要介紹了vue-cli項(xiàng)目開發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問題,需要的朋友可以參考下2019-10-10
解決使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動(dòng)滾動(dòng)點(diǎn)擊失效問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11