11-不得不学的Vue.js基础之事件处理

前端 · 2020-07-22 ·
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>事件处理</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!--1.监听事件:可以用v-on 指定监听DOM事件,并在触发时运行一些JavaScript代码-->
		<p>
			<button v-on:click="counter += 1">Add 1</button>
			<p>The button above has been clicked {{ counter }} times.</p>
		</p>
		<!--2.事件处理方法:许多事件处理逻辑会更为复杂,直接将代码写到v-on 指定不太现实。v-on还可以接收方法名称。-->
		<p>
			<button v-on:click="greet">Greet</button>
		</p>
		<!--3.内联处理器中的方法:除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法-->
		<p>
			<button v-on:click="say('hi')">Say hi</button>
			<button v-on:click="say('what')">Say what</button>
		</p>
		<!--3.1.有时也需要在内联语句处理中访问原始的DOM时间,可以用特殊变量 $event 把它传入方法-->
		<p>
			<button v-on:click="warn('Form cannot be submitted yet.', $event)">
			  Submit
			</button>
		</p>
		<!--4.事件修饰符:在事件处理程序中 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求,
			.stop
			.prevent
			.capture
			.self
			.once
			.passuve
			//阻止单击事件继续传播 
			<a v-on:click.stop="doThis"></a>

			//提交事件不再重载页面 
			<form v-on:submit.prevent="onSubmit"></form>

			//修饰符可以串联 
			<a v-on:click.stop.prevent="doThat"></a>

			//只有修饰符 
			<form v-on:submit.prevent></form>

			//添加事件监听器时使用事件捕获模式 
			//即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 
			<div v-on:click.capture="doThis">...</div>

			//只当在 event.target 是当前元素自身时触发处理函数 
			//即事件不是从内部元素触发的 
			<div v-on:click.self="doThat">...</div>

			//点击事件将只会触发一次
			<a v-on:click.once="doThis"></a>

			//滚动事件的默认行为 (即滚动行为) 将会立即触发 
			//而不会等待 `onScroll` 完成  
			//这其中包含 `event.preventDefault()` 的情况 
			//这个 .passive 修饰符尤其能够提升移动端的性能。
			<div v-on:scroll.passive="onScroll">...</div>
		-->

		<!--5.按键修饰符:在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
			//只有在 `key` 是 `Enter` 时调用 `vm.submit()` 
			<input v-on:keyup.enter="submit">
			//你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
			//处理函数只会在 $event.key 等于 PageDown 时被调用。
			<input v-on:keyup.page-down="onPageDown">

			5.1.按键码

			<input v-on:keyup.13="submit">
			为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
			.enter
			.tab
			.delete
			.esc
			.space
			.up
			.down
			.left
			.right
			你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

			// 可以使用 `v-on:keyup.f1`
			Vue.config.keyCodes.f1 = 112

			5.2.系统修饰键
			.ctrl
			.alt
			.shift
			.meta

			//Alt + C 
			<input v-on:keyup.alt.67="clear">

			//Ctrl + Click 
			<div v-on:click.ctrl="doSomething">Do something</div>

			.exact 修饰符:允许你控制由精确的系统修饰符组合触发的事件。
			//  即使 Alt 或 Shift 被一同按下时也会触发 
			<button v-on:click.ctrl="onClick">A</button>

			//  有且只有 Ctrl 被按下的时候才触发 
			<button v-on:click.ctrl.exact="onCtrlClick">A</button>

			//  没有任何系统修饰符被按下的时候才触发 
			<button v-on:click.exact="onClick">A</button>

			鼠标按钮修饰符
			.left
			.right
			.middle
		-->
	</div>
	<script>
		// 全局对象
		var vm = new Vue({
			el: "#app",
			data:{
				counter:0,
				name:"Vue.js"
			},
			methods:{
				greet:function(event){
					// `this`在方法里指向当前的 Vue 实例
					console.log('Hello '+this.name)
					// `event` 是原生 DOM 事件
					if(event){
						console.log(event.target)
					}
				},
				say:function(msg){
					console.log("Say "+msg)
				},
				warn:function(msg,event){
					if(event){
						event.preventDefault();
					}
					console.log(msg)
				}
			}
		});
	</script>
</body>
</html>

以下是测试数据:

The button above has been clicked {{ counter }} times.

%