博客详情
vue中事件修饰符.prevent .stop .self等 (原创)
作者： 朝如青丝暮成雪
发布时间：2019-03-23 15:00:36 文章分类：vue 阅读(5651) 评论(0)
发布时间：2019-03-23 15:00:36 文章分类：vue 阅读(5651) 评论(0)
vue中绑定事件时指定事件修饰符。 在v-on:事件名后再加上访问修饰符即可。
如：
.prevent 阻止默认行为 (点击a标签后会触发点击事件但不会跳转页面)
.stop 阻止冒泡行为
.self 只触发发生在元素(非元素中的子元素)自身上的事件
.capture 添加事件侦听器，使用捕获模式。先触发外层容器时间，再触发里层元素事件
.once 事件最多只能触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue-2.2.2.js"></script>
</head>
<body>
<div id="app">
<!-- @click.stop .stop阻止冒泡行为-->
<!-- <div style=" height: 100px;background-color: darkcyan"
@click="divClick()">
<button @click.stop="btnClick()">我是按钮</button> -->
<!--@click.self .self 只触发发生在元素(非元素中的子元素)自身上的事件 -->
<!-- <div style=" height: 100px;background-color: darkcyan"
@click.self="divClick()">
<button @click="btnClick()">我是按钮</button> -->
<!--@click.prevent .prevent 阻止默认行为 (点击后会触发点击事件但不会跳转页面) -->
<!-- <a href="https://www.baidu.com" @click.prevent="goto()">百度一下，你就知道</a> -->
<!-- .capture 添加时间侦听器，使用捕获模式。先触发外层容器时间，再触发里层元素事件-->
<!-- <div style=" height: 100px;background-color: darkcyan"
@click.capture="divClick()">
<button @click="btnClick()">我是按钮</button> -->
<!--@click.once .once 事件最多只能触发一次。-->
<button @click.once="btnClick()">我是按钮</button>
</div>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
},
methods:{
btnClick:function(){
console.log("btnClick执行");
},
divClick:function(){
console.log("divClick执行");
},
goto:function(){
console.log('去百度');
}
}
});
</script>
</html>
评论信息
暂无评论
发表评论
博主信息
数据加载中,请稍候...
文章分类
数据加载中,请稍候...
阅读排行
数据加载中,请稍候...
评论排行
数据加载中,请稍候...
