vue - vue基礎/vue核心內容（終結篇）

10發表於2022-05-03
Vue

今天是vue基礎、vue核心內容第三天，也是最後一天，後面開始進入元件化學習，整個基礎內容以生命週期的結束而結束，不得不說，張天禹把這節課講活了，開始覺得vue是一個有生命的東西，包括前面所說的很多髒活累活都給他做，我們只管呼叫，說的我都於心不忍如此對待vue了，所以思來想去，我絕對對待它最好的辦法，那就是多練練程式碼優化，能省就省，意思就是讓他少乾點活。

14.收集表單資料

image-20220503123546590

  • 賬號密碼使用v-model正常收集沒得問題，本身就是收集value的

    image-20220503123636428

  • 單選框只是使用v-model就有問題，vue管理工具返回null，因為v-model本身預設是收集value值的，所以需要給單選框配置value

image-20220503123938454

  • 核取方塊核取方塊不僅要寫value，而且還要把繫結的值寫為陣列形式，核取方塊不寫value，vue預設v-model收集的是checked的值，只有當兩個條件滿足，一個陣列形式，一個value寫上才會正常收集點選了核取方塊的value值

  • 剩下的都是正常手機，下拉選擇框手機value值，文字域收集value值，注意一下最後一個點選同意許可協議這裡直接使用預設的checked的值即可

image-20220503131444130

image-20220503131530958

  • 最後可通過提交的點選事件，或者表單的提交事件將資料傳送到伺服器注意通過事件修飾符停止表單預設提交行為，我們一般是把json格式資料傳送到伺服器，所以這裡資料一般是這樣定義的

    image-20220503131945764

    這樣一來就需要把之前所有的vue語法前面新增上userInfo.開頭

  • 新增三個v-model的修飾符

    • v-model.trim=""可以將輸入的內容前後空格忽略

    • .number可以將收集的數值轉為數值型，一般是配合表單type：number使用，這個可以限制輸入的內容為數字，但是是字元型，再通過修飾符變為數值型

      image-20220503132348208

    • .lazy失去焦點再獲取資料，比如前面做過的防抖策略，輸入完一段時間再去請求資料，這裡可以給表單元素新增這個修飾符失去焦點才會將資料讀取進來

15.過濾器

