Vue筆記整理1
阿新 • • 發佈：2020-12-13
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架，準確來說不是一個框架，它聚焦在V（view）檢視層。
關於mvvm
- MVC 是後端的分層開發概念； MVVM是前端檢視層的概念，主要關注於 檢視層分離，也就是說：MVVM把前端的檢視層，分為了 三部分 Model, View , VM ViewModel
- m 指 model
- 資料層 Vue 中 資料層 都放在 data 裡面
- v 指view 檢視
- Vue 中view即我們的HTML頁面
- vm（view-model） 控制器：將資料和檢視層建立聯絡
- vm 即 Vue 的例項，就是 vm
創始人尤雨溪，是一個優秀的國產框架
它有以下的特性：
1.輕量級的框架
2.雙向資料繫結（一定要加冒號啊，多次忘記）
3.指令
4.外掛化
優點是 非同步批處理方式更新 DOM；
組合：用解耦的、可複用的元件組合你的應用程式；
緊湊~18kb min+gzip，且無依賴
可通過npm或視覺化面板進行開發，使用場景靈活
指令
- 本質就是自定義屬性
- Vue中指定都是以 v- 開頭
雙向資料繫結（使用場景最最最多）
- 當資料發生變化的時候，檢視也就發生變化
- 當檢視發生變化的時候，資料也會跟著同步變化
v-model
- v-model是一個指令，限制在
<input>、<select>、<textarea>、components中使用
v-text
- v-text指令用於將資料填充到標籤中，作用於插值表示式類似，但是沒有閃動問題
- 如果資料中有HTML標籤會將html標籤一併輸出
- 注意：此處為單向繫結，資料物件上的值改變，插值會發生變化；但是當插值發生變化並不會影響資料物件的值
在指令中不要寫插值語法 直接寫對應的變數名稱
在 v-text 中賦值的時候不要寫插值語法
一般屬性中不加 {{}} 直接寫對應的資料名
v-html
-
用法和v-text 相似 但是他可以將HTML片段填充到標籤中
-
可能有安全問題, 一般只在可信任內容上使用
v-html，永遠不會用在使用者提交的內容上 -
它與v-text區別在於v-text輸出的是純文字，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
v-cloak
- 防止頁面載入時出現閃爍問題
`
v-pre
- 顯示原始資訊跳過編譯過程
- 跳過這個元素和它的子元素的編譯過程。
- **一些靜態的內容不需要編譯加這個指令可以加快渲染
v-once
- 執行一次性的插值（當資料改變時，插值處的內容不會繼續更新）
事件修飾符
- 在事件處理程式中呼叫
event.preventDefault()或event.stopPropagation()是非常常見的需求。 - Vue 不推薦我們操作DOM 為了解決這個問題，Vue.js 為
v-on提供了事件修飾符 - 修飾符是由點開頭的指令字尾來表示的
按鍵修飾符
- 用來繫結事件的
- 形式如：v-on:click 縮寫為 @click;
v-on事件函式中傳入引數()
`
- 在做專案中有時會用到鍵盤事件，在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為
v-on在監聽鍵盤事件時新增按鍵修飾符
常用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
`
v-bind
- v-bind 指令被用來響應地更新 HTML 屬性
- v-bind:href 可以縮寫為 :href;
- 我們可以給v-bind:class 一個物件，以動態地切換class。
- 注意：v-bind:class指令可以與普通的class特性共存
1、 v-bind 中支援繫結一個物件
如果繫結的是一個物件則鍵為對應的類名，值為對應data中的資料
2、 v-bind 中支援繫結一個數組
繫結物件和繫結陣列 的區別
- 繫結物件的時候 物件的屬性 即要渲染的類名 物件的屬性值對應的是 data 中的資料
- 繫結陣列的時候數組裡面存的是data 中的資料
分支結構
v-if 使用場景
- 1- 多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素
v-show 和 v-if的區別
- v-show本質就是標籤display設定為none，控制隱藏
- v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和建立，故v-show效能更好一點。
- v-if是動態的向DOM樹內新增或者刪除DOM元素
- v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件
- 2- 進行兩個檢視之間的切換
迴圈結構
v-for
-
用於迴圈的數組裡面的值可以是物件，也可以是普通元素
-
不推薦同時使用
v-if和v-for -
當
v-if與v-for一起使用時，v-for具有比v-if更高的優先順序。
key 的作用 -
key來給每個節點做一個唯一標識
-
**key的作用主要是為了高效的更新虛擬DOM