-
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求。 -
Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为
v-on
提供了事件修饰符 -
修饰符 是 由点开头的指令后缀来表示的 比如v-on:click.stop阻止事件冒泡
事件修饰符.prevent
事件修饰符.prevent 作用 : 可以"阻止" 当前对象默认行为的发生
<div id="app">
<!-- v-bind:属性名="数据" 简写:属性名="数据" -->
<!-- v-bind 指令:属性渲染指令,可以在任何标签上的数据 ,渲染数据 -->
<div>
<a v-bind:href="url">百度一下,就知道</a>
<br>
<a :href="url">百度一下,就知道</a>
<hr>
<!-- 事件修饰符 .prevent -->
<!-- v-on:click.prevent 使用".prevent"修饰符 可以"阻止" 当前对象默认行为的发生
超链接标签的 默认行为 是 你点击它,它会进行页面的跳转 -->
<a href="" @click.prevent="toThis($event)">查看</a>
</div>
<br><br><br><br><br>
<div>
<form action="" method="post">
用户名:<input type="text">
<br>
<input type="submit" value="提交" @click.prevent="toThis($event)">
</form>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
url:'https://www.baidu.com/'
}
},
methods:{
toThis(event){
console.log(event);
}
}
})
</script>
预览效果
事件修饰符.stop
事件冒泡 :当"一个元素"接收到"事件"的时候 会把他"接收到的事件"传给自己的父级,一直到window
事件修饰符.stop的作用: 阻止事件冒泡 (阻止单击事件继续传播 )
<style>
.outer{
width: 600px;
height: 600px;
background-color: springgreen;
margin: 10px auto;
display: flex;
justify-content: center;
align-items: center;
}
.middle{
width: 400px;
height: 400px;
background-color: lightpink;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
width: 200px;
height: 200px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<!-- 事件修饰符 .stop 作用: 阻止 事件冒泡 -->
<div class="outer" @click.stop="outer">
<div class="middle" @click.stop="middle">
<div class="inner" @click.stop="inner">
<button @click.stop="run">点击我</button>
<hr>
<!-- 事件修饰符,可以 连写 @click.stop.prevent 阻止冒泡行为 阻止当前对象的默认行为 -->
<a href="" @click.stop.prevent="run">点击,看一看</a>
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
}
},
methods:{
outer(){
console.log('我是outer');
},
middle(){
console.log('我是middle');
},
inner(){
console.log('我是inner');
},
run(){
console.log('我是run');
},
}
})
</script>
预览效果
注意:事件修饰符,可以 连写 @click.stop.prevent 阻止冒泡行为 阻止当前对象的默认行为
事件修饰符.once
事件修饰符.once 的作用: 只执行一次点击 (或者 说 事件,只执行一次!)
修饰符可以串联 即阻止冒泡也阻止默认事件
只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
<div id="app">
<p>{{number}}</p>
<button @click="number++">点击,加1</button>
<hr>
<button @click.once="number++">点击,加1,只能执行一次</button>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
number:1,
}
},
methods:{
}
})
</script>
预览效果
按键修饰符
在做项目中有时会用到键盘事件,在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on
在监听键盘事件时添加按键修饰符
常见的按键修饰符 有哪些呢?
.enter => enter键 回车键
.tab => tab键 (不能文本框里操作)
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
<div id="app">
<h1>按键修饰符</h1>
<p>
<!-- 按键修饰符 .enter 回车键 -->
<!-- 当你按回车键的时候,方法中心的方法(submit、showMsg)会被调用执行 -->
<input type="text" v-model="uname" @keyup.enter="submit">
</p>
<p>
<!-- 按键修饰符 .space 空格键 -->
<!-- @keyup.space.enter 按键修饰符 可以 连写 -->
<input type="text" v-model="msg" @keyup.space.enter="showMsg">
</p>
<p>
<!-- 按键修饰符 可以使用对应按键的keyCode值 去 表示 -->
<!-- 回车键的keyCode值是13 -->
<!-- <input type="text" v-model="title" @keyup.enter="showTit"> -->
<input type="text" v-model="title" @keyup.13="showTit">
</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
uname:'',
msg:'',
title:'',
}
},
methods:{
submit(){
console.log('当你按回车键的时候,我们获取到你输入的值是:'+this.uname);
},
showMsg(){
console.log('当你按回车键的时候,我们获取到你输入的值是:'+this.msg);
},
showTit(event){
console.log(event);
}
}
})
</script>
预览效果
自定义事件修饰符
有时候Vue内置的修饰符可能无法满足我们的实际的项目需求,那么在Vue中可以通过config.keyCodes
自定义按键修饰符别名
<div id="app">
<h1>自定义事件修饰符</h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
}
},
// 生命周期钩子函数
// vue中实现页面按键事件,并获取 当前按键的keyCode值
created(){
document.onkeydown = function(e){
var ev = window.event || e;
console.log(ev);
// console.log('你按的是'+ ev.key +'键');
// 如果你把想把按键范围缩小,当你按某个指定键的时候,我们才输出某些提示消息 ---》你按的是某键
// 按其他键就会显示全部信息
if(ev.keyCode == 87){
console.log('你按的是'+ ev.key +'键');
};
};
},
methods:{
run(event){
}
}
})
</script>
预览效果
<div id="app">
<h1>自定义事件修饰符</h1>
<h2>Vue.config.keyCodes.自定义键名 = 键码, 可以去定制按键别名</h2>
<input type="text" name="" id="" v-on:keydown.rr="run()">
</div>
<script src="./js/vue.js"></script>
<script>
// 116 ---F5键
// 自定义事件修饰符.rr
Vue.config.keyCodes.rr = 116;
var vm = new Vue({
el:'#app',
data(){
return{
}
},
methods:{
run(){
window.alert('你按了键盘上的F5键')
}
}
})
</script>
预览效果
案例讲解-计算器
<style>
#app{
width: 600px;
margin: 30px auto;
}
</style>
</head>
<body>
<div id="app">
<input type="text" class="inp" v-model="num1"/>
<select v-model="flag">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>
<!--点击回车,进行计算-->
<input type="text" class="inp" v-model="num2" @keydown.enter="sums"/>
<!--点击按钮进行计算-->
<button @click="sums">=</button>
<span>{{result}}</span>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data(){
return{
num1:'',
num2:'',
flag:'+',
result:'',
}
},
methods:{
sums(){
this.result = eval(this.num1+this.flag+this.num2)
}
}
})
</script>
预览效果