vue基础——事件处理

监听事件

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

示例：

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

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

结果：

事件处理方法

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

示例：

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

 var example2 = new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　JS
   el: '#example-2',
   data: {
     name: 'Vue.js'
   },
   // 在 `methods` 对象中定义方法
   methods: {
     greet: function (event) {
       // `this` 在方法里指向当前 Vue 实例
       alert('Hello ' + this.name + '!')
       // `event` 是原生 DOM 事件
       if (event) {
         alert(event.target.tagName)
       }
     }
   }
 })

 // 也可以用 JavaScript 直接调用方法
 example2.greet() // => 'Hello Vue.js!'

内联处理器中的方法

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

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

 new Vue({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 JS
   el: '#example-3',
   methods: {
     say: function (message) {
       alert(message)
     }
   }
 })

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

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

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

事件修饰符

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

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

——　　.stop

——　　.prevent

——　　.capture

——　　.self

——　　.once

——　　.passive

 <!-- 阻止单击事件继续传播 -->　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
 <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 只会阻止对元素自身的点击。

2.1.4新增

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

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

2.3.0新增

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

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

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

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

按键修饰符

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

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

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

 <!-- 同上 -->　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 HTML
 <input v-on:keyup.enter="submit">

 <!-- 缩写语法 -->
 <input @keyup.enter="submit">

全部按键的别名：

——　　.enter

——　　.tab

——　　.delete(捕获"删除"和"退格"键)

——　　.esc

——　　.space

——　　.up

——　　.down

——　　.left

——　　.right

可以通过全局 config. keyCodes 对象自定义按键修饰符别名：

 // 可以使用 `v-on:keyup.f1`　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
 Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

2.5.0新增

你也可以直接将 keyboardEvent.key 暴露的任意有效按键名转换为 kabab-case来作为修饰符：

<input @keyup.page-down="onPageDown">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML

在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。

注意：有一些按键(.esc 以及所有的方向键)在IE9中有不同的 key 值，如果你想支持IE9，它们的内置别名应该是首选。

系统修饰键

2.1.0新增

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

——　　.ctrl

——　　.alt

——　　.shift

——　　.meta

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

.exact 修饰符

2.5.0 新增

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

 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML
 <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

这些修饰符会限制处理函数仅相应特定的鼠标按钮。

为什么在HTML中监听事件？

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

　　1.扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法。

　　2.因为你无需在JavaScript里手动绑定事件，你的ViewModel代码可以使非常纯粹的逻辑，和DOM完全解耦，更易于测试。

　　3.当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

巴特西

vue基础——事件处理

最新文章

热门文章