vue.js的事件处理

vue.js的事件处理

1.事件处理方法

• 可以用v-on指令监听DOM事件，并正在触发是运行一些javascript代码。
  示例：

    <div id="example-1">
      <button v-on:click="say(hi)">say hi</button>
    </div>
    
    var example1 = new Vue({
      el: '#example-1',
     methods: { 
    say: function (message) {
         alert(message) 
            }
        }
    })
  

2.事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.top   阻止事件冒泡
.prevent  阻止浏览器默认行为
.capture  阻止捕获行为
.self  自身触发
.once  只执行一次
.passive  滚动行为结束后触发（scroll）

3.按键修饰符（键盘事件 key keydown keypress）

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

4.自定义按键修饰符

1. 全局修改（现在不用定义也可以）

    Vue.config.keyCodes.自定义修饰符 = 键盘码
   

   使用：
   @keyup.自定义修饰符 = eventFnName

2. 自定义事件（自定义事件类型）

   1. 使用new Vue()的实例来定义

       new Vue().$on(eventName,callback)
      

   2. 触发

       new Vue().$emit(eventName)
       this.$emit(eventName)