前端vue学习曲线（11）事件处理

最新推荐文章于 2023-05-29 14:50:04 发布

菜鸟_zhengke

最新推荐文章于 2023-05-29 14:50:04 发布

阅读量123

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42014192/article/details/98741478

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app1">
			<button @click="counter += 1">加1</button>
			<p>当前值{{counter}}</p>
			<button @click="greet">问候</button>
			<br />
			<button v-on:click="say('hi')">Say hi</button>
			<button v-on:click="say('what')">Say what</button>
			<br />
			<!--$event事件中的默认参数对象-->
			<button v-on:click="warn('Form cannot be submitted yet.', $event)">
				 Submit
			</button>
			<br />
			<h2>事件修饰符</h2>
			<a @click.stop='getItemInfo($event)'>.stop 阻止单击事件继续传播 </a><br />
			<a @click.prevent='getItemInfo($event)'>.prevent 提交事件不再重载页面</a><br />
			<a @click.once='getItemInfo($event)'>.once 点击事件将只会触发一次</a><br />
			<a @click.passive='getItemInfo($event)'>.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发</a><br />
			<h2>按键修饰符</h2>
			<p>
				.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
			</p>
			<input type="text" @keyup="getKeyInfo($event)" />
		</div>
	</body>

</html>
<script>
	var app1 = new Vue({
		el: "#app1",
		data: {
			counter: 0,
			name: "Vue.js",
			url: 'https://cn.vuejs.org/v2/guide/events.html#事件修饰符'
		},
		methods: {
			greet(event) {
				alert('hello ' + this.name + "!")
				if(event) {
					alert(event.target.tagName)
				}
			},
			say(event) {
				alert(event)
			},
			warn(message, event) {
				// 现在我们可以访问原生事件对象
				alert(message)
				console.log(event)
			},
			getItemInfo(event) {
				console.log(event)
			},
			getKeyInfo(event) {
				console.log(event)
			}
		}
	})
</script>

菜鸟_zhengke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端vue学习曲线（11）事件处理

例子：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...
复制链接

扫一扫

专栏目录