Vue学习笔记

最新推荐文章于 2022-09-21 12:03:31 发布

男孩子小杨

最新推荐文章于 2022-09-21 12:03:31 发布

阅读量720

点赞数

分类专栏： vue.js 文章标签： Vue事件处理 Vue学习笔记

本文链接：https://blog.csdn.net/qq_43495629/article/details/121462949

版权

vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

男孩子小杨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记

Vue学习笔记用于记录自我学习Vue的过程文章目录Vue学习笔记前言一、学习内容.stop.self.prevent.once二、案例实践前言用于记录自我学习Vue的过程。提示：以下是本篇文章正文内容，下面案例可供参考一、学习内容.stop.self.prevent.once二、案例实践 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
复制链接

扫一扫