(精华2020年5月4日更新) vue教程篇 事件冒泡和默认行为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡和默认行为</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		window.onload=function(){
     
			let vm=new Vue({
     
				el:'#app',
				methods:{
      
					show(){
     
						console.log(111);
						// e.stopPropagation();
					},
					print(){
     
						console.log(222);
					},
					write(){
     
						console.log(333);
					},
					study(){
     
						console.log(444);
						// e.preventDefault();
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="app">
		<div @click="write">
			<p @click="print">
				<!-- <button @click="show($event)">点我</button> -->
				<button @click.stop="show">点我</button>
			</p>
		</div>
		<hr>
		<!-- <a href="http://www.baidu.com" @click="study($event)">俺是链接</a> -->
		<a href="http://www.baidu.com" @click.prevent="study">俺是链接</a>
	</div>
</body>
</html>

你可能感兴趣的:((持续更新)vue基础篇,vue.js)