您現在的位置是：首頁 > 棋牌
手把手教你入門 Vue教學
- 由 MobTech 發表于 棋牌
- 2022-12-12
汽車按鍵config什麼意思
Vue 基礎核心知識點
一、Vue 簡介
概述
：
動態構建
使用者介面
的
漸進式
框架
動態構建
：虛擬 DOM
使用者介面
漸進式
作者
特點
宣告式
編碼、遵循
MVVM
原則
編碼簡單、體積小
元件化、複用率高、程式碼維護容易
vue2 官網資源
：
https：//v2。cn。vuejs。org/
二、模板語法
2。1 插值語法
概述
：解析
標籤體
內容、可以解析表示式（
可以返回值
）
HELLO {{name。toUpperCase（）}}
2。2 指令語法
概述
：解析標籤屬性、內容、事件，這裡在下面的資料繫結舉例
三、資料繫結
3。1 單向資料繫結
概述
：
data=>頁面
<！DOCTYPE html>
3。2 雙向資料繫結
概述
：
data<=>頁面
<！DOCTYPE html>
四、寫法區別
4。1 el 寫法
概述
例項化
物件時配置
先
例項化
，然後掛載
<！DOCTYPE html>
你好 {{name}}
4。2 data 寫法
概述
物件式
函式式（元件必須使用）
<！DOCTYPE html>
你好 {{name}}
五、MVVM 模型
概述
：參考
MVVM模型
，應用到
VUE中
View
：模板、頁面的
DOM
結構
ViewModel
：橋樑關係，有以下兩個作用
DOM 監聽
資料繫結
Model
：程式碼的
data
資料物件
特點
在模板直接使用
vm
屬性
data資料
直接掛載到
vm
身上
六、資料代理
概述
：透過一個物件代理另一個物件屬性的操作，這裡先將資料代理，後面的資料劫持、檢測後面細講
我們程式碼中的
data
物件資料經過一番操作後變成
_data
掛載到
vm
上面，但每次訪問資料只能透過
_data
訪問不方便，
VUE
便直接代理到
vm
身上，原理圖如下所示：
實踐證明，資料一致
七、事件處理
7。1 基本使用
概述
：繫結事件，在
methods
呼叫
注意
methods
物件最終直接掛載到
vm
注意
this
指向、謹慎使用
箭頭函式
傳入引數時，第一個注意不要覆蓋函式自帶的
event
7。2 修飾符
prevent
：阻止預設事件（常用）
stop
：阻止事件冒泡（常用）
once
：事件只觸發一次（常用）
capture
：使用事件的捕獲模式
self
：只有 event。target 是當前操作的元素時才觸發事件
passive
：事件的預設行為立即執行，無需等待事件回撥執行完畢
7。3 鍵盤事件
概述
：
鍵盤觸發
事件、比如按下某個按鍵觸發事件
7。3。1 系統提供
回車 => enter刪除 => delete （捕獲“刪除”和“退格”鍵）退出 => esc空格 => space換行 => tab （特殊，必須配合keydown去使用，tab會失去焦點）上 => up下 => down左 => left右 => right
7。3。2 原始 key 值
概述
：單詞要小寫、多個單詞使用
-
分割
7。3。3 系統修飾鍵
ctrl、alt、shift、meta
注意
配合
keydown
使用，正常觸發事件
配合
keyup
使用，按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發
八、計算屬性
概述
：根據
data
已有的屬性計算新的屬性值
原理
：底層藉助了
Objcet。defineproperty
方法提供的
getter
和
setter
<！DOCTYPE html>
名：
全名：{{fullName}}
簡寫形式
：只需要返回值，不需要修改計算屬性的值時使用
computed：{ fullName（）{ return this。firstName + ‘-’ + this。lastName }}
注意
：
只有
get
所依賴的資料變化，才會再次呼叫
依賴的資料不變化，直接呼叫快取，不呼叫
get
set
只有需要修改計算屬性的值才會被呼叫
九、監視屬性
概述
：監視
屬性
的資料變化，得到
newVal oldVal
可以比對
<！DOCTYPE html>
今天天氣很{{info}}
深度監視
：監視整個物件中的資料變化，開始
deep：true
屬性就行
立即執行
：
immediate：true
資料就算不變化，也會先執行一次
簡寫形式
：簡單的需求、不需要配置其他屬性
//簡寫屬性watch：{ isHot（newVal，oldVal）{ console。log（‘isHot被修改了’，newVal，oldVal）； }}
十、繫結樣式
概述
：透過繫結
style/class
實現動態效果
10。1 class 繫結
可以透過
屬性、陣列、物件
繫結，注意和
data
的連通性
10。2 style 繫結
透過
物件、陣列
方式繫結，注意使用駝峰命名
十一、條件渲染
11。1 v-show
概述
：透過
display
隱藏，dom 仍然存在
11。2 v-if
概述
：不展示的
dom
直接移除，滿足邏輯上的
if else結構
11。3 template
概述：不會出現在
dom
中，可以作為統一管理工具
十二、列表渲染
概述
：
指令v-for
展示列表資料，遍歷
陣列、物件
12。1 基本使用
概述
：
for in
遍歷，插值語法使用資料，：
key
這裡咋暫且認為
標識
的每一條資料
<！DOCTYPE html>
人員列表
- {{p。name}} ——- {{p。age}}
汽車列表
- {{c}} ——- {{index}}
字串列表
- {{s}} ——- {{index}}
數字列表
- {{s}} ——- {{index}}
12。2 key 的原理
概述
：
vue 虛擬 dom
比較的標識
概述（重要）
初始資料生成虛擬
DOM
、虛擬
DOM
轉換成真實
DOM
，注意
VUE
對之前的
DOM
留有備份在記憶體中，留給後面的對比演算法
頁面資料發生改變導致
頁面更新
重新生成
虛擬dom
，根據唯一識別符號
key
和之前的
虛擬dom
比較（未找到重新生成
真實DOM
）
資料一致則複用，不一致重新生成
真實DOM
這裡預設 index 作為
key
，
破壞順序
會導致標籤標識出現問題，加大了工作量（
無法複用資料
）、導致輸入的資料錯位
概述（重要）
這裡的流程和上面差不多，只是
key
由自己唯一指定，不會改變順序
面試題
面試題：react、vue中的key有什麼作用？（key的內部原理） 1。 虛擬DOM中key的作用： key是虛擬DOM物件的標識，當資料發生變化時，Vue會根據【新資料】生成【新的虛擬DOM】， 隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規則如下： 2。對比規則： （1）。舊虛擬DOM中找到了與新虛擬DOM相同的key： ①。若虛擬DOM中內容沒變， 直接使用之前的真實DOM！ ②。若虛擬DOM中內容變了， 則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM。 （2）。舊虛擬DOM中未找到與新虛擬DOM相同的key 建立新的真實DOM，隨後渲染到到頁面。 3。 用index作為key可能會引發的問題： 1。 若對資料進行：逆序新增、逆序刪除等破壞順序操作： 會產生沒有必要的真實DOM更新 ==> 介面效果沒問題， 但效率低。 2。 如果結構中還包含輸入類的DOM： 會產生錯誤DOM更新 ==> 介面有問題。 4。 開發中如何選擇key？： 1。最好使用每條資料的唯一標識作為key， 比如id、手機號、身份證號、學號等唯一值。 2。如果不存在對資料的逆序新增、逆序刪除等破壞順序操作，僅用於渲染列表用於展示， 使用index作為key是沒有問題的。
12。3 列表過濾
概述
：透過
模糊查詢
列表資料解析結果
<！DOCTYPE html>
- {{p。name}} ——- {{p。age}}
總結
這裡使用計算屬性更加簡單
監視屬性注意不能簡寫，監視的資料不變化也需要立刻執行一次函式
12。4 列表排序
概述
：在列表過濾的基礎上面增加了
排序功能
<！DOCTYPE html>
人員列表
- {{p。name}}-{{p。age}}-{{p。sex}}
十三、表單資料
概述
：
v-bind
和
v-model
針對具有 value 屬性的標籤，對於其他的標籤，可使用下述方法
<！DOCTYPE html>
注意 v-model 的三個修飾符
lazy：失去焦點再收集資料
number：輸入字串轉為有效的數字
trim：輸入首尾空格過濾
十四、過濾器
概述
：對要顯示的資料進行
特定格式化後
再顯示（適用於一些簡單邏輯的處理）
語法： 1。註冊過濾器：Vue。filter（name，callback） 或 new Vue{filters：{}} 2。使用過濾器：{{ xxx | 過濾器名}} 或 v-bind：屬性 = “xxx | 過濾器名”備註： 1。過濾器也可以接收額外引數、多個過濾器也可以串聯 2。並沒有改變原本的資料， 是產生新的對應的資料
下面以一個簡單的格式化時間為例，資源連結：
https：//www。bootcdn。cn/dayjs/
<！DOCTYPE html>
當前的時間為 {{time}}
計算屬性 {{formTime}}
計算方法 {{getFormatTime（）}}
過濾器 {{time | filterTime（‘YYYY年MM月DD日’）}}
{{msg | filterSlice（4）}}
注意
lazy：失去焦點再收集資料
number：輸入字串轉為有效的數字
trim：輸入首尾空格過濾
十五、內建指令
15。1 v-text
概述
：直接替換掉標籤的內容、無法解析
標籤
<！DOCTYPE html>
15。2 v-html
概述
：和
v-text
相比，多了一個識別
html
結構（有安全性問題）
15。3 v-cloak
概述
：VUE 例項建立完成並接管例項後刪除這個屬性，可以防止出現
{{name}}
情況
15。4 v-once
概述
：所在節點在初次動態渲染後，就視為靜態內容了。以後資料的改變不會引起 v-once 所在結構的更新，可以用於最佳化效能。
初始化的n值是：{{n}}
當前的n值是：{{n}}
15。5 v-pre
概述
：跳過該節點編譯過程
Vue其實很簡單
當前的n值是：{{n}}
十六、自定義指令
概述
：透過
指令
包裝
dom
元素，讓使用者避免操作
dom
元素、一般有三個流程
bind、inserted、update
自定義指令總結： 一、定義語法： （1）。區域性指令： new Vue（{ directives：{ } }） （2）。全域性指令： Vue。directive（指令名，配置物件） 或 Vue。directive（指令名，回撥函式） 二、配置物件中常用的3個回撥： （1）。bind：指令與元素成功繫結時呼叫。 （2）。inserted：指令所在元素被插入頁面時呼叫。 （3）。update：指令所在模板結構被重新解析時呼叫。 三、呼叫時機 1。指令與元素成功繫結時（一上來）。 2。指令所在的模板被重新解析時。 四、備註： 1。指令定義時不加v-，但使用時要加v-； 2。指令名如果是多個單詞，要使用kebab-case命名方式，不要用camelCase命名，命名注意‘’
16。1 簡單自定義指令
概述
：只用到了
bind、update
兩個函式，
合在一起使用
需求1：定義一個v-big指令，和v-text功能類似，但會把繫結的數值放大10倍。
<！DOCTYPE html>
當前的n值是：
放大10倍後的n值是：
注意
這裡的
v-big
屬性是簡寫成函式，複雜的寫為物件
預設傳入兩個引數，
element，binding
，可以看下面這張圖（很清晰）
this 指向的是
window
16。2 複雜自定義指令
概述
：三個階段一起呼叫，先繫結、插入，模板解析時更新
需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所繫結的input元素預設獲取焦點。元素需要插入到頁面之後在進行焦點觸發
<！DOCTYPE html>
當前的n值是：
十七、生命週期
概述
：
VUE
幫我們呼叫的函式，為一整套的
VUE
工作流程、
鉤子
常用的生命週期鉤子： 1。mounted： 傳送ajax請求、啟動定時器、繫結自定義事件、訂閱訊息等【初始化操作】 2。beforeDestroy： 清除定時器、解綁自定義事件、取消訂閱訊息等【收尾工作】關於銷燬Vue例項 1。銷燬後藉助Vue開發者工具看不到任何資訊 2。銷燬後自定義事件會失效，但原生DOM事件依然有效 3。一般不會在beforeDestroy操作資料，因為即便操作資料，也不會再觸發更新流程了
beforeDestroy
：可以訪問資料，但不能修改，因為就算你修改了也不能回到
beforeUpdate
裡面
destroyed
：this。
$destroy
（）
本文轉載自infoQ作者：知心寶貝
原文連結：
https：//xie。infoq。cn/article/2de4c98faec0f77e5699cbd78