Vue過濾器,生命周期函數和vue-resource簡單介紹
使用例子：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.b3g6.com/bcjs/vue.js'></script></head><body> <div id='app'> //把msg的內容的abc替換成’你好123’，最后添加上’========’ <p>{{ msg | msgFormat(’你好’, ’123’) | test }}</p> </div> <script> // 定義一個 Vue 全局的過濾器，名字叫做 msgFormat Vue.filter(’msgFormat’, function (msg, arg, arg2) { // 字符串的 replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則 return msg.replace(/abc/g, arg + arg2) }) Vue.filter(’test’, function (msg) { return msg + ’========’ }) // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ’#app’, data: { msg: ’abc,abcdefg,哈哈哈’ }, methods: {} }); </script></body></html>二、vue的生命周期函數1、什么是生命周期
從Vue實例創建、運行、到銷毀期間，總是伴隨著各種各樣的事件，這些事件，統稱為生命周期
2、主要的生命周期函數分類1、創建期間的生命周期函數：beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
2、運行期間的生命周期函數：beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因為此時還沒有開始重新渲染DOM節點updated：實例更新完畢之后調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
3、銷毀期間的生命周期函數：beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
使用例子：<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.b3g6.com/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(’執行了show方法’) } }, beforeCreate() { alert(’beforeCreate1’) //this.show() // 注意： 在 beforeCreate 生命周期函數執行的時候，data 和 methods 中的 數據都還沒有沒初始化 }, created() { // 這是遇到的第二個生命周期函數 alert(’created2’) // this.show() // 在 created 中，data 和 methods 都已經被初始化好了！ // 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作 }, beforeMount() { // 這是遇到的第3個生命周期函數，表示 模板已經在內存中編輯完成了，但是尚未把 模板渲染到 頁面中 alert(’beforeMount3’) // 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串 }, mounted() { // 這是遇到的第4個生命周期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了 alert(’mounted4’) // 注意： mounted 是 實例創建期間的最后一個生命周期函數，當執行完 mounted 就表示，實例已經被完全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內存中，一動不動 }, // 接下來的是運行中的兩個事件 beforeUpdate() { // 這時候，表示 我們的界面還沒有被更新【數據被更新了嗎？ 數據肯定被更新了】 alert(’beforeUpdate修改’) // 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時 data 數據是最新的，頁面尚未和 最新的數據保持同步 }, updated() { console.log(’界面上元素的內容：’ + document.getElementById(’h3’).innerText) console.log(’data 中的 msg 數據是：’ + this.msg) // updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的 } })</script></body></html>三、vue-resource
github地址：https://github.com/pagekit/vue-resource
1、vue-resource 的請求api是按照rest風格設計的，它提供了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、參數介紹都是接受三個參數：url（字符串），請求地址。可被options對象中url屬性覆蓋。
data（可選，字符串或對象），要發送的數據，可被options對象中的data屬性覆蓋。
options對象
參數 類型 描述
url string 請求的URLmethod string 請求的HTTP方法，例如：’GET’, ’POST’或其他HTTP方法body Object, FormData string request bodyparams Object 請求的URL參數對象 ，getheaders Object request header 第三方請求數據需要用到timeout number 單位為毫秒的請求超時時間 (0 表示無超時時間)before function(request) 請求發送前的處理函數，類似于jQuery的beforeSend函數progress function(event)ProgressEvent回調處理函數credentials boolean 表示跨域請求時是否需要使用憑證emulateHTTP boolean 發送PUT, PATCH, DELETE請求時以HTTP POST的方式發送，并設置請求頭的X-HTTP-Method-OverrideemulateJSON boolean 將request body以application/x-www-form-urlencoded content type發送3、例子
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.b3g6.com/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> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ’#app’, data: {}, methods: { getInfo() { // 發起get請求 // 當發起get請求之后， 通過 .then 來設置成功的回調函數 this.$http.get(’http://vue.studyit.io/api/getlunbo’).then(function (result) { // 通過 result.body 拿到服務器返回的成功的數據 // console.log(result.body) }) }, postInfo() { // 發起 post 請求 application/x-wwww-form-urlencoded // 手動發起的 Post 請求，默認沒有表單格式，所以，有的服務器處理不了 // 通過 post 方法的第三個參數， { emulateJSON: true } 設置 提交的內容類型 為 普通表單數據格式 this.$http.post(’http://vue.studyit.io/api/post’, {}, { emulateJSON: true }).then(result => { console.log(result.body) }) }, jsonpInfo() { // 發起JSONP 請求 this.$http.jsonp(’http://vue.studyit.io/api/jsonp’).then(result => { console.log(result.body) }) } } }); </script></body></html>
以上就是Vue過濾器,生命周期函數和vue-resource簡單介紹的詳細內容，更多關于Vue過濾器,生命周期函數和vue-resource的資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備