溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何正確的使用Vue過濾器

發(fā)布時間：2021-01-12 14:48:06 來源：億速云 閱讀：169 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章給大家分享的是有關(guān)如何正確的使用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'">
  <h4 id="h4">{{ msg }}</h4>
</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('h4').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風格設計的，它提供了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ū)ο螅?，要發(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ā)送，并設置請求頭的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 來設置成功的回調(diào)函數(shù)
     this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
      // 通過 result.body 拿到服務器返回的成功的數(shù)據(jù)
      // console.log(result.body)
     })
    },
    postInfo() { // 發(fā)起 post 請求  application/x-wwww-form-urlencoded
     // 手動發(fā)起的 Post 請求，默認沒有表單格式，所以，有的服務器處理不了
     // 通過 post 方法的第三個參數(shù)， { emulateJSON: true } 設置 提交的內(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過濾器，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手