一起学Vue之事件处理

在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。如下所示：

1 <button v-on:click="counter += 1">Add 1</button>
2 <p>按钮被点击了 {{ counter }} 次.</p>

其中counter为Vue自定义的一个属性值。

事件处理方法

事实上，许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。如下所示：

1 <button v-on:click="greet">Greet</button>

greet 是在下面定义的方法名。如下所示：

 1 <script type="text/javascript">
 2     var app=new Vue({
 3         el:'#app',
 4         data:{
 5             msg:'hello world!!!',
 6             counter:0,
 7             name: 'Vue.js'
 8         },
 9         // 在 `methods` 对象中定义方法
10         methods:{
11             greet: function (event) {
12                 // `this` 在方法里指向当前 Vue 实例
13                 alert('Hello ' + this.name + '!')
14                  // `event` 是原生 DOM 事件
15                 if (event) {
16                     alert(event.target.tagName)
17                 }
18             },
19                 
20         }
21     });
22 </script>

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，如下所示：

1 <button v-on:click="say('hi')">Say hi</button> 
2 <button v-on:click="say('what')">Say what</button>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

1 <button v-on:click="warn('表单不能被提交.', $event)">提交</button>

其中say，warn均为自定义方法，如下所示：

 1 say: function (message) {
 2     alert(message);
 3 },
 4 warn: function (message, event) {
 5     // 现在我们可以访问原生事件对象
 6     if (event) {
 7         event.preventDefault();
 8     }
 9     alert(message);
10 }

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。事件修饰符共以下几种：

.stop
.prevent
.capture
.self
.once
.passive

 1 <!-- 阻止单击事件继续传播 -->
 2 <a v-on:click.stop="doThis">点击666</a>
 3 <!-- 提交事件不再重载页面 -->
 4 <form v-on:submit.prevent="onSubmit">
 5     <div>阻止提交</div>
 6 </form>
 7 <!-- 修饰符可以串联 -->
 8 <a v-on:click.stop.prevent="doThat"></a>
 9 <!-- 只有修饰符 -->
10 <form v-on:submit.prevent>
11     <div id="d">只有修饰符</div>
12 </form>
13 <!-- 添加事件监听器时使用事件捕获模式 -->
14 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
15 <div v-on:click.capture="doThis">doThis...</div>
16 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
17 <!-- 即事件不是从内部元素触发的 -->
18 <div v-on:click.self="doThat">doThat...</div>

View Code

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

新增属性

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

1 <!-- 点击事件将只会触发一次 -->
2 <a v-on:click.once="doThis">点我一次666</a>

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

1 <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
2 <!-- 而不会等待 `onScroll` 完成  -->
3 <!-- 这其中包含 `event.preventDefault()` 的情况 -->
4 <div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

