Vue技术7.2事件修饰符
2023-09-27 14:26:24 时间
<!DOCTYPE html>>
<html>
<head>
<matta charset="UTF-8" />
<title>事件修饰符</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
</style>
</head>
<body>
<!--
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立刻执行,无需等待事件回调完毕。
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- 阻止默认事件(常用)-->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡(常用)-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
</div>
<!-- 事件只触发一次(常用)-->
<button @click.once="showInfo">点我提示信息</button>
<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件 -->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!-- 事件的默认行为立刻执行,无需等待事件回调完毕 -->
<ul @scroll.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showInfo(e){
// e.preventDefault()
//e.stopPropagation()
alert('同学你好!')
},
showMsg(msg){
console.log(msg)
},
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
</html>
相关文章
- 学好vue靠他就行了——vue脚手架,自定义事件,插槽等复杂内容
- 学好vue,靠他就行了---vue基础知识与原理(一)
- vue 组件之纯表格渲染--没有事件交互
- vue.js计算属性的setter和getter方法
- Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
- 127.(前端)富文本的使用——vue使用超文本
- vue事件修饰器
- Vue + ElementUI的电商管理系统实例23 项目优化-通过chainWebpack自定义打包入口
- vue 监听滚动事件,实现动态锚点
- VUE插件大总结
- Vue技术7.3键盘事件
- 关于vue自定义事件中,传递参数的一点理解
- 关于vue事件监听的一个问题
- vue 微信授权解决方案
- Vue源码探究-事件系统
- Vue—事件修饰符
- vue实现搜索、提交等功能【回车事件】
- vue 里使用 antv g6 实现脑图左右布局、文本超出隐藏处理、自定义边、自定义节点、自定义事件功能
- vue移动端路由切换完整实例
- Vue.js事件总线(EventBus)
- Vue相关开源项目库汇总(史上最全)
- vue-devtools 必备开发工具
- Vue.js组件化开发实践
- vue——使用轮播组件swiper,设置 loop为true后,点击事件失效及轮播索引错乱问题
- vue 自定义事件