vue知識點總結

vue知識點

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界面的漸進式框架

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>

---

未完待續~~~~