1. 事件修饰符
.stop：阻止单击事件继续传播.prevent：提交事件不再重载页面.capture：即内部元素触发的事件先在此处理，然后才交由内部元素进行处理.self：即事件不是从内部元素触发的.once：表示只能触发一次.passive:2.3.0新增，提升移动端的性能
2.按键修饰符
（1） 按键码
.enter:回车键.tab：tab键.delete(捕获“删除”和“退格”键).esc.space：空格键.up：向上箭头键.down：向下箭头键.left：向左箭头键.right：向右箭头键config.keyCodes:对象自定义按键修饰符
（2）系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta
（3）.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
（4）鼠标按钮修饰符
.left.right.middle
3.示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
//stop修饰符，阻止冒泡事件向上传递
<div class="btnParent" @click="clickParent">
<button @click.stop="clickEvent">按钮</button>
</div>
<form action="" method="post">
// 绑定输入框回车事件
<input type="text " @keydown.enter.f1="searchWeather" name="uesrname" v-model="city" id="" value="" />
//prevent阻止默认事件
<input @click.prevent="searchWeather" type="submit" value="提交"/>
</form>
// only表示只能触发一次
<button type="button" @click.only="onceEvent">只能触发一次的按钮</button>
<button type="button" @click.ctrl="ctrlEvent">按住Ctrl事件</button>
</div>
<script type="text/javascript">
//配置按键的自定义修饰符
Vue.config.keyCodes.f1=112
let app=new Vue({
el:"#app",
data:{
city:"广州"
},
methods:{
clickEvent:function(event){
console.log("clickEvent")
},
clickParent:function(){
console.log("clickParent")
},
searchWeather:function(){
console.log("查询天气")
console.log(this.city)
},
onceEvent:function(){
console.log('只触发一次')
},
ctrlEvent:function(){
console.log("ctrlEvent")
}
}
})
</script>
</body>
</html>
2439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
