第二章 Vue快速入门--12 事件修饰符的介绍
2024-08-31 09:48:53
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<!-- <script src="./lib/vue-2.6.10.js"></script> -->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
} .outer{
padding: 40px;
background-color: red;
}
</style> </head> <body> <div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用 .prevent阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
--> <!-- 使用 .capture实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用.self 实现只要点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --> <!-- 演示： .stop 和 .self的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> --> <!-- .self只会阻止自己身上冒泡行文的触发，并不会真正阻止冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> --> </div>
<script>
//创建Vue实例，得到ViewModel
var vm = new Vue({
el:"#app",
data:{},
methods:{
div1Handler(){
console.log('这是触发了 inner div 的点击事件')
},
btnHandler(){
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick(){
console.log('触发了链接的点击事件')
},
div2Handler(){
console.log('触发了 outer div 的点击事件')
}
}
}); </script>
</body>
</html>
最新文章
- DB2重启数据库实例
- javascript详解系列-函数表达式
- alternatives命令用法
- C#利用微软库完成设备网络定位(经纬度-地址)
- 分析一个类似于jquery的小框架 （2）
- 练习1-12：编写一个程序，以每行一个单词的形式打印其输入（C程序设计语言 第2版）
- 在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合
- Struts2 的ModelDriven理解
- Xfce 快捷键
- MYSQL将表名称修改成大写的存储过程
- hdu3746
- linux 中 ‘|’的作用
- List和ArrayList，LinkList的区别
- Django Cookie 和 Sessions 应用
- HttpServletRequest get
- 自学Python6.4-内置模块(2)
- NOIP2015神奇的幻方
- 使用小技巧加快IDEA的开发速度
- 关于float样式
- test20181006 石头剪刀布