Vue特定模板语法实战（四）—— 事件处理

监听事件

厚嘴猴

240人浏览 · 2020-05-08 17:38:55

厚嘴猴 · 2020-05-08 17:38:55 发布

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

事件处理

上一章：Vue入门实战教程（三）—— 视图层：模板及指令

监听事件

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

事件处理方式

内联表达式处理

简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    counter: 0
  }
})
</script>
</body>
</html>

调用一个方法来处理

实现上例同样的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <button v-on:click="add1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods: {
    add1: function (event) {
	  // `event` 是原生 DOM 事件
      if (event) {
        event.preventDefault()
      }
      // `this` 在方法里指向当前 Vue 实例
      this.counter += 1    
    }
  }
})
</script>
</body>
</html>

在内联 JavaScript 语句中调用方法处理

实现上例同样的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
  <button v-on:click="add1(1, $event)">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods: {
    add1: function (addNum, event) {
	  // `event` 是原生 DOM 事件
      if (event) {
        event.preventDefault()
      }
      // `this` 在方法里指向当前 Vue 实例
      this.counter += addNum    
    }
  }
})
</script>
</body>
</html>

事件修饰符

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

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

常用事件修饰符

事件修饰符	使用场景	含义	例子	备注
.stop	原生的 DOM 事件	阻止事件继续传播	`<a v-on:click.stop="doThis"></a>`
.prevent	原生的 DOM 事件	不要执行与事件关联的默认动作	`<form v-on:submit.prevent="onSubmit"></form> <form v-on:submit.prevent></form>`	修饰符可以串联，顺序执行 `<a v-on:click.stop.prevent="doThat"></a>`
.capture	原生的 DOM 事件	使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理	`<div v-on:click.capture="doThis">...</div>`
.self	原生的 DOM 事件	只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的	`div v-on:click.self="doThat">...</div>`
.once	原生的 DOM 事件，自定义的组件事件	事件只会触发一次	`div v-on:click.once="doThat">...</div>`
.passive	原生的 DOM 事件	事件默认行为将会立即触发，而不会等待事件处理完成	`<div v-on:scroll.passive="onScroll">...</div>`	不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

键盘事件修饰符

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

按键码

使用 keyCode attribute 也是允许的：

按键码的别名	含义
.enter	回车键
.tab	Tab键
.delete	“删除”和“退格”键
.esc	返回键
.up	向上键
.down	回下键
.left	向左键
.right	向右键

鼠标或键盘事件的系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
与常规按键区别：在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

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

系统修饰键的修饰符

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

<!-- 有 Ctrl 按下就触发-->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标事件的鼠标按钮修饰符

修饰符	含义
.left	鼠标左键
.right	鼠标右键
.middle	鼠标中间滑轮

例：

<!--鼠标右键点击 -->
<button @click.right="doThat">ok</button>

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

下一章：Vue入门实战教程（四）—— 模型层：数据

特定模板语法实战：

Vue特定模板语法实战（一）：Class和Style绑定

Vue特定模板语法实战（二）：条件渲染

Vue特定模板语法实战（三）：列表渲染

Vue特定模板语法实战（四）：事件处理

Vue特定模板语法实战（五）：表单输入绑定

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^