Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
更新時間：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>
// 定義一個 Vue 全局的過濾器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一個參數(shù)，除了可寫一個 字符串之外，還可以定義一個正則
return msg.replace(/abc/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'abc,abcdefg,哈哈哈'
},
methods: {}
});
</script>
</body>
</html>
二、vue的生命周期函數(shù)
1、什么是生命周期
從Vue實例創(chuàng)建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統(tǒng)稱為生命周期
2、主要的生命周期函數(shù)分類
1、創(chuàng)建期間的生命周期函數(shù)：
beforeCreate：實例剛在內(nèi)存中被創(chuàng)建出來，此時，還沒有初始化好 data 和 methods 屬性
created：實例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時 data 和 methods 已經(jīng)創(chuàng)建OK，此時還沒有開始 編譯模板
beforeMount：此時已經(jīng)完成了模板的編譯，但是還沒有掛載到頁面中
mounted：此時，已經(jīng)將編譯好的模板，掛載到了頁面指定的容器中顯示
2、運行期間的生命周期函數(shù)：
beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)， 此時 data 中的狀態(tài)值是最新的，但是界面上顯示的 數(shù)據(jù)還是舊的，因為此時還沒有開始重新渲染DOM節(jié)點
updated：實例更新完畢之后調(diào)用此函數(shù)，此時 data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新，界面已經(jīng)被重新渲染好了！
3、銷毀期間的生命周期函數(shù)：
beforeDestroy：實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。
destroyed：Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
使用例子：
<!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í)行的時候，data 和 methods 中的 數(shù)據(jù)都還沒有沒初始化
},
created() { // 這是遇到的第二個生命周期函數(shù)
alert('created2')
// this.show()
// 在 created 中，data 和 methods 都已經(jīng)被初始化好了！
// 如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早，只能在 created 中操作
},
beforeMount() { // 這是遇到的第3個生命周期函數(shù)，表示 模板已經(jīng)在內(nèi)存中編輯完成了，但是尚未把 模板渲染到 頁面中
alert('beforeMount3')
// 在 beforeMount 執(zhí)行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
},
mounted() { // 這是遇到的第4個生命周期函數(shù)，表示，內(nèi)存中的模板，已經(jīng)真實的掛載到了頁面中，用戶已經(jīng)可以看到渲染好的頁面了
alert('mounted4')
// 注意： mounted 是 實例創(chuàng)建期間的最后一個生命周期函數(shù)，當執(zhí)行完 mounted 就表示，實例已經(jīng)被完全創(chuàng)建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內(nèi)存中，一動不動
},
// 接下來的是運行中的兩個事件
beforeUpdate() { // 這時候，表示 我們的界面還沒有被更新【數(shù)據(jù)被更新了嗎？ 數(shù)據(jù)肯定被更新了】
alert('beforeUpdate修改')
// 得出結(jié)論： 當執(zhí)行 beforeUpdate 的時候，頁面中的顯示的數(shù)據(jù)，還是舊的，此時 data 數(shù)據(jù)是最新的，頁面尚未和 最新的數(shù)據(jù)保持同步
},
updated() {
console.log('界面上元素的內(nèi)容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 數(shù)據(jù)是：' + this.msg)
// updated 事件執(zhí)行的時候，頁面和 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è)計的，它提供了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ù)介紹
都是接受三個參數(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 單位為毫秒的請求超時時間 (0 表示無超時時間) before function(request) 請求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù) progress function(event) ProgressEvent回調(diào)處理函數(shù) credentials boolean 表示跨域請求時是否需要使用憑證 emulateHTTP boolean 發(fā)送PUT, PATCH, DELETE請求時以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 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 發(fā)起get請求
// 當發(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
// 手動發(fā)起的 Post 請求，默認沒有表單格式，所以，有的服務(wù)器處理不了
// 通過 post 方法的第三個參數(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簡單介紹的詳細內(nèi)容，更多關(guān)于Vue過濾器,生命周期函數(shù)和vue-resource的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue單文件組件lint error自動fix與styleLint報錯自動fix詳解
這篇文章主要給大家介紹了關(guān)于vue單文件組件lint error自動fix與styleLint報錯自動fix的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了rem使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Element封裝一個表格組件tableList的使用方法
這篇文章主要介紹了基于Element封裝一個表格組件tableList的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
利用Vue的v-for和v-bind實現(xiàn)列表顏色切換
這篇文章主要介紹了利用Vue的v-for和v-bind實現(xiàn)列表顏色切換，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了解決Vue-cli無法編譯es6的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題
最近開發(fā)一個vue項目時遇到電腦卡死問題，突然間系統(tǒng)就非?？?，然后卡著卡著就死機了，鼠標也動不了了，只能冷啟動。這篇文章主要介紹了vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題,需要的朋友可以參考下2019-10-10
解決使用vue-awesome-swiper組件手動滾動點擊失效問題
這篇文章主要介紹了使用vue-awesome-swiper組件手動滾動點擊失效問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-11-11