https://jsrun.pro/ZLfKp/edit
### 監聽事件
可以用v-on指令監聽DOM事件, 并在觸發時運行一些JavaScript代碼。
```
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
```
### 事件處理方法
除了把JS代碼寫在指令中,v-on還可以接收調用的方法名。
### 內聯處理器中的方法
除了綁定方法名, 還可以內嵌JS調用方法
```
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
```
使用$event 特殊變量,可以在內聯語句處理器中訪問原始的DOM事件。
```
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
```
```
// ...
methods: {
warn: function (message, event) {
// 現在我們可以訪問原生事件對象
if (event) {
event.preventDefault()
}
alert(message)
}
}
```
### 事件修飾符
在時間處理程序調用, `event.preventDefault()`或`event.stopPropagation()` 是非常常見的需求, 但是更好的方式是: 方法只有純粹的數據邏輯, 而不是去處理DOM事件細節。
為此, Vue為v-on提供了事件修飾符,由點開頭的指令前綴來表示。包括:
* .stop
* .prevent
* .capture
* .self
* .once
* .passive
```
<!-- 阻止單擊事件繼續傳播 -->
<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>
```
使用修飾符時,順序很重要;相應的代碼會以同樣的順序產生。因此,用 v-on:click.prevent.self 會阻止所有的點擊,而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
#### .once
2.1.4新增, 觸發一次, .once 修飾符還能被用到自定義的組件事件上。
```
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
```
#### 2.3.0 新增
Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。
```
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
```
這個 .passive 修飾符尤其能夠提升移動端的性能,不要把`.passive`和`.prevent`一起使用,因為`.prevent`將會被忽略,同時瀏覽器可能會向你展示一個警告。請記住,`.passive`會告訴瀏覽器你*不*想阻止事件的默認行為。
### 按鍵修飾符
Vue 允許為`v-on`在監聽鍵盤事件時添加按鍵修飾符
```
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
```
你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符。
```
<input v-on:keyup.page-down="onPageDown">
```
在上述示例中,處理函數只會在 $event.key 等于 PageDown 時被調用。
#### 按鍵碼
keyCode 的事件用法已經被廢棄了并可能不會被最新的瀏覽器支持。
```
<input v-on:keyup.13="submit">
```
按鍵的別名:
* .enter
* .tab
* . delete (包含刪除和退格)
* .esc
* .space
* .up
* .down
* .left
* .right
### 系統修飾鍵
2.1.0 新增
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器
* `.ctrl`
* `.alt`
* `.shift`
* `.meta`
```
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
```
警告: 請注意修飾鍵與常規按鍵不同,在和`keyup`事件一起用時,事件觸發時修飾鍵必須處于按下狀態。換句話說,只有在按住`ctrl`的情況下釋放其它按鍵,才能觸發`keyup.ctrl`。而單單釋放`ctrl`也不會觸發事件。如果你想要這樣的行為,請為`ctrl`換用`keyCode`:`keyup.17`。
#### .exact修飾符
2.5.0 新增
`.exact`修飾符允許你控制由精確的系統修飾符組合觸發的事件。
```
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
```
### 鼠標按鈕修飾符
提示: 2.2.0 新增
* `.left`
* `.right`
* `.middle`
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS