vue修饰符

vue修饰符

直接上代码：

复制粘贴即可，带有注释，操作一遍更好理解

		<style type="text/css">
			.outer {
				padding: 50px;
				background: red;
			}
			
			.inner {
				height: 100px;
				background-color: cyan;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			button {
				width: 50px;
				height: 30px;
			}
		</style>

		<div id="app">
			<!-- 使用  .stop  阻止冒泡，不阻止本层，阻止后面的冒泡 -->
			<!--<div class="outer" @click="div2Handler">
				<div class="inner" @click.stop="div1Handler">
					<button @click.capture="btnHandler">点击</button>
				</div>
			</div>-->
			<!-- 使用  .provent 阻止默认行为 -->
			<!--<a href="http://baidu.com" @click.prevent="linkClick">百度一下</a>-->
			<!--点击后触发事件，但是没有跳转-->

			<!--使用  .capture  实现捕获触发机制，谁有capture谁先冒泡，如果都有由外到内触发  -->
			<!--<div class="outer" @click.capture="div2Handler">
				<div class="inner" @click.capture="div1Handler">
					<button @click.capture="btnHandler">点击</button>
				</div>
			</div>-->

			<!-- 使用  .self  只有点击只有点击当前元素时候，才会触发事件处理函数 -->
			<!--<div class="outer" @click="div2Handler">
				<div class="inner" @click.self="div1Handler">
					<button @click.capture="btnHandler">点击</button>
				</div>
			</div>-->

			<!-- 使用  .once  只触发一次事件处理函数 -->
			<!-- 即按照下面的例子，第一次低级不跳转，第二次才跳转 -->
			<!--<a href="http://baidu.com" @click.prevent.once="linkClick">百度一下</a>-->

			<!-- 演示： .stop  和  .self  的区别 -->
			<!--<div class="outer" @click="div2Handler">
				<div class="inner" @click.stop="div1Handler">
					<button @click.capture="btnHandler">点击</button>
				</div>
			</div>-->

			<!-- .self 只会阻止自己身上的冒泡，并不会真正阻止冒泡-->
			<!--<br /><br />
			<div class="outer" @click="div2Handler">
				<div class="inner" @click.self="div1Handler">
					<button @click.capture="btnHandler">点击</button>
				</div>
			</div>-->

			<!-- 此外，修饰符还可以串联 -->
			<!-- 演示   .prevent.self 和   .self.prevent 的区别 -->
			<div @click='clickOne'>
				<a href="http://baidu.com" @click.self.prevent='clickTwo'>a标签
					<div @click='clickThree'>div标签</div>
				</a>
			</div>

			<br /><br />
			<div @click='clickOne'>
				<a href="http://baidu.com" @click.prevent.self='clickTwo'>a标签
					<div @click='clickThree'>div标签</div>
				</a>
			</div>

			<!--.self.prevent不会冒泡但是会跳转-->
			<!--.prevent.self不会冒泡也不会跳转-->
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {
					div1Handler() {
						console.log('触发了inner div的点击事件');
					},
					div2Handler() {
						console.log('触发了outer div的点击事件');
					},
					btnHandler() {
						console.log('触发了bt按钮的点击事件');
					},
					linkClick() {
						console.log('触发了链接');
					},
					clickOne() {
						alert(1)
					},
					clickTwo() {
						alert(2)
					},
					clickThree() {
						alert(3)
					}
				}
			})
		</script>