Vue学习笔记

用于记录自我学习Vue的过程

文章目录

Vue学习笔记
前言
一、学习内容
二、案例实践

前言

用于记录自我学习Vue的过程。

提示：以下是本篇文章正文内容，下面案例可供参考

一、学习内容

.stop

.self

.prevent

.once

二、案例实践

	<!DOCTYPE html>
	<html lang="en">
	
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	
	<body>
	    <div id="vm">
	        <!--只有点击自己,事件才会触发-->
	        <ul @click.self="ulClick()">
	            <!--:stop停止冒泡<===>ev.stopPropagation()-->>
	            <li @click.stop="liClick">1</li>
	
	            <li @click.stop="liClick">2</li>
	
	            <li @click="liClick($event)">3</li>
	
	            <!--如果该类型事件有父级事件，则本身事件不会被触发，但是会发生冒泡-->
	            <!--.prevent相当于vm.preventDefault,即阻止默认事件-->
	            <li @click="isShow = !isShow"><a @click.prevent="alertSth($event)" href="https://www.baidu.com">百度</a></li>
	            <li @click.self="isShow = !isShow"><a @click.prevent="alertSth($event)" href="https://www.baidu.com">百度</a></li>
	            <!--只能触发一次-->
	            <li @click="isShow = !isShow"><a @click.once="alertSth($event)" href="https://www.baidu.com">百度</a></li>
	        </ul>
	
	        <div v-show="isShow">我被显示和隐藏</div>
	    </div>
	
	    <script>
	        var vm = new Vue({
	            el: "#vm",
	            data: {
	                isShow: false
	            },
	            methods: {
	                //在js里面是有函数覆盖的
	                /*liClick() {
	                    console.log("liClick");
	                    this.isShow = !this.isShow
	                },
	                */
	
	                //最好用这个
	                //liClick($event)优先级最高，会覆盖liClick()、click;
	                //写了liClick($event)就可以不用写liClick,click
	                liClick(ev) {
	                    console.log("ev.target");
	                    console.log(ev.target);
	                    this.isShow = !this.isShow;
	                    //阻止冒泡
	                    ev.stopPropagation();
	                },
	                ulClick() {
	                    console.log("ulClick");
	                },
	                alertSth() {
	                    alert("您点击了百度！");
	                    console.log(112);
	                }
	            }
	        })
	    </script>
	</body>
	
	</html>