8 事件处理

1. 可以用 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
     }
   })
   

   • 注意 v-on:click attribute 的值是一段 JS 代码，而不是表达式。
   • 也就是说可以直接把 JS 代码写在 v-on 指令中。

2. v-on 还可以接受一个需要调用的方法名。

   • 直接写方法名即可，比如“v-on:click='greet'”，而不需要使用调用语法，“v-on:click='greet()'”

3. 同时也可以使用调用方法语法。。。

   • 上一条草率了。但我不想删掉。
     例子：

     <div id="example2">
       <button v-on:click="greet()">Greet</button>
       <button v-on:click="sayHi(' VUE?')">Say Hi</button>
     </div>
     

     let app2 = new Vue({
         el: "#example2",
         data: {
     
         },
         methods: {
             greet: function() {
                 alert("Hello !");
             },
             sayHi: function(message){
                 alert("Hi, "+ message);
             }
         }
     });
     

   • 官方把这个叫做内联 JavaScript 语句中调用方法。v-on 指令中的 JavaScript 语句就叫做 “内联 JavaScript 语句吗”。
   • 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。

     <button v-on:click="warn('Form cannot be submitted yet.', $event)">
       Submit
     </button>
     

     methods: {
       warn: function (message, event) {
         // 现在我们可以访问原生事件对象
         if (event) {
           event.preventDefault()
         }
         alert(message)
       }
     }
     

   • 不过为什么即使不传入 $event 方法，也能在方法中使用 event 呢？比如：

     <div id="example2">
     <button v-on:click="greet()">Greet</button>
     <button v-on:click="sayHi(' VUE?')">Say Hi</button>
     </div>
     

             let app2 = new Vue({
        el: "#example2",
        data: {
     
        },
        methods: {
            greet: function() {
                alert("Hello !");
                if (event) {
                    alert(event.target.tagName)
                }
            },
            sayHi: function(message){
                alert("Hi, "+ message);
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
     });
     

4. 事件修饰符。Vue.js 为 v-on 指令提供了事件修饰符。

   • 设计事件修饰符的 原因：在事件处理程序中经常需要调用 event.preventDefault() 或 event.stopPropagation() 。尽管在方法中可以轻易实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
   • 事件修饰符有：.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 新增特性：不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
   • 2.3.0 新增特性：对应 addEventListener 中的 passive 选项的 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

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

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

5. 按键修饰符

   • 为键盘事件添加详细的按键修饰符

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

   • 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
   • 按键码虽然已经废弃，但为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right
   • 你还可以通过全局 config.keyCodes 对象 自定义按键修饰符别名

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

6. 系统修饰键