Vue.js教程_6

事件处理

1. 监听事件

   <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
       }
   })
   

2. 事件处理方法-调用方法处理v-on:click="functionName"，在methods中添加方法：functionName：function(event)，函数中this是指当前Vue实例。event 是原生 DOM 事件。【原生DOM事件有哪些参数和属性？已知有event.target.tagName为BUTTON】。也可以用 JavaScript 直接调用方法：vm.greet() // => 'Hello Vue.js!'
3. 内联处理器的方法：（带参数的方法），<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)
4. 事件修饰符
   规范：方法只有纯粹的数据逻辑，而不是去处理DOM事件逻辑。为了达到这个目的，v-on提供了事件修饰符。
   • .stop 阻止单击事件继续传播
   • .prevent 提交事件不再重载页面
   • .capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
   • .self 只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
   • .once 点击事件将只会触发一次
   • .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成， 这其中包含 event.preventDefault() 的情况
   • 各个事件修饰符的功能有待学习
5. 键盘修饰符
   <input v-on:keyup.enter="submit">： 只有在 key 是 Enter 时调用 vm.submit()
<input v-on:keyup.page-down="onPageDown">：处理函数只会在 $event.key 等于 PageDown 时被调用。
6. 系统修饰键
   • .ctrl
   • .alt
   • .shift
   • .meta

   <!-- Alt + C -->
   <input @keyup.alt.67="clear">
   <!-- Ctrl + Click -->
   <div @click.ctrl="doSomething">Do something</div>
   

7. .exact修饰符
   .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

   <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
   <button @click.ctrl="onClick">A</button>
   
   <!-- 有且只有 Ctrl 被按下的时候才触发 -->
   <button @click.ctrl.exact="onCtrlClick">A</button>
   
   <!-- 没有任何系统修饰符被按下的时候才触发 -->
   <button @click.exact="onClick">A</button>