vue的學習總結事件處理

監聽dom元素的事件，並在觸發時執行一些js**

v-on:click="num++">點選按鈕+1

效果如圖：

如果js操作比較簡單，可以直接將js操作**放到事件後面，但是一般js操作都會具有一定的邏輯性，所以可以在事件後面新增乙個方法名，然後在methods中編寫js操作**，如下

"
addnum
">點選按鈕+1

列印結果：

點選後的效果：

這時候需要想一下，之前事件後面的方法名不帶括號，可以直接在js中使用event，那麼現在括號並且帶引數了，還能直接使用嗎？可以先試一下，直接在方法中列印event，**如下

"
say('hi')
">say hi
"say('what')
">say what

列印結果：

於是就看出來這兩者是有區別的，事件後邊的方法不帶括號，在js中可以直接呼叫預設自帶的event，但是內聯處理器，也就是帶括號的，就不能直接使用預設自帶的event。那麼如果想要在內聯處理器中使用event呢，俗話說有錢好辦事，給個美刀（$）就可以了，**如下

"
say('hi',$event)
">say hi
"say('what',$event)
">say what

效果如圖：

總結一下：

1、事件繫結方法時，如果帶括號（不管有沒有引數），那麼這就是內聯處理器。2、事件繫結方法時，帶括號和不帶括號的區別，帶括號可以傳遞引數，不帶括號就不行了3、當模板中事件後邊方法名帶括號，並且有$event引數時，js中寫方法也不一定必須加上event

如下**：

"
say('hi', $event)
">say hi
"say('what', $event)
">say what

效果如下：

在不適用修飾符的時候，**如下：

"
todo1
">"
todo2
">"
todo3
">

效果如圖：

新增.stop修飾之後，就可以阻止冒泡事件的發生，**如下：

"
todo1
">"
todo2
">"
todo3
">

效果如圖：

總結：

.stop修飾符，可以阻止冒泡事件的發生，阻止事件繼續傳播

.capture

不使用修飾符時，效果在上邊已經展示，接下來就直接看這個capture修飾符的效果，**如下：

"
todo1
">v-on:click.capture="todo2">"
todo3
">

效果如下：

總結：

使用capture修飾符之後，會先冒泡到帶capture的事件，然後再由內到外進行觸發。在舉個例子，在原來基礎上裡面再新增一層div4，capture還是繫結在div2上，點選div4，觸發順序是 div2->div4->div3>div1

在js中通常使用，event.preventdefault(),阻止事件預設動作的發生。
event.stoppropagation(),阻止傳播事件的發生

加on時，代表直接使用方法

不加on時，是動態指定方法

.ctrl

當事件新增系統修飾鍵時，就必須結合系統按鍵才能觸發事件，**如下：

v-on:click.ctrl="todo1">button

效果如下：此時必須按住ctrl鍵才能觸發點選事件

但是還有乙個問題，就是在按住ctrl的同時，再按住alt鍵或者shift鍵，一樣可以觸發，於是就沒有那麼準確了，這時就可以用下邊的系統修飾鍵修飾符

.exact

新增這個修飾符之後就可以更加精確了，只有按住ctrl鍵才能夠觸發，再多按住其他鍵就不會被觸發。

本文主要是理解為主，其他未列出的如果有興趣也可以一一嘗試。

總結v-on的優點：

、在模板中事件後邊新增方法名，可以更快的定位到js中的具體方法

2、無需在js中動態操作dmo元素繫結方法，和dom完全解耦

3、跟viewmodel同生同死,viewmodel被銷毀時，所有的方法也會被銷毀

viewmodel的銷毀下一步需要查一下？？？？

vue的學習總結 事件處理