vue基础——事件处理

监听事件

可以用 v-on 指令监听dom事件，并在触发时运行一些JavaScript代码。

示例：

1 <div id="example-1">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2   <button v-on:click="counter += 1">Add 1</button>
3   <p>The button above has been clicked {{ counter }} times.</p>
4 </div>

1 var example1 = new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JS
2   el: '#example-1',
3   data: {
4     counter: 0
5   }
6 })

结果：

事件处理方法

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

示例：

1 <div id="example-2">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2   <!-- `greet` 是在下面定义的方法名 -->
3   <button v-on:click="greet">Greet</button>
4 </div>

 1 var example2 = new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JS
 2   el: '#example-2',
 3   data: {
 4     name: 'Vue.js'
 5   },
 6   // 在 `methods` 对象中定义方法
 7   methods: {
 8     greet: function (event) {
 9       // `this` 在方法里指向当前 Vue 实例
10       alert('Hello ' + this.name + '!')
11       // `event` 是原生 DOM 事件
12       if (event) {
13         alert(event.target.tagName)
14       }
15     }
16   }
17 })
18 
19 // 也可以用 JavaScript 直接调用方法
20 example2.greet() // => 'Hello Vue.js!'

内联处理器中的方法

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

1 <div id="example-3">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2   <button v-on:click="say('hi')">Say hi</button>
3   <button v-on:click="say('what')">Say what</button>
4 </div>

1 new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
2   el: '#example-3',
3   methods: {
4     say: function (message) {
5       alert(message)
6     }
7   }
8 })

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

1 <div id="example-3">
2   <button v-on:click="warn('Form cannot be submitted yet.', $event)">　　　　　　　　　　　　　　　　　　HTML
3     Submit
4   </button>
5 </div>

 1 new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   JS
 2   el: '#example-3',
 3   methods: {
 4     warn: function (message, event) {
 5       // 现在我们可以访问原生事件对象
 6       if (event) event.preventDefault()
 7       alert(message)
 8     }
 9   }
10 })

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropragation() 是非常常见的需求。尽管我们可以再方法总轻松实现这点，但是更好的方法时：方法只有纯粹的数据逻辑，而不是处理dom细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

——　　.stop

——　　.prevent

——　　.capture

——　　.self

——　　.once

——　　.passive

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

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

2.1.4新增

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

不像其他只能对原生的dom事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在没有关系！

2.3.0新增

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

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

这个 .passive 修饰符尤其能够提升移动端的性能。

注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住， .prevent 会告诉浏览器你不像阻止事件的默认行为。

按键修饰符

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

1 <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
2 <input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以Vue为最常用的按键提供了别名：

1 <!-- 同上 -->　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 HTML
2 <input v-on:keyup.enter="submit">
3 
4 <!-- 缩写语法 -->
5 <input @keyup.enter="submit">

全部按键的别名：

vue基础——事件处理

猜你喜欢