事件处理（Vue2笔记)监听事件 v-on ：可以用v-on指令监听DOM事件，并再触发时运行一些JavaScript代

监听事件

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

  <div id="app">
       <button v-on:click="n+=1">点击让n+1</button>
       <p>这个按钮已经被点击了{{n}}次</p>
  </div>

new Vue({
      el: "#app",
      data: {
       n:0
      }
    })

运行结果：

内联处理器中的方法

可以在内联JavaScript语句中调用方法

 <div id="app">
       <button v-on:click="Lan('vue')">Vue</button>
       <button v-on:click="Lan('react')">React</button>
  </div>

new Vue({
      el: "#app",
      methods: {
        Lan:function(message){
          alert(message)
        }
      },
    })

运行结果：

事件修饰符

Vue.js为v-on提供了事件修饰符，比如：

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

  <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="todo"></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">self</div>

使用修饰符时要注意顺序：
v-on:click.prevent.self会阻止所有的点击
v-on:click.self.prevent只会阻止对元素自身的点击

2.1.4新增：

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

2.3.0新增：

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

不要把.passive和.prevent一起使用，因为.prevent会被忽略，.passive会告诉浏览器你不想阻止事件的默认行为

按键修饰符

v-on在监听键盘事件时可以添加按键修饰符：

<input v-on:keyup.enter="submit">
//PageDown 时调用
<input v-on:keyup.page-down="onPageDown">

按键码

按键码的一些别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right 可以通过全局config.keyCodes对象自定义按键修饰符别名：

// v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

系统修饰键

2.1.0新增

.ctrl
.alt
.shift
.meta

<!--alt+c -->
<input v-on:keyup.alt.67="clear">  
<!-- ctrl + click -->  
<div v-on:click.ctrl="todo"></div>

`.exact`修饰符

2.5.0新增
.exact 修饰符允许可以控制由精确的系统修饰符组合触发的事件

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

鼠标按钮修饰符

2.2.0新增

.left
.right
.middle

事件处理（Vue2笔记)