監(jiān)聽器（watch）

監(jiān)聽中的 方法名 與 需要監(jiān)聽的 變量名一致
如果沒有（例如aa），不會報錯，但監(jiān)聽不到

所以上圖會輸出1，而不會輸出2

newValue改變后的值，oldValue改變前的值

watch可以監(jiān)聽computed計算屬性中的方法，變量等等

點擊go按鈕，調(diào)用change方法修改kk的值，computed中有kk，所以kk改變，computed執(zhí)行(computed看的是方法里的變量)，返回kk的值，watch（看的是方法名，watch的方法名要與監(jiān)聽的變量名一致）監(jiān)聽到computed中leo執(zhí)行，輸出leo

監(jiān)聽拓展

普通監(jiān)聽（淺監(jiān)聽），只能監(jiān)聽的到整個數(shù)組被替換（重新賦值，原來的銷毀，變成新的）。監(jiān)聽不到 數(shù)組內(nèi)部發(fā)生改變（push，pop等）
可以監(jiān)聽：

不能監(jiān)聽：

解決方案：
深度監(jiān)聽，被監(jiān)聽的方法中添加handler

不只要加handler還需要加deep：true

immediate （中文立即的意思）立即執(zhí)行
加上immediate：true，會初始化時就會自動執(zhí)行一次

總結(jié)：

事件處理

$event的寫法是固定的，指的是當(dāng)前的事件，上圖中指的是MouseEvent

獲取這個事件對象 可以做很多事，比如拖拽等等

&event是作為參數(shù)傳入的固定寫法，想在第幾個傳入，第幾個就寫$event

總結(jié)：

事件 修飾符

阻止事件默認行為（.prevent）：

@mousedown.prevent
后面不要加“事件名”，就是不要加=‘a(chǎn)bc’,直接寫@mousedown.prevent就行
加了事件 阻止不了那個事件
例如：

點擊字符串，一樣會執(zhí)行abc事件中的alert（1），彈出1

事件冒泡

這么寫會冒泡，點blue會從blue的彈窗一直彈到leo的
點sky會從sky彈到leo

.cupture誰先捕獲到先執(zhí)行哪個

所以點擊blue，會先彈出leo，然后sky，最后是blue，冒泡效果還是會有，只不過執(zhí)行順序會相反

.passive不能和.prevent一起使用，會報錯

@scroll后使用.passive會在移動端的效率會更高（以前或者比較差的手機或者瀏覽器），會過濾掉一些移動端沒有用的多余的行為

@scoll.passive是vue對滾動的優(yōu)化方案，設(shè)置為true時，表示 listener 永遠不會調(diào)用 preventDefault()

如果事件冒泡，加上.once 還是會冒泡，只不過只會執(zhí)行一次，再次點擊無效

阻止事件冒泡（.self）：

或者.stop

總結(jié)：

按鍵別名

.tab .enter等

鍵盤事件（必須是鍵盤事件） 之后直接用

總結(jié)：

系統(tǒng)修飾鍵

ctrl，alt，shift，meta

meta在windows上是系統(tǒng)鍵，在蘋果電腦上是commond鍵

如果使用.crtl，按鍵中包含ctrl也能執(zhí)行，比如同時按shift和ctrl

那怎么只按crtl 才執(zhí)行，按多個不執(zhí)行：
.exact

上圖的寫法就是，只按ctrl鍵執(zhí)行abc方法

先按住ctrl在按住shift也不執(zhí)行

但這種寫法只針對系統(tǒng)修飾鍵，比如按esc和ctrl一樣會執(zhí)行

鼠標(biāo)事件修飾符

left，right，middle
left只能用在鼠標(biāo)左鍵的事件上
如果left用在鼠標(biāo)右鍵的事件上會不執(zhí)行
所以right只能用在右鍵的事件上

例子：
@contextmenu.left
點擊左鍵會不執(zhí)行
因為contentmenu是鼠標(biāo)右鍵的事件

例子2
@click.right也不會執(zhí)行
因為click是鼠標(biāo)左鍵的事件

例子3:
鼠標(biāo)修飾符只能一個使用，不能一起使用，會不執(zhí)行
不能.left.right這種寫法

mousedown這類事件不用區(qū)分left和right，都能使用
contextmenu指的是右鍵菜單

總結(jié)：

表單輸入綁定，雙向綁定（v-modle）

雙向綁定修飾符

.lazy
input上的v-modle后面用.lazy會把oninput事件降級成on change事件

.number
input的v-modle后用.number，輸入框里輸入非數(shù)字的字符串，現(xiàn)實的時候會被自動過濾掉

可連用
可以.number.lazy連用

.trim刪除前后空格

class與style綁定，對象語法

這種寫法比｛｛變量｝｝要方便一些，否則還得在data中給變量再設(shè)一個值

class疊加的順序，先寫的在前面（寫在前面的排在前面）
后寫的aaa所以在網(wǎng)頁中aaa也排在后面

對象寫法里是個json格式，可以寫多個class
class的個數(shù)不限

正常的json格式key是要加雙引號“”的
如果要寫的規(guī)范一點可以加上

要書寫規(guī)范的話，上圖中的mmm和k也要和setRed一樣加上“”
active的值為字符串，默認為true
active的值設(shè)為0，會默認為false
active的值設(shè)為空字符串“”，會默認為false

：class和：style

：class=‘變量名’
：style=‘變量名’

：style=‘對象’，也一樣會轉(zhuǎn)換成style的字符串格式執(zhí)行

class與style綁定—數(shù)組語法

上方寫法就是兩個（多個）class的數(shù)組寫法

數(shù)組中放入三元運算符：

class 數(shù)組里嵌套數(shù)組


結(jié)果：（class會把數(shù)組自動扁平化）

字符串模版

換行\n

字符串模版中插入變量或者json對象中的某個屬性：
使用$｛｝

a和b如果都是數(shù)字 所以用運算符拼接會自動計算

組件基礎(chǔ)

從上圖可以看出 調(diào)用的三個組件都是單獨的（每個count顯示的都不一樣，每個調(diào)用的組件里都有一個data，data里都有一個count）

配合計算屬性一起使用

leo-aaa在執(zhí)行的時候，會自動轉(zhuǎn)化為<div>等html代碼，所以直接在leo-aaa標(biāo)簽上添加點擊事件等事件是無效的

props

msg in data，意思是在使用data的時候把data的名字改為msg，所以循環(huán)的時候msg.id其實是data中data數(shù)組中每個對象的id

在組件leo-aaa中接收，寫為.component（“l(fā)eo-aaa”，{props:

然后props接收

最后.mount掛載在#leo上

總結(jié)：

slot等同于：

上下兩張圖中的代碼其實是一樣的,上圖的slot標(biāo)簽等于會再加載一遍html里leo-aaa里的代碼，而下圖里則是直接寫進組件里了

注意：
每寫一個slot標(biāo)簽都會把組件leo-aaa中的內(nèi)容輸出一遍

總結(jié)：
文章來源地址http://www.zghlxwxcb.cn/news/detail-606723.html

到了這里，關(guān)于vue3基礎(chǔ)（五）watch(淺監(jiān)聽及深度監(jiān)聽)，鼠標(biāo)及鍵盤修飾符，v-model，對象寫法，class使用數(shù)組，字符串模版,自定義組件標(biāo)簽上添加事件無效,使用data時用別名替代，solt輸出內(nèi)容的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！