vue入门——事件处理

事件修饰符

  通过前边的学习，我们已经知道通过 v-on 指令，能够绑定事件；在事件处理中，调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。为了更加方便的解决这个问题，Vue 提供了事件修饰符。

• .stop 阻止事件的冒泡行为

    事件默认存在冒泡行为，也就是说如果父级标签中存在相同的事件，当前元素的事件会向上冒泡调用父级的事件，例如：

  <h1>冒泡</h1>
  <div @click="parent">
      parent
      <div @click="child">child</div>
  </div>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
  
          },
          methods: {
              parent() {
                  alert('parent')
              },
              child() {
                  alert('child')
              }
          }
      })
  </script>
  

    点击 child 会发现提示框会出现两次；为了解决事件的冒泡，我们可以在 child 的事件上添加 .stop 修饰符：

  <h1>冒泡</h1>
  <div @click="parent">
      parent
      <div @click.stop="child">child</div>
  </div>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
  
          },
          methods: {
              parent() {
                  alert('parent')
              },
              child() {
                  alert('child')
              }
          }
      })
  </script>
  

• .prevent: 禁用默认方法

    HTML 中有些元素存在默认的行为，例如：表单的提交，默认情况下，表单提交之后会刷新页面（ps:受益于双向绑定，我们通常表单提交方法，我们会直接绑定在提交按钮上，而不是 submit 方法，这里仅以此为例）

  <form @submit="post()">
      {{message}}
      <button>提交</button>
  </form>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
              message : 'Hello world'
          },
          methods: {
              post() {
                  alert('111')
              }
          }
      })
  </script>
  

    这种情况下，为了时表单提交不刷新页面，我们可以使用 event.preventDefault()， 方法绑定时，需要提交一个参数 $event:

  <form @submit="post($event)">
      {{message}}
      <button>提交</button>
  </form>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
              message : 'Hello world'
          },
          methods: {
              post(event) {
              	event.preventDefault()
                  alert('111')
              }
          }
      })
  </script>
  

    但是，Vue 提供了更简单的处理方式，在事件后边添加 .prevent 修饰符即可：

  <form @submit.prevent="post()">
      {{message}}
      <button>提交</button>
  </form>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
              message : 'Hello world'
          },
          methods: {
              post() {
                  alert('111')
              }
          }
      })
  </script>
  

• .self: 只有点击自己时才会调用

    上边的冒泡行为，还有一个解决办法，就是在父级事件上添加 .self 修饰符，这样，就只有点击父级元素才会调用，子级冒泡，也不会起作用了：

  <h1>冒泡</h1>
  <div @click.self="parent">
      parent
      <div @click="child">child</div>
  </div>
  

• .capture ：元素自身触发的事件先在此处理，然后才交由内部元素进行处理

  <h1>冒泡</h1>
  <div @click.capture="parent">
      parent
      <div @click="child">child</div>
  </div>
  

    上边的代码，会先执行 parent() 方法，然后，执行 child() 方法

• .once： 执行一次

• .passive：让默认事件立即触发

键盘修饰符

  v-on 不仅可以监听 HTML 元素的相关事件，还能够监听键盘事件：

• .enter
• .tab
• .delete (捕获 “删除” 和 “退格” 键)
• .esc
• .space
• .up
• .down
• .left
• .right

<input v-on:keyup.enter="submit">

鼠标修饰符：

• .left
• .right
• .middle

<div @click.right="child">child</div>