收集表單數據

• 帳號密碼使用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或其他都不行(不常用 )

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

內置指令

1.1 v-text

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

1.2 v-html

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

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

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

1.3 v-cloak

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

1.4 v-once

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

1.5 v-pre

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

1.6 自定義指令

新增配置對象：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）

2.生命周期

2.1 引出生命周期

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

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

生命周期函數：我的理解，首先mounted函數：Vue完成模板解析並把初始的真實DOM元素放入頁面後也就是掛載完畢後就會條用這個mounted，相當於他只會執行一次，vue的一生當中只會執行一次，過了就過了，在我們vue的整個期間會有很多節點，很多關鍵節點，就

比如這個解析完畢放入真實DOM就是一個節點，在這些關鍵節點vue回去調用一些特殊的函數，整個函數完成了vue的一個周期一個完整的生命周期，所以這些函數就叫做生命周期函數（也叫生命周期、生命周期鉤子）

2.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的掛載流程結束，在這個函數裡面可以 開啟定時器、發送網絡請求、訂閱消息、綁定自定義事件等

2.3 解析生命周期（更新流程）

• 掛載完畢後會去等待數據的改變，當我們數據改變時，會有一個函數，beforeUpdate這個時候數據是新的，但是頁面還沒有反應過來，i即頁面尚未和數據保持同步
• 隨後馬上就開始生成新的虛擬DOM然後會和舊的虛擬DOM相比較，完成最終頁面更新
• 然後又會有一個生命周期函數 updated此時數據是新的，頁面也是最新的，頁面和數據保持同步

2.4 解析生命周期（銷毀流程）

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

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

2.5 總結

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

• vm.$destroy 相當於自殺的功能，一般其實不得自己調用這種方法，大多數情況都是他殺，他殺需要組件支持，後面再說，這裡只能勉強自殺，完善前面的透明度案例
• 為什麼可以在點擊事件就停止定時器，非要在銷毀的生命周期函數停止，因為這裡是模擬的自殺操作，很多時候是他殺，先不說他殺有沒有觸發這個事件，不管誰殺，你被銷毀了，那都要走beforeDestroy這個函數的流程，所以一切善後工作放在這裡是最好的

來源：https://www.cnblogs.com/heymar/p/16219482.html