欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹

 更新時(shí)間：2021年01月12日 11:13:32   作者：巽逸  
這篇文章主要介紹了Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

一、過(guò)濾器

使用例子：

<!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>
  // 定義一個(gè) Vue 全局的過(guò)濾器，名字叫做 msgFormat
  Vue.filter('msgFormat', function (msg, arg, arg2) {
   // 字符串的 replace 方法，第一個(gè)參數(shù)，除了可寫(xiě)一個(gè) 字符串之外，還可以定義一個(gè)正則
   return msg.replace(/abc/g, arg + arg2)
  })

  Vue.filter('test', function (msg) {
   return msg + '========'
  })


  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: 'abc,abcdefg,哈哈哈'
   },
   methods: {}
  });
 </script>
</body>
</html>

二、vue的生命周期函數(shù)

1、什么是生命周期

從Vue實(shí)例創(chuàng)建、運(yùn)行、到銷(xiāo)毀期間，總是伴隨著各種各樣的事件，這些事件，統(tǒng)稱(chēng)為生命周期

2、主要的生命周期函數(shù)分類(lèi)

1、創(chuàng)建期間的生命周期函數(shù)：
beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來(lái)，此時(shí)，還沒(méi)有初始化好 data 和 methods 屬性
created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時(shí) data 和 methods 已經(jīng)創(chuàng)建OK，此時(shí)還沒(méi)有開(kāi)始 編譯模板
beforeMount：此時(shí)已經(jīng)完成了模板的編譯，但是還沒(méi)有掛載到頁(yè)面中
mounted：此時(shí)，已經(jīng)將編譯好的模板，掛載到了頁(yè)面指定的容器中顯示

2、運(yùn)行期間的生命周期函數(shù)：
beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)， 此時(shí) data 中的狀態(tài)值是最新的，但是界面上顯示的 數(shù)據(jù)還是舊的，因?yàn)榇藭r(shí)還沒(méi)有開(kāi)始重新渲染DOM節(jié)點(diǎn)
updated：實(shí)例更新完畢之后調(diào)用此函數(shù)，此時(shí) data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新，界面已經(jīng)被重新渲染好了！

3、銷(xiāo)毀期間的生命周期函數(shù)：
beforeDestroy：實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroyed：Vue 實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。

使用例子：

<!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í)行的時(shí)候，data 和 methods 中的 數(shù)據(jù)都還沒(méi)有沒(méi)初始化
   },
     created() { // 這是遇到的第二個(gè)生命周期函數(shù)
    alert('created2')
    // this.show()
    // 在 created 中，data 和 methods 都已經(jīng)被初始化好了！
    // 如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)，最早，只能在 created 中操作
   },
   beforeMount() { // 這是遇到的第3個(gè)生命周期函數(shù)，表示 模板已經(jīng)在內(nèi)存中編輯完成了，但是尚未把 模板渲染到 頁(yè)面中
    alert('beforeMount3')
    // 在 beforeMount 執(zhí)行的時(shí)候，頁(yè)面中的元素，還沒(méi)有被真正替換過(guò)來(lái)，只是之前寫(xiě)的一些模板字符串
   },
   mounted() { // 這是遇到的第4個(gè)生命周期函數(shù)，表示，內(nèi)存中的模板，已經(jīng)真實(shí)的掛載到了頁(yè)面中，用戶(hù)已經(jīng)可以看到渲染好的頁(yè)面了
    alert('mounted4')
    // 注意： mounted 是 實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)，當(dāng)執(zhí)行完 mounted 就表示，實(shí)例已經(jīng)被完全創(chuàng)建好了，此時(shí)，如果沒(méi)有其它操作的話，這個(gè)實(shí)例，就靜靜的 躺在我們的內(nèi)存中，一動(dòng)不動(dòng)
   },

   // 接下來(lái)的是運(yùn)行中的兩個(gè)事件
   beforeUpdate() { // 這時(shí)候，表示 我們的界面還沒(méi)有被更新【數(shù)據(jù)被更新了嗎？ 數(shù)據(jù)肯定被更新了】

    alert('beforeUpdate修改')

    // 得出結(jié)論： 當(dāng)執(zhí)行 beforeUpdate 的時(shí)候，頁(yè)面中的顯示的數(shù)據(jù)，還是舊的，此時(shí) data 數(shù)據(jù)是最新的，頁(yè)面尚未和 最新的數(shù)據(jù)保持同步
   },
   updated() {
    console.log('界面上元素的內(nèi)容：' + document.getElementById('h3').innerText)
    console.log('data 中的 msg 數(shù)據(jù)是：' + this.msg)
    // updated 事件執(zhí)行的時(shí)候，頁(yè)面和 data 數(shù)據(jù)已經(jīng)保持同步了，都是最新的
   }
  })
