事件监听
v-on介绍
-
在前端开发中,咱们须要常常和用于交互。这个时候,咱们就必须监听用户发生的时间,好比点击、拖拽、键盘事件等等前端
-
在Vue中如何监听事件呢?使用v-on指令vue
-
做用:绑定事件监听器app
-
缩写:语法糖 @函数
-
预期:Function | Inline Statement | Objectthis
-
参数:eventspa
v-on基础
- 咱们用一个监听按钮的点击事件,来简单看看v-on的使用
- 下面的代码中,咱们使用了v-on:click="counter++”
- 另外,咱们能够将事件指向一个在methods中定义的函数
<div id="app"> <h2>{{counter}}</h2> <button v-on:click="counter++">点击按钮1</button> <button v-on:click="btnClick()">点击按钮2</button> </div> <script src="../../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { btnClick() { this.counter++ } } }) </script>
v-on也有对应的语法糖:v-on:click能够写成@click
<button v-on:click="counter++">点击按钮1</button> <button v-on:click="btnClick()">点击按钮2</button> <!--语法糖--> <button @click="counter++">点击按钮3</button> <button @click="btnClick()">点击按钮4</button>
v-on参数
当经过methods中定义方法,以供@click调用时,须要注意参数问题:code
- 状况一:若是该方法不须要额外参数,那么方法后的()能够不添加。
- 可是注意:若是方法自己中有一个参数,那么会默认将原生事件event参数传递进去
- 状况二:若是须要同时传入某个参数,同时须要event时,能够经过$event传入事件。
<div id="app"> <h2>点击次数: {{counter}}</h2> <!--状况一: 方法没有参数--> <button @click="btnClick1">按钮1</button> <button @click="btnClick1()">按钮1</button> <!--状况二: 若是方法有参数--> <!--1.调用时不传入参数,会默认将event做为第一个参数传入--> <button @click="btnClick2">按钮2</button> <!--2.调用时不传入参数,那么参数为undefined--> <button @click="btnClick2()">按钮2</button> <!--状况三: 若是方法有参数,而且但愿传入event--> <button @click="btnClick3(10, $event)">按钮3</button> </div> <script src="../../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { btnClick1() { console.log('按钮1被点击'); }, btnClick2(payload) { console.log('按钮2被点击', payload); }, btnClick3(num, event) { console.log('按钮3被点击', num, event); } } }) </script>
v-on修饰符
在某些状况下,咱们拿到event的目的多是进行一些事件处理。Vue提供了修饰符来帮助咱们方便的处理一些事件:orm
- .stop - 调用 event.stopPropagation()
- .prevent - 调用 event.preventDefault()
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
- .native - 监听组件根元素的原生事件
- .once - 只触发一次回调
<!-- 中止冒泡 --> <button @clcik.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只回调一次 --> <button @click.once="doThis"></button>
扩展:事件
事件监听机制
概念:某些组件被执行了某些操做后,触发某些代码的执行。seo
事件:某些操做。如: 单击,双击,键盘按下了,鼠标移动了。事件
事件源:组件。如: 按钮 文本输入框...
监听器:JavaScript代码。
注册监听:将事件,事件源,监听器结合在一块儿。当事件源上发生了某个事件,则触发执行某个监听器代码。
常见的事件
-
点击事件
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- onfocus: 元素得到焦点。
-
加载事件
- onload:一张页面或一幅图像完成加载。
-
鼠标事件
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
-
键盘事件
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
- 选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。