事件处理

1.监听事件

 使用`v-on`指令监听DOM事件，并且在事件被触发是执行一些javascripte代码

​ 当需要执行的javascripte代码比较复杂的时候，可以将监听的事件交给一个需要调用的方法进行处理

<button v-on:click="greet"></button>
methods:{
    greet:function(){
    console.log("你好呀")
    }
}
//传递参数给事件处理函数
<button v-on:click="greet('someStr')"></button>

//传递事件对象给处理函数
<button v-on:click="greet($event)"></button>

2.事件修饰符

在平常对DOM的操作中经常涉及到事件的种种情况，例如阻止事件跳转、事件只执行一次等等。Vue中更好的方法是将事件处理函数尽量的少涉及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.once="doThis"></a>

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

3.按键和鼠标的监听

//当鼠标按下回车时触发事件
<input v-on:keyup.enter="handerEnter" v-model="inputTag">

    //Vue事件methods内容
    handerEnter(){
                alert(this.inputTag)
        }