事件处理
- 监听事件
<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 } }) - 事件处理方法-调用方法处理v-on:click="functionName"，在methods中添加方法：
functionName：function(event)，函数中this是指当前Vue实例。event是原生 DOM 事件。【原生DOM事件有哪些参数和属性？已知有event.target.tagName为BUTTON】。也可以用 JavaScript 直接调用方法：vm.greet() // => 'Hello Vue.js!' - 内联处理器的方法：（带参数的方法），
<button v-on:click="say('hi')">Say hi</button>，同样在methods中定义方法，say: function(message)。或者需要访问原始DOM事件，使用特殊变量$event传入方法。
例如：<button v-on:click="warm('Form cannot be submitted yet.', $event)"></button>。methods中方法：warn: function(message, event) - 事件修饰符
规范：方法只有纯粹的数据逻辑，而不是去处理DOM事件逻辑。为了达到这个目的，v-on提供了事件修饰符。- .stop 阻止单击事件继续传播
- .prevent 提交事件不再重载页面
- .capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
- .self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
- .once 点击事件将只会触发一次
- .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待
onScroll完成， 这其中包含event.preventDefault()的情况 - 各个事件修饰符的功能有待学习
- 键盘修饰符
<input v-on:keyup.enter="submit">： 只有在key是Enter时调用vm.submit()
<input v-on:keyup.page-down="onPageDown">：处理函数只会在 $event.key 等于 PageDown 时被调用。 - 系统修饰键
- .ctrl
- .alt
- .shift
- .meta
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> - .exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
