Vue.js实例学习：事件处理

一、监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。（ v-on: 简写为@）

<div id="app">
  <button @click = "count++">加 1</button>
  <button @click = "count--">减 1</button>
  <p>{{count}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    count:0
  }
});
</script>

输出：初始值为0

点击"加1"就增加1，同理点击"减1"就减少1

---

二、事件处理方法

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

1、调用无参数方法

顺便补一下js的event:

1. 将even（事件）作为参数，就是这个“点击”事件，通过这个even，可以获取到event.target，就是点击的对象等等属性。PS：那个even参数可加可不加，需要用到的时候就加。
2. event也就是事件的意思，就相当于把这个事件的对象传给这个方法，event包含了这个事件的所有参数和信息

<div id="app">
  <button @click = "greet">button</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    greet:function(event){//因为上面没有给该函数传递参数,所以给他个参数时,系统默认为event,可以随便起名字(阿毛,阿狗) 
    
      console.log("out");
      
      //`event` 是原生 DOM 事件，与上面的event(阿毛,阿狗)对应上即可,意思是,如果是一个 事件 就输出触发事件标签的标签名；
      //this在方法里指当前 Vue 实例
      if(event && this.name != ""){
      // 会输出标签的名称 BUTTON,这一行的event是固定写法,必须通过event对象调用 
	     console.log(event.target.tagName);
      }
    }
  }
});
</script>

控制台输出：
out
BUTTON

2、有参数方法：内联处理器中的方法

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

<div id="app">
  <button @click = "say('bty')">say bty</button>
  <button @click = "say('bty2')">say bty2</button>
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    say:function(message){
      console.log(message);
    }
  }
});
</script>

点击"say bty" , 控制台输出：bty
点击"say bty2" , 控制台输出：bty2

（2） $ event

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

<div id="app">
  <input type="submit" @click = "warn('Form cannot be submitted yet.', $event)">
</div>
<script type="text/javascript">
var vm = new Vue({
  el:'#app',
  data:{
    name:"bty"
  },
  methods:{
    warn:function(message,event){    
      if(event){
        console.log("do if");
        event.preventDefault();
      }
      console.log(message);
    }
  }
});
</script>

点击提交按键，控制台输出：
do if
Form cannot be submitted yet.



问：“第一个无参数 和 内联处理器中的方法 有什么区别？“
答：“请观察，一个有括号，一个没括号，对吧？
没括号的这个，直接就是函数名，有括号的这个，实际是一条JS语句，有括号的这个就叫『内联处理器』。“具体详解见该链接

---

三、修饰符

1、事件修饰符

在事件处理中调用 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>

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

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

注：

1、使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

• v-on:click.prevent.self 会阻止所有的点击
• v-on:click.self.prevent 只会阻止对元素自身的点击。

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

2、按键修饰符

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

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

（1）按键修饰符别名

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

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

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

全部的按键别名：

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

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

<!-- 可以使用 `v-on:keyup.f1` -->
Vue.config.keyCodes.f1 = 112

（3）自动匹配按键修饰符
你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<!-- 处理函数仅在 $event.key === 'PageDown' 时被调用 -->
<input @keyup.page-down="onPageDown">

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

3、系统修饰键

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

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

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

例如：

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

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

（2）更精准的：
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

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

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

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

（3）鼠标按钮修饰符

• .left
• .right
• .middle

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



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

• 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
• 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
• 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。