vue知識點總彙
阿新 • • 發佈：2020-12-08
1.vue的生命週期
| 生命週期鉤子 | 描述 |
|---|---|
| beforeCreate | 在例項初始化前，資料觀測和event/watcher事件配置之前被呼叫 |
| created | 例項被建立完成後呼叫。在這一步，例項已經完成以下配置：資料觀測，屬性和方法的運算，watcher/event事件的回撥。掛載階段還沒開始，$el屬性不可見 |
| beforeMount | 在掛載之前呼叫，相關的render首次被呼叫 |
| mounted | el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。如果root例項掛載了一個文件內元素，當mounted被呼叫時vm.el也在文件內 |
| beforeUpdate | 資料更新時呼叫，發生在虛擬dom重新渲染和打補丁之前。你可以在這個鉤子中進一步更改狀態，不會觸發重渲染過程 |
| updated | 由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。 |
| activated | keep-alive 元件啟用時呼叫。 |
| deactivated | keep-alive 元件停用時呼叫。 |
| beforeDestroy | 例項銷燬之前呼叫。在這一步，例項仍然完全可用。 |
| destroyed | vue例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。 |
2.keep-alive
它是vue的內建元件，能在元件切換過程中將狀態儲存在記憶體中，防止重複渲染dom
3.vue中的指令
- v-if指令
條件渲染指令，根據表示式真假來刪除和插入元素
- v-show指令
與v-if的區別，不管條件成立與否，v-show都會渲染html，v-if只有為true才會渲染
- v-eles指令
與v-if或v-show同時使用，v-if條件不成立就會顯示v-else
- v-for指令
基於一個數組渲染一個列表，與js的遍歷相似
- v-bind指令
動態繫結一個或者多個特性，可簡寫為：class（原v-bind：class）
- v-on指令
用來監聽dom事件，用法和v-bind類似
4.元件通訊
父子元件通訊主要是通過props和自定義事件，父元件通過props給子元件下發資料，子元件通過事件給父元件發出訊息
5.雙向資料繫結原理
vue內部通過object.defineProperty方法屬性攔截的方式，把data物件的每個資料讀寫轉化為getter/setter，當資料變化通知檢視更新。
6.vue是什麼
vue是一個構建資料驅動的web介面的漸進式框架
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
7.vue修飾符
.lazy
在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 。你可以新增 lazy 修飾符，從而轉變為使用 change 事件進行同步：
.number（v-model）
將輸入的輸入值自動轉化為數值型別
.trim（v-model）
過濾使用者輸入的首尾空白字元
事件修飾符
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>