</script>
</body>
</html>

三、vue-resource

github地址：https://github.com/pagekit/vue-resource

1、vue-resource 的請(qǐng)求api是按照rest風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求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ù)介紹

都是接受三個(gè)參數(shù)：
url（字符串），請(qǐng)求地址。可被options對(duì)象中url屬性覆蓋。

data（可選，字符串或?qū)ο螅?，要發(fā)送的數(shù)據(jù)，可被options對(duì)象中的data屬性覆蓋。

options對(duì)象

參數(shù) 類(lèi)型 描述

url      string            請(qǐng)求的URL
method     string            請(qǐng)求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body      Object, FormData string    request body
params     Object            請(qǐng)求的URL參數(shù)對(duì)象 ，get
headers    Object            request header 第三方請(qǐng)求數(shù)據(jù)需要用到
timeout    number            單位為毫秒的請(qǐng)求超時(shí)時(shí)間 (0 表示無(wú)超時(shí)時(shí)間)
before     function(request)       請(qǐng)求發(fā)送前的處理函數(shù)，類(lèi)似于jQuery的beforeSend函數(shù)
progress    function(event)        ProgressEvent回調(diào)處理函數(shù)
credentials  boolean            表示跨域請(qǐng)求時(shí)是否需要使用憑證
emulateHTTP  boolean            發(fā)送PUT, PATCH, DELETE請(qǐng)求時(shí)以HTTP POST的方式發(fā)送，并設(shè)置請(qǐng)求頭的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請(qǐng)求" @click="getInfo">
  <input type="button" value="post請(qǐng)求" @click="postInfo">
  <input type="button" value="jsonp請(qǐng)求" @click="jsonpInfo">
 </div>

 <script>
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getInfo() { // 發(fā)起get請(qǐng)求
     // 當(dāng)發(fā)起get請(qǐng)求之后， 通過(guò) .then 來(lái)設(shè)置成功的回調(diào)函數(shù)
     this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
      // 通過(guò) result.body 拿到服務(wù)器返回的成功的數(shù)據(jù)
      // console.log(result.body)
     })
    },
    postInfo() { // 發(fā)起 post 請(qǐng)求  application/x-wwww-form-urlencoded
     // 手動(dòng)發(fā)起的 Post 請(qǐng)求，默認(rèn)沒(méi)有表單格式，所以，有的服務(wù)器處理不了
     // 通過(guò) post 方法的第三個(gè)參數(shù)， { emulateJSON: true } 設(shè)置 提交的內(nèi)容類(lèi)型 為 普通表單數(shù)據(jù)格式
     this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
      console.log(result.body)
     })
    },
    jsonpInfo() { // 發(fā)起JSONP 請(qǐng)求
     this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
      console.log(result.body)
     })
    }
   }
  });
 </script>
</body>
</html>

以上就是Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹的詳細(xì)內(nèi)容，更多關(guān)于Vue過(guò)濾器,生命周期函數(shù)和vue-resource的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論