完成一個案例顯示格式化的時間，用到一個庫moment專門格式化時間的在這個網站下載[BootCDN][https://www.bootcdn.cn/]

  • 通過計算屬性、methods函式實現

    image-20220503140159912

  • 通過過濾器實現，過濾器其實就跟模板引擎的過濾器一樣，就連語法都一樣，只是在例項裡面新增了全新的配置項：filters

    在vue語法裡面前面的time是管道符後面函式的引數，不用呼叫，vue會自動呼叫進去

    image-20220503140518542

    image-20220503140529953

  • filters加引數版，除了前面的預設引數，他也可以自己新增引數，這個時候這個過濾器函式就相當於有兩個引數了image-20220503140726964

    image-20220503140742694

  • 這樣一來我們上一條程式碼是不是出現錯誤了，因為上一條沒有第二個引數，format格式就沒得

image-20220503140841086

注意：這裡可以使用一個es6形參賦值語法，如果第二個引數有那str就以第二個引數為準，如果沒得就以我們在形參裡面定義的預設值為準

image-20220503141017642

image-20220503141028726

  • 我們的過濾器可以一層一層來處理，處理完一層將返回的值可以繼續交給下一個過濾器繼續處理image-20220503141306284

    image-20220503141319874

    image-20220503141326195

  • 在vue例項裡面filters定義的過濾器都是區域性過濾器，雖然我們vm例項只有一個但以後會碰到元件化開發，a元件是用不到b元件裡面定義的filters過濾器的，所以怎麼來定義全域性過濾器

    image-20220503141609619

  • 過濾器除了可以用在插值語法，還可以用在v-bind繫結語法，只能是v-bind，v-model或其他都不行(不常用 )

image-20220503141812941

總結：適用於一些簡單的邏輯處理，複雜的還是用計算屬性等實現

16.內建指令

16.1 v-text

向其所在的標籤渲染文字內容，會替換掉整個標籤裡面的內容，插值語法只是在某個位置插入進去

image-20220503142757799

16.2 v-html

同上，但是這個支援標籤結構解析

注意：該指令語法有安全性問題，在網站上如果要動態渲染任意html是很危險的，容易遭受xss攻擊

image-20220503145208437

v-html，永遠不要用在使用者提交的內容上

16.3 v-cloak

一個特殊屬性，會等待vue接管容器後就會被vue刪除，配合css [屬性選擇器]可以解決網速慢vue還沒載入（這種情況頁尾js阻塞因為js載入太慢而導致頁面堵車了，無法進行下去），頁面先出來一些｛｛name｝｝等字樣的情況

image-20220503150758725

image-20220503150844577

16.4 v-once

也是沒有值得指令語法，在所有節點初次動態渲染後就為靜態內容了不再變了，以後資料的改變不會引起v-once的更新有利於優化效能

image-20220503151227108

16.5 v-pre

可以跳過vue的編譯過程，可用它來跳過沒有使用指令語法、插值語法的節點，加快編譯

image-20220503151536204

image-20220503151446829

17.自定義指令

新增配置物件：directives，同時裡面為我們的v-什麼什麼的指令但是不用寫v-，當有細節處理應該是為一個物件這裡，如果沒有太多細節也可以直接簡寫為一個函式，接收兩個引數，第一個引數使用這個自定義指令的標籤，第二個引數這個指令繫結的表示式的物件，是一個物件裡面包含他的值，名字等等

image-20220503154154872

image-20220503154221027

自定義的指令何時被呼叫？指令與元素成功繫結時，也就是第一次渲染頁面時，第二種情況是當頁面模板重新解析時，也就是不管哪裡發起的重新解析，這個directives裡面的物件或者函式都會被重新呼叫

剛才說的函式不能處理一些細節上的問題，要物件形式才可以，這裡有一個需求，我一點選n自加，同時有一個input裡面的n跟著自加，這個邏輯按照按照上面的可以完成，但是還有一個需求，我需要一來input就是獲取焦點狀態

image-20220503155737729

這個時候再用函式的方式就不行了，為什麼，需要考慮到vue的一個工作原理，我們說這個directives的觸發時機在於指令與元素成功繫結時，而問題就出現在這裡，vue首先會把vue模板拿來解析，然後這個時候指令和元素成功繫結了，這個時候就會去執行這個函式，但是這個時候整個過程，整個dom還是在我們的虛擬dom當中，vue還沒做完工作，所以頁面上還沒出現input，你給他獲取焦點自然也不會奏效

所以現在要將自定義指令寫為物件形式，而且三個函式三個時期，還有這三個名字都不不能改動的，必須為這樣

image-20220503161016691

所以：我們一般bind函式和update函式都是做相同的事，結合上面簡寫形式兩種觸發時機，所以簡寫形式就是寫的bind和update函式裡面的邏輯

注意

  • 名稱上的注意點：我們取名自定義指令如果是兩個單詞的不能才去駝峰命名法，需要將中間用-分割，同時在directives裡面迴歸原始定義方法，也就是屬性名加引號，後面函式還是可以簡寫

    image-20220503163559610

    image-20220503163606446

  • 不管是簡寫形式還是物件形式裡面的this都為window

  • 我們在directives定義的指令是區域性指令，如果其他元件需要用到這個指令需要定義全域性指令，跟過濾器一樣定義方法（都沒有了s，在例項裡面都有s）

    image-20220503163758741

18.生命週期

18.1 引出生命週期

首先第一個注意點 動態繫結，如果裡面是一組一組的鍵值對形式，就比如style樣式需要寫為物件形式

image-20220503172318465

由一個案例引出來生命週期，需要頁面一進入這個h2標題就產生一個漸變的效果，不需要任何觸發點，自己就會觸發

image-20220503172808728

生命週期函式：我的理解，首先mounted函式：Vue完成模板解析並把初始的真實DOM元素放入頁面後也就是掛載完畢後就會條用這個mounted，相當於他只會執行一次，vue的一生當中只會執行一次，過了就過了，在我們vue的整個期間會有很多節點，很多關鍵節點，就比如這個解析完畢放入真實DOM就是一個節點，在這些關鍵節點vue回去呼叫一些特殊的函式，整個函式完成了vue的一個週期一個完整的生命週期，所以這些函式就叫做生命週期函式（也叫生命週期、生命週期鉤子）

18.2 解析生命週期（掛載流程）

Vue 例項生命週期

  • 掛載流程是從new Vue開始到mounted生命週期函式結束，首先一切萬物都是從new Vue一個例項開始，先是進入初始化，在這個初始化階段，vue會把一些生命週期的函式比如什麼名字、定義在哪裡還有我們的一些事件的定義，比如事件修飾符這些初始化好，但是要注意，這個時候還沒有解析到我們的data資料，資料代理還沒開始，緊接著這個時候就出現了第一個生命週期函式——beforeCreate

    注意一下怎麼去打斷點，一個一個得看這個階段之前會發生些啥

    image-20220503180322250

    image-20220503180515064

    可以看到頁面沒有解析，vm例項也沒有_data這個資料

  • 接下來開始第二次初始化，這個階段開始做資料代理，資料監測，同時第二個生命週期函式created

    image-20220503181000701

    這個時候確實可以看到了_data資料

    然後開始判斷有沒有el這個選擇項，如果有就判斷有沒有template模板，先說一下這個模板，這個模板是定義在vm例項裡面的，當我們vue執行完畢就會把這個模板放入容器

    image-20220503181436022

    image-20220503181450769

    他和我們寫在html結構裡面的有點區別就是我們寫在html裡面會有root這個div吧，但是這個必須用一個div或者一個盒子來包著，然後這個div會代替root這個容器

繼續我們的生命週期，如果發現沒有template模板，就會去解析我們的el這個容器作為模板，若果有模板就去解析模板，這個階段是vue開始解析模板，生成虛擬dom頁面還不能顯示解析好的內容，這個階段一出來就會有一個生命週期函式beforeMount，這個時候頁面呈現的是未經vue編譯的dom結構，所有對dom的操作都不會奏效，因為我們的虛擬dom馬上要插入頁面了

  • 接下來回去創造一個vm的api $el來放我們的el裡面的所有標籤，這個api的作用就是當我們比較虛擬dom的時候發現萬一有元素可以複用，那你也要拿得出來能複用的dom在哪裡才行，所以就在這裡儲存的，這個時候就來到了另一個事件，mounted，現在頁面中已經有編譯好的dom了，至此初始化結束，vue的掛載流程結束，在這個函式裡面可以 開啟定時器、傳送網路請求、訂閱訊息、繫結自定義事件等

    image-20220503182339525

18.3 解析生命週期（更新流程）

  • 掛載完畢後會去等待資料的改變，當我們資料改變時，會有一個函式，beforeUpdate這個時候資料是新的，但是頁面還沒有反應過來，i即頁面尚未和資料保持同步

    image-20220503203137578

  • 隨後馬上就開始生成新的虛擬DOM然後會和舊的虛擬DOM相比較，完成最終頁面更新

  • 然後又會有一個生命週期函式 updated此時資料是新的，頁面也是最新的，頁面和資料保持同步

image-20220503203956807

18.4 解析生命週期（銷燬流程）

是否執行vm.$destroy,如果執行了這一句，馬上就會進入 beforeDestroy宣告周期函式，一般在這個函式的時候，vm中所有的data、methods都可以訪問，但是最好也不要修改刪除什麼資料了，因為已經沒有意義了，生命已經走到了最後，好好修繕一下後事吧，比如可以關閉定時器、取消訂閱訊息、解綁自定義時間等收尾操作

最後過了這一個事件之後，這個vm例項就被銷燬了，身上的全部指令和事件監聽器（自定義事件）全部失效

18.5 總結

image-20220503210125144

出生生日好比掛載完畢，一切要開始的動作可以寫在這裡，將要永別好比將要銷燬，把我們之前創造的一些東西，在這裡處理一下

  • vm.$destroy 相當於自殺的功能，一般其實不得自己呼叫這種方法，大多數情況都是他殺，他殺需要元件支援，後面再說，這裡只能勉強自殺，完善前面的透明度案例

    image-20220503211523647

    為什麼可以在點選事件就停止定時器，非要在銷燬的生命週期函式停止，因為這裡是模擬的自殺操作，很多時候是他殺，先不說他殺有沒有觸發這個事件，不管誰殺，你被銷燬了，那都要走beforeDestroy這個函式的流程，所以一切善後工作放在這裡是最好的

相關文章