您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vue 事件处理

本小节我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令 v-on,本章节我们将详细介绍在 v-on 的一些。如何传递参数、如何使用事件修饰符等。其中,事件修饰符是本章节的难点。事件修饰符很多,同学们不需要一下子都记住,只要学会如何使用它,在开发过程中如果有所遗忘,可以通过翻看文档来使用。

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 。 — 官方定义

使用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 。

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品 {{count}}</div>
      <button v-on:click="count = count + 1"></button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 
      },
    })
  </script>
</html>

解释:
在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定来 click 事件,并在点击的时候执行 count + 1 的操作。

在上面的例子中,我们把事件处理直接写在模板中,然而许多事件处理的逻辑都很复杂,所以直接把JS写在 v-on 指令中有时并不可行,v-on 指令可以接收定义的来。示例如下:

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品 {{count}}</div>
      <button v-on:click="add"></button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 
      },
      methods: {
        add() {
          this.count = this.count + 
        }
      }
    })
  </script>
</html>

解释:
在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定来 click 事件,并在点击的时候执行 add 。
在 JS 第 9-11 行,我们定义了 add;触发该时给 count + 1。

有时候我们需要在事件触发的时候传递一些参数,

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品 {{count}}</div>
      <button v-on:click="setCount(10)"> 设置为 10 个 </button>
      <button v-on:click="setCount(0)"> 设置为 0 个 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 
      },
      methods: {
        setCount(count, event) {
          this.count = count
        }
      }
    })
  </script>
</html>

解释:
在 html 第 3 行,我们使用 v-on 指令给 button 元素绑定了 click 事件,并在点击的时候执行 add 。
在 JS 第 9-11 行,我们定义了 add;触发该时给 count + 1。

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

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>商品 {{count}}</div>
      <button v-on:click="setCount(10, $event)"> 设置为 10 个 </button>
      <button v-on:click="setCount(0, $event)"> 设置为 0 个 </button>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 
      },
      methods: {
        setCount(count, event) {
          this.count = count
          console.log(event)
        }
      }
    })
  </script>
</html>

解释:
在上述 JS 第 9-12 行,我们定义了事件 setCount。 在按钮点击事件中,我们将 $event 对象传递给,因此,在 setCount 中可以访问到原生事件对象。

在事件处理程序中 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在中轻松实现这点,但更好的方式是:只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了这个问题,Vue.js 为 v-on 提供了事件修饰符。就是在事件后面以后缀的形式指定的修饰符。

知识扩展:
event.preventDefault() 用来取消事件的认动作。
event.stopPropagation() 用来阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。

Vue 提供了以下事件修饰符:

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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

接下来,我们用完整的示例来看下这些修饰符的使用。

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <style>
    .container{
      height: px;
      overflow-x: auto;
      flex: ;
    }
    .container div{
      height: px;
    }
  </style>
  <body>
    <div id="app">
      <!-- stop 案例 -->
      <div @click="clickTargetContainer">
        <button @click.stop="clickTargetA">点我 stop 案例</button>
        <button @click="clickTargetA">点我 无 stop 修饰</button>
      </div>

      <!-- submit.prevent 案例 -->
      <form method="get" action="/" @submit.prevent="submit">
        <button type="submit">点我提交表单</button>
      </form>

      <form method="get" action="https://www.baidu.com" @submit="submit">
        <button type="submit">点我提交表单</button>
      </form>

      <!-- capture 案例 -->
      <div v-on:click.capture="capture">
        <button @click.stop="clickTargetA">点我 capture 案例</button>
      </div>

      <!-- self 案例 -->
      <div @click.self="clickTargetContainer" style="padding: px;border: px solid #cccccc;">
        <button @click="clickTargetA">点我 self 案例</button>
      </div>

      <!-- once 案例 -->
      <div>
        <button @click.once="clickTargetA">点我 once 案例</button>
      </div>

    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      methods: {
        clickTargetContainer() {
          alert('父级容器点击事件触发')
        },
        clickTargetA() {
          alert('按钮点击事件触发')
        },
        submit() {
          alert('提交表单了')
        },
        capture() {
          alert('虽然你点击的是内部元素,但是我先触发!')
        }
      }
    })
  </script>
</html>

解释:
第 4-7 行,stop 案例中,当我们给按钮 click 事件 .stop 修饰符之后,点击按钮,事件不会向递。
第 10-16 行,submit.prevent 案例中,当给 submit 事件 .prevent 修饰符之后,提交事件不再重载。
第 19-21 行,capture 案例中,我们给了 capture 事件,当点击按钮的时候,会先触发 capture 中的事件,然后再触发按钮绑定的点击事件。
第 24-26 行,self 案例中,我们给的点击事件了 .self 的修饰符,所以只有点击的时候才会触发该,当点击按钮的时候并不会触发绑定的事件。
第 29-31 行,once 案例中,我们给按钮的点击事件了 .once 的修饰符,所以只有首次点击按钮的时候会触发事件,再次点击之后将不会触发事件。

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

<!-- 只有在 `key` 是 `Enter` 时 `login()` -->
<input v-on:keyup.enter="login">

<!-- 也可以使用 keyCode -->
<input v-on:keyup.13="login">

为了在必要的情况下旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

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

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

例如:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

Vue提供了.exact修饰符,实现单独的系统按键的事件。

例如:

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

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

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

本节,我们带大家学习了事件处理。主要知识点有以下几点:


联系我
置顶