Vue——事件处理

8 事件处理

---

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

   
     Add 1
     
   The button above has been clicked {{ counter }} times.
   
   

   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. 同时也可以使用调用方法语法。。。

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

     
       Greet
       Say Hi
     
     

     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 把它传入方法。

     
       Submit
     
     

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

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

     
     Greet
     Say Hi
     
     

             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
   • 一些用法如下：

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     ...
     
     
     
     ...
     

   • 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
   • 只有串联使用修饰符才有上述情况吗？
   • 2.1.4 新增特性：不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
   • 2.3.0 新增特性：对应 addEventListener 中的 passive 选项的 .passive 修饰符。这个 .passive 修饰符尤其能够提升移动端的性能。

     
     
     
     ...
     

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

5. 按键修饰符

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

   • 你可以直接将 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. 系统修饰键