vue DOM事件

目录：

监听事件

事件修饰符

按键修饰符

-------------------------

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

demo:

 <div id="container">
    <input type="button" value="点我" v-on:click="clickme()"/>
    <p>{{num}}</p>
  </div>

  <script>
    var vm = new Vue({
      el:"#container",
      data:{
        // 定义一个数据默认是1
        num:1
      },
      methods:{
        clickme:function(){
          this.num++
        }
      }
    })
  </script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

• .stop
• .prevent
• .capture
• .self

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

• enter
• tab
• delete (捕获 “删除” 和 “退格” 键)
• esc
• space
• up
• down
• left
• right

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

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

 

 

 

 

参考博文：https://www.w3cschool.cn/vuejs2/vuejs2-events.html