Vue過濾器,生命周期函數和vue-resource簡單介紹

Posted on by

一、過濾器

使用例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="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="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            請求的URL
method     string            請求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body      Object, FormData string    request body
params     Object            請求的URL參數對象 ，get
headers    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-Override
emulateJSON  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="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的資料請關註WalkonNet其它相關文章！

推薦閱讀：