VUE初学---事件处理 v-on:click、v-on:keyup

最新推荐文章于 2024-11-06 16:55:29 发布

原创

最新推荐文章于 2024-11-06 16:55:29 发布 · 4.0k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#VUE初学---事件处理 v-on:click、v-on:keyup

本文介绍了Vue中事件处理的方法，包括v-on指令用于监听DOM事件，事件修饰符如.stop、.prevent等用于精细化控制事件处理，如阻止冒泡、取消默认行为等。此外，还讲解了按键修饰符、系统修饰键和鼠标按钮修饰符的使用。

为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
注：v-on:click 可缩写为 @click
监听事件
通过 v-on 指令监听 DOM 事件

	<div id="app">
		// 执行的时候会不停的加1
		<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="num += 1">add</a>
		<p>这是第{
   
   {
   
    num }}点击</p>
	</div>
	<script>
		var vm = new Vue({
   
   
			el:'#app',
			data:{
   
   
				isClick:true,
				num:0
			}
		})
	</script>

1、事件处理方法

有时候事件处理逻辑比较复杂，一般不会写在 v-on 指令中，因此需要接受一个调用的方法名

	<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="add">add</a>
	<p>这是第{
   
   {
   
    num }}点击</p>
	<script>
		var vm = new Vue({
   
   
			el:'#app',
			data:{
   
   
				isClick:true,
				num:0
			},
			methods:{
   
   
			// event 是原生DOM事件 ,将 event 作为参数，通过这个event，可以获取到event.target，就是点击的对象等等属性。 event 可加可不加，需要时可以使用
				add:function(event) {
   
   
					this.num = this.num + 1
					if(event){
   
   
						console.log(event.target.tagName) // 输出 A
					}
				}
			}
		})
	</script>

2、内联处理器的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法

	// 输出 Hellow Lewis
	<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="say('Lewis')">say</a>
	// 输出 Hellow Imp
	<a href="javascript:void(0);" :class="{'link-click':isClick}" v-on:click="say('Imp')">say</a>
	<script>
		var vm = new Vue

最低0.47元/天解锁文章