Vue.js — 事件处理

Z时代
2024-01-10
分类：综合

vue

1.事件处理

1.1 监听事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<button v-on:click="counter += 1">加1</button>
			<p>点击了{{counter}}次。</p>
			<button @click="greet">打招呼</button>
			<button @click="say('Hello')">Hello</button>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					counter: 0,
					name: '张三'
				},
				methods: {
					greet: function(event){
						console.log('你好，' + this.name + '！') // 你好，张三！
						if(event){
							console.log(event.target.tagName) // BUTTON
						}
					},
					say: function(message){
						console.log(message);
					}
				}
			})
        </script>
    </body>
</html>

我们可以使用$event访问到原始的DOM事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<button @click="test('Hello', $event)">点击按钮</button>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
					counter: 0,
					name: '张三'
				},
				methods: {
					test: function(message, event){
						if(event){
							console.log(event.target.textContent); // 点击按钮
							console.log(message); // Hello
						}						
					}
				}
			})
        </script>
    </body>
</html>

注意：调用method时不传参数的话，其实method可以接收到原始的DOM事件；如果调用method时需要传其他参数，则需要显式地将$event作为参数传入才能访问到原始的DOM事件。

1.2 事件修饰符

Vue.js 为v-on提供了事件修饰符。

.stop

.prevent

.capture

.self

.once

.passive

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<div style="width:200px;height:200px;background:gray;" @click="test1">
				<div style="width:100px;height:100px;background:blue;" @click.stop="test2"></div>
			</div>
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
				},
				methods: {
					test1: function(){
						alert('外面');					
					},
					test2: function(){
						alert('里面');					
					}
				}
			})
        </script>
    </body>
</html>

注意到@click.stop="test2"使用了事件修饰符.stop，其作用是防止事件冒泡。
提示：事件修饰符可以串联，比如<a v-on:click.stop.prevent="doThat"></a>。

1.3 按键修饰符

Vue 允许为v-on在监听键盘事件时添加按键修饰符。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
        <style>
        </style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
		<div >
			<input type="text" @keyup.13="test">
			<input type="text" @keyup.enter="test">
		</div>
        <script>
			new Vue({
				el: '#app',
				data: {
				},
				methods: {
					test: function(event){
						console.log(event.keyCode);
						console.log(event.target.value);				
					}
				}
			})
        </script>
    </body>
</html>

注意到@keyup.13的13是按键码，@keyup.enter的enter是按键码的别名。
keyCode是按键码，为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名。

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

我们可以通过全局config.keyCodes对象自定义按键修饰符别名。

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

1.4 系统修饰键

.ctrl

.alt

.shift

.meta

.meta在Windows系统中是Win键（⊞）。

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符：