Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
使用例子：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.aoyou183.cn/bcjs/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='http://www.aoyou183.cn/bcjs/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風格設(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（字符串），請求地址。可被options對象中url屬性覆蓋。
data（可選，字符串或?qū)ο螅l(fā)送的數(shù)據(jù)，可被options對象中的data屬性覆蓋。
options對象
參數(shù) 類型 描述
url string 請求的URLmethod string 請求的HTTP方法，例如：’GET’, ’POST’或其他HTTP方法body Object, FormData string request bodyparams Object 請求的URL參數(shù)對象 ，getheaders 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-OverrideemulateJSON 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='http://www.aoyou183.cn/bcjs/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)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備