监听事件各种修饰符的用法：
下面案例是既监听包括按钮的div标签，又监听button按钮时出现的情况(冒泡)：下面通过stop修饰符避免了冒泡事件。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<div @click="divclick">
<button @click="btnclick">按钮</button>
<button @click.stop="btnclick">按钮</button>
<!-- 我们想实现的点击按钮只有按钮btnclick事件发生，divclick不发生。
vue中通过btnclick.stop修饰符防止冒泡。 -->
</div>
<br>
<form action='http:www.baidu.com'>
<input type="submit" value="提交" @click.prevent="submitclick">
<!-- 通过prevent修饰符，将取消按钮自动提交的动作，进而执行监听事件里的行为。 -->
</form>
<!-- 监听键盘的某个键帽 -->
<input type='text' @keyup="keyUp">
<!-- 此时监听所有键盘的事件 -->
<input type='text' @keyup.enter="keyUp">
<!-- 监听enter事件 -->
<!-- <cpn @click.native="keyup"></cpn> -->
<!-- 假设cpn是一个自定义组件可以通过native修饰符监听组件的触发事件 -->
<button @click.once="btn2click">按钮2</button>
<!-- 只有点击第一次的时候触发，其余的时候不再响应 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue(
{el:"#app",
data:{
},
methods:{
divclick(){
console.log('divclick');
},
btnclick(){
console.log('btnclick')
},
submitclick()
{
console.log('取消按钮自带的事件，通过监听事件触发')
},
keyUp()
{
console.log('keyup')
},
btn2click()
{
console.log('btn2click')
}
},
computed:{
}
})</script>
</body>
</html>
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
