vue之事件(二)

vue中可以使用v-on进行事件处理。当然v-on也有简写方式 [@]

1.事件监听的好处？
所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。
2.v-on 有几个好处：
扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法，因为你无须在Javascript里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
3.事件类型
<1>普通事件

v-on:click=@click    点击事件
v-on:mouseover=@mouseover  鼠标进入事件   
v-on:mouseenter=@mouseenter  鼠标移入事件
v-on:mouseout=@mouseout       鼠标离开事件
v-on:mouseleave=@mouseleave 鼠标移出事件
v-on:mousemove=@mousemove 鼠标移动事件
v-on:mousedown=@mousedown 鼠标按下事件
v-on:mouseup=@mouseup       鼠标抬起
v-on:dblclick=@dblclick         双击
v-on:keyup=@keyup           键盘抬起
v-on:keydown=@keydown   键盘按下
v-on:submit=@submit        提交
v-on:focus=@focus       触焦
v-on：blur=@blur          失焦

<2> 事件修饰符

.self:
<!-- 即事件不是从内部元素触发的 -->
.once:
<!-- 事件将只会触发一次 -->
.stop:
<!-- 阻止事件冒泡 -->
.prevent:
<!-- 阻止默认事件 -->
.capture:
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
.passive:
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<3>按键修饰符

@keydown || @keyup
@keydown.enter=@keydown.13
@keydown.tab
@keydown.delete 
@keydown.esc
@keydown.space
@keydown.up=@keydown.37
@keydown.down=@keydown.39
@keydown.left=@keydown.40
@keydown.right=@keydown.38

<4> 鼠标按钮修饰符

@click.left     点击鼠标左键
@click.right    点击鼠标右键
@click.middle   点击鼠标中间滚轮