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

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

14.收集表單資料

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

  

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

• 復選框復選框不僅要寫value，而且還要把系結的值寫為陣列形式，復選框不寫value，vue默認v-model收集的是checked的值，只有當兩個條件滿足，一個陣列形式，一個value寫上才會正常收集點擊了復選框的value值

• 剩下的都是正常手機，下拉選擇框手機value值，文本域收集value值，注意一下最后一個點擊同意許可協議這里直接使用默認的checked的值即可

• 最后可通過提交的點擊事件，或者表單的提交事件將資料發送到服務器注意通過事件修飾符停止表單默認提交行為，我們一般是把json格式資料發送到服務器，所以這里資料一般是這樣定義的

  

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

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

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

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

    

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

15.過濾器

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

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

  

• 通過過濾器實作，過濾器其實就跟模板引擎的過濾器一樣，就連語法都一樣，只是在實體里面添加了全新的配置項：filters

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

  

  

• filters加引數版，除了前面的默認引數，他也可以自己添加引數，這個時候這個過濾器函式就相當于有兩個引數了

  

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

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

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

  

  

• 在vue實體里面filters定義的過濾器都是區域過濾器，雖然我們vm實體只有一個但以后會碰到組件化開發，a組件是用不到b組件里面定義的filters過濾器的，所以怎么來定義全域過濾器

  

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

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

16.內置指令

16.1 v-text

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

16.2 v-html

同上，但是這個支持標簽結構決議

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

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

16.3 v-cloak

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

16.4 v-once

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

16.5 v-pre

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

17.自定義指令

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

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

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

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

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

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

注意

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

  

  

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

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

  

18.生命周期

18.1 引出生命周期

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

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

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

18.2 決議生命周期（掛載流程）

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

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

  

  

  可以看到頁面沒有決議，vm實體也沒有_data這個資料

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

  

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

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

  

  

  他和我們寫在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的掛載流程結束，在這個函式里面可以 開啟定時器、發送網路請求、訂閱訊息、系結自定義事件等

  

18.3 決議生命周期（更新流程）

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

  

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

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

18.4 決議生命周期（銷毀流程）

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

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

18.5 總結

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

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

  

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

標籤：其他

上一篇：js函式與物件關系快速記憶

下一篇：js函式與物件關系快速記憶