1 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` ,点击时不调用 -->
2 <input v-on:keyup.enter="submit" type="text" value="点我777"  />
3 <!--  可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。-->
4 <input v-on:keyup.page-down="onPageDown" type="text" value="点我888" />
5 <!-- 在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。且光标在时才管用。 -->

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

1 <!-- Alt + C -->
2 <input @keyup.alt.67="clear">
3 
4 <!-- Ctrl + Click -->
5 <div @click.ctrl="doSomething">Do something</div>

请注意：修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

1  <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
2 <button @click.ctrl="onClick">A</button>
3 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
4 <button @click.ctrl.exact="onCtrlClick">A</button>
5 <!-- 没有任何系统修饰符被按下的时候才触发 -->
6 <button @click.exact="onClick">A</button>

鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮，如下所示：

.left
.right
.middle

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

本例中全部代码如下所示：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>事件处理</title>
  6         <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8     </head>
  9     <body>
 10         <div id="app">
 11             <h2>监听事件</h2>
 12             <!-- 
 13              可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
 14              -->
 15             <button v-on:click="counter += 1">Add 1</button>
 16             <p>按钮被点击了 {{ counter }} 次.</p>
 17             <h2>事件处理方法</h2>
 18             <!-- 
 19              然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。
 20              因此 v-on 还可以接收一个需要调用的方法名称。
 21              -->
 22             <!-- `greet` 是在下面定义的方法名 -->
 23             <button v-on:click="greet">Greet</button>
 24             <!-- 
 25              // 也可以用 JavaScript 直接调用方法
 26              //app.greet() // => 'Hello Vue.js!'
 27              -->
 28              <h2>内联处理器中的方法</h2>
 29              <!-- 
 30               除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
 31               -->
 32             <button v-on:click="say('hi')">Say hi</button> 
 33             <button v-on:click="say('what')">Say what</button>
 34             <!-- 
 35             有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法： 
 36              -->
 37              <br>
 38              <button v-on:click="warn('表单不能被提交.', $event)">提交</button>
 39              <h2>事件修饰符</h2>
 40              <!-- 
 41              在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
 42              尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
 43              为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
 44              .stop
 45             •.prevent
 46             •.capture
 47             •.self
 48             •.once
 49             •.passive
 50               -->
 51             <!-- 阻止单击事件继续传播 -->
 52             <a v-on:click.stop="doThis">点击666</a>
 53             <br>
 54             <!-- 提交事件不再重载页面 -->
 55             <form v-on:submit.prevent="onSubmit">
 56                 <div>
 57                     阻止提交
 58                 </div>
 59             </form>
 60             <br>
 61             <!-- 修饰符可以串联 -->
 62             <a v-on:click.stop.prevent="doThat"></a>
 63             <br>
 64             <!-- 只有修饰符 -->
 65             <form v-on:submit.prevent>
 66                 <div id="d">
 67                     只有修饰符
 68                 </div>
 69             </form>
 70             <br>
 71             <!-- 添加事件监听器时使用事件捕获模式 -->
 72             <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
 73             <div v-on:click.capture="doThis">doThis...</div>
 74             <br>
 75             <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
 76             <!-- 即事件不是从内部元素触发的 -->
 77             <div v-on:click.self="doThat">doThat...</div>
 78             <!-- 
 79             使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
 80             因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 
 81              -->
 82             <h2>新增</h2>
 83             <!-- 点击事件将只会触发一次 -->
 84             <a v-on:click.once="doThis">点我一次666</a>
 85             <!-- 
 86              不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
 87              -->
 88              <!-- 
 89               Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
 90               -->
 91             <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
 92             <!-- 而不会等待 `onScroll` 完成  -->
 93             <!-- 这其中包含 `event.preventDefault()` 的情况 -->
 94             <div v-on:scroll.passive="onScroll">...</div>
 95             <!-- 
 96             这个 .passive 修饰符尤其能够提升移动端的性能。
 97             !不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
 98             请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
 99              -->
100              <h2>按键修饰符</h2>
101              <!-- 
102               在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
103               -->
104             <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` ,点击时不调用 -->
105             <input v-on:keyup.enter="submit" type="text" value="点我777"  />
106             <!-- 
107              可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
108              -->
109              <input v-on:keyup.page-down="onPageDown" type="text" value="点我888" />
110              <!-- 
111               在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。且光标在时才管用。
112               -->
113              <h2>#按键码</h2>
114             <!-- 
115             keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。  使用 keyCode attribute 也是允许的：
116              -->
117             <input v-on:keyup.13="submit" type="button" value="key up 13">
118             <!-- 
119              为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
120              .enter
121             •.tab
122             •.delete (捕获“删除”和“退格”键)
123             •.esc
124             •.space
125             •.up
126             •.down
127             •.left
128             •.right
129             !有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
130             你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
131             // 可以使用 `v-on:keyup.f1`
132             Vue.config.keyCodes.f1 = 112
133              -->
134              <h2>系统修饰键</h2>
135              <!-- 
136               可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
137               .ctrl
138             •.alt
139             •.shift
140             •.meta
141             注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
142             在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
143             在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。
144             在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
145               -->
146             <!-- Alt + C -->
147             <input @keyup.alt.67="clear">
148 
149             <!-- Ctrl + Click -->
150             <div @click.ctrl="doSomething">Do something</div>
151             <!-- 
152             !请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。
153             换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。
154             如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。 
155              -->
156             <h2>#.exact 修饰符</h2>
157             <!-- 
158              .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
159              -->
160              <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
161             <button @click.ctrl="onClick">A</button>
162 
163             <!-- 有且只有 Ctrl 被按下的时候才触发 -->
164             <button @click.ctrl.exact="onCtrlClick">A</button>
165 
166             <!-- 没有任何系统修饰符被按下的时候才触发 -->
167             <button @click.exact="onClick">A</button>
168             <h2>#鼠标按钮修饰符</h2>
169             <!-- 
170              .left
171             •.right
172             •.middle
173 
174             这些修饰符会限制处理函数仅响应特定的鼠标按钮。
175 
176              -->
177              <h2>为什么在 HTML 中监听事件?</h2>
178              <!-- 
179              你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。
180              但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。
181              实际上，使用 v-on 有几个好处：
182             1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
183             2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
184             3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
185               -->
186         </div>
187         <script type="text/javascript">
188             var app=new Vue({
189                 el:'#app',
190                 data:{
191                     msg:'hello world!!!',
192                     counter:0,
193                     name: 'Vue.js'
194                 },
195                 // 在 `methods` 对象中定义方法
196                 methods:{
197                     greet: function (event) {
198                       // `this` 在方法里指向当前 Vue 实例
199                       alert('Hello ' + this.name + '!')
200                       // `event` 是原生 DOM 事件
201                       if (event) {
202                         alert(event.target.tagName)
203                       }
204                     },
205                     say: function (message) {
206                       alert(message);
207                     },
208                     warn: function (message, event) {
209                         // 现在我们可以访问原生事件对象
210                         if (event) {
211                           event.preventDefault();
212                         }
213                         alert(message);
214                     },
215                     doThis:function(){
216                         alert('点我666');
217                     },
218                     doThat:function(){
219                         alert('点它666');
220                     },
221                     submit:function(){
222                         alert('点我--submit');
223                     },
224                     onPageDown:function(){
225                         alert('点我--onPageDown');
226                     },
227                     doSomething:function(){
228                         alert('点我--doSomething');
229                     },
230                     clear:function(){
231                         alert('点我--clear');
232                     },
233                     onClick:function(){
234                         alert('点我--onClick');
235                     },
236                     onCtrlClick:function(){
237                         alert('点我--onCtrlClick');
238                     }
239                 }
240             });
241         </script>
242     </body>
243 </html>