vue中事件修饰符.once.self.stop.prevent

<!DOCTYPE HTML>
<html lang= 'en'>
	<head>
		<meta charset = 'UTF-8'/>
	</head>
	<body>
		<div id = 'box'>
			<button @click = 'handleClick'>click</button>
			<button @click = 'handleClick()'>click2</button>
			<div v-show = 'isShow'>11111111</div>
			<!--@click.self 会判断事件源是否为自己-->
			<ul @click.self = 'handleUlClick'>
				<!--@click.stop 阻止冒泡-->
				<li @click.stop = 'handleLiClick($event)'>11111</li>
				<li @click = 'handleLiClick()'>22222</li>
				<!--@click.once 规定只能点击一次-->
				<li @click.once = 'handleLiClick()'>33333</li>
			</ul>
			<!--@click.prevent 组织默认行为-->
			<a href = 'http://www.baidu.com' @click.prevent = 'handleChangePage()'>changePage</a>
		</div>
		<script src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
		<script>
			var vm = new Vue({
     
				el:'#box',
				data:{
     
					isShow:true,
				},
				methods:{
     
					handleClick(){
     
						this.isShow = !this.isShow;
					},
					handleLiClick(ev){
     
						//这个方法是用来阻止冒泡
						//ev.stopPropagation();
						console.log('li');
					},
					handleUlClick(){
     
						console.log('ul');
					},
					handleChangePage(){
     
						console.log('handleChangePage');
					}
				},
			});
		</script>
	</body>
</html>

你可能感兴趣的:(vue)