前端框架vue.js系列（4）：事件修饰符与按键修饰符-优快云博客

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。

原生事件对象

vue可以通过以下方式，获取原生的事件对象：

<button @click="getEventDom($event);">getEventDom</button>

<script>
	var vue = new Vue({
		el: "#app",
		methods: {
			getEventDom: function(event) {
				event.preventDefault();
				console.log(event);
			}
		}
	});
</script>

事件修饰符

事件修饰符是指与事件触发相关的修饰符。按上例中原生事件对象，要阻止冒泡事件需要用到.preventDefault()，然而使用事件修饰符，仅需@click.stop即可。

<button @click.stop="clickStopEvnet"></button>

事件修饰符有以下几种，以click事件为例：

@click.stop 阻止继续冒泡
@click.capture 由默认冒泡模式转为捕获模式
@click.prevent 提交事件不再重载页面
@click.self 只当事件在该元素本身触发时触发回调
@click.once 仅执行一次

修饰符间可以串联使用，如用 @click.prevent.self 会阻止所有，而 @click.self.prevent 只会阻止该元素上的。

按键修饰符

按键修饰符是指与键盘事件相关的修饰符。如对Enter键的监听@keyup.enter，快捷组合件的监听等。按键修饰符一般与input标签配合使用，有以下几种：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

新增修饰符

vue2.x版本后新增了下面几种修饰符：

.ctrl
.alt
.shift
.meta

修饰符综合demo：

<body>
	<div id="app">
		<button @click="getEventDom($event);">getEventDom</button>
		<br />
		<div @click.capture="outDivClick();" style="width: 200px; height: 200px; background-color: #FF0000;">
			<div @click="innerDivClick();" style="width: 100px; height: 100px; background-color: azure;"></div>
		</div>
		<br />
		<input @keyup.enter="enter();" />
		<br />
		<!-- Ctrl + Click -->
		<div @click.ctrl="ctrlClick();">Ctrl + Click</div>
		<!-- Alt + C -->
		<input @keyup.alt.67="clear();">
	</div>
</body>

<script>
	var vue = new Vue({
		el: "#app",
		methods: {
			getEventDom: function(event) {
				event.preventDefault();
				console.log(event);
			},
			outDivClick: function() {
				alert("outDiv");
			},
			innerDivClick: function() {
				alert("innerDiv");
			},
			enter: function() {
				alert("enter");
			},
			ctrlClick: function() {
				alert("ctrl+Click");
			},
			clear: function() {
				alert("clear");
			},
		}
	});
</script>

自定义配置按键

Vue.config.keyCodes.f1 = 112; // 全局定以后，就可以使用 @keyup.f1

转载于:https://my.oschina.net/u/3987720/blog/2962713