vue学习第六天——事件处理

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

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

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

这样子是将js代码写在div里面，当然也可以封装成方法写在script标签里面如：

  <button v-on:click="greet">Add 1</button>

var example2 = new Vue({
  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)
      }
    }
  }
})

划重点

这里牵扯到一个内联处理器的问题
看着两行代码：

  <button v-on:click="greet">Add 1</button>

  <button v-on:click="greet()">Add 1</button>

这就有大不一样。没括号的这个，直接就是函数名，有括号的这个，实际是一条JS语句，有括号的这个就叫『内联处理器』。
没有括号的，直接绑定的方法，所以如果方法有参数，不能忘里面传，但没有括号的自动往里面传一个event参数（event是原生DOM事件）。
有括号的，如果参数列表里没有“event”这个参数，也可以自动往里面传一个event，并且可以直接用event这个名字来使用。但如果参数列表里面有参数，只要不用event这个名字，函数里依旧可以使用event参数，如果参数列表里有event，那么我们可以传一个“$event”参数，也能得到无括号娘胎里自带的event参数。

除此之外：
v-on没法绑定vue实例之外的方法。
vue实例之外的方法可以调用vue里面的方法和属性，调用方法直接就是vue实例名.方法名。调用vue里面data里面的数据则是用alert("外面调用vue里面data的数据："+example2.$data.name)。
这里面的$的详细说明还不是太懂。

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()（这两个方法是处理事件冒泡时所用的方法，详情可见我博文里面的事件冒泡和事件捕获） 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

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

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 （阻止事件冒泡）-->
<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 新增

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

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。

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

Key Values

在收听键盘事件时，我们经常需要检查特定键。Vue允许v-on在监听关键事件时添加关键修饰符：

只有传回来的是enter，才会调用sumbit方法。
<input v-on:keyup.enter="submit">

您可以KeyboardEvent.key通过将它们转换为kebab-case 直接使用通过修饰符公开的任何有效键名。（也就是使用短横线隔开式）

<input v-on:keyup.page-down="onPageDown">

在上面的示例中，只有在$event.key等于时才会调用处理程序’PageDown’。
在传统浏览器支持需要时，Vue为最常用的密钥代码提供别名：

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

2.1.0+中的新功能，添加了很多系统修改键

• .ctrl
• .alt
• .shift
• .meta

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

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

请注意，修饰键与常规键不同，当与keyup事件一起使用时，必须在发出事件时按下它们。换句话说，keyup.ctrl只有在按住时释放按键才会触发ctrl。如果ctrl单独释放密钥，则不会触发。如果你想这样的行为，使用keyCode的ctrl，而不是：keyup.17。

.exact 修饰符

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

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

事件修饰的好处

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

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

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