事件的基本使用
事件的基本使用:
- 绑定:使用v-on:xxx 或 @xxx 绑定事件,xxx是事件名;
- 配置:事件的回调需要配置在methods对象中,最终会在vm上;
- 参数
- 回调没有参数时,想操作DOM事件可以收到一个事件回调
- 回调有参数时,访问原始的 DOM 事件,可以用特殊变量 $event 把它传入方法
注意:methods中配置的函数,不要用箭头函数!否则this就不是vm或组件实例对象;
<div id="root">
<h2>欢迎来到{{name}}</h2>
<!--不简写 不传参-->
<button v-on:click="showInfo">点击提示信息1</button>
<!--简写形式 传参-->
<!--<button @click="showInfo2(50)">点击提示信息2</button>-->
<button @click="showInfo2(50,$event)">点击提示信息2</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'事件处理',
},
methods:{
showInfo(event){
console.log(event.target.innerText)
alert('您好,同学1')
},
showInfo2(number,event){
console.log(number,event)
alert('您好,同学2')
},
}
});
</script>
事件修饰符
按键修饰符
Vue为 v-on 提供了事件修饰符来处理 DOM 事件细节
通过由点 . 表示的指令后缀来调用修饰符。
Vue中的事件修饰符:
- prevent:阻止默认事件(常用);
- stop:阻止事件冒泡(常用);
- once:事件只触发一次(常用);
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素时才触发事件;
- passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
注意:修饰符可以连续写,比如@click.stop.prevent
prevent
prevent是用来阻止默认事件
例如跳转是a标签的默认行为,我们可以使用preventDefault()方法阻止默认行为,当在vue当中可以不用亲自写这东西。
<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
methods:{
showInfo(){
alert('您好')
},
stop
事件冒泡(dubbed bubbling):事件冒泡顺序是由内到外进行事件传播,直到根节点。
可以使用stopPropagation()方法阻止事件冒泡,在Vue当中可以使用stop来阻止
<div @click="showInfo" class="demo1">
<button @click.stop="showInfo">点我提示信息</button>
</div>
样式:
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: skyblue;
}
once
让事件只触发一次
<button @click.once="showInfo">点我提示信息</button>
capture
在嵌套的事件中,事件是先捕获再冒泡,捕获是由外往内,冒泡是由内往外,默认的事件是在冒泡阶段执行。想要事件在捕获阶段执行可以加一个capture
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
在methods加个方法
showMsg(msg){
console.log(msg)
},
样式:
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
self
只当事件在该元素本身(而不是子元素)触发时触发回调
<div @click.self="showInfo" class="demo1">
<button @click="showInfo">点我提示信息</button>
</div>
passive
事件的默认行为立即执行,无需等待事件回调执行完毕;
演示一个滚动事件,事件回调中进行for循环10000次计数,滚动事件有两个一个scroll、另一个wheel
- scroll:是滚动条的滚动事件
这个事件不会产生问题,因为滚动条滚动才会执行回调 - wheel:是滚动轮的滚动事件
这个事件是鼠标的滚动轮滚动执行回调,默认行为不会立即执行,需要加个passive
.list{
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li{
height: 100px;
}
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
在methods加个方法
demo(){
//console.log('@')
for (let i = 0; i < 10000; i++) {
console.log('#')
}
console.log('结束了')
}
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。
Vue中常用的按键修饰符别名:
-
回车 => enter
-
删除 => delete (捕获“删除”和“退格”键)
-
退出 => esc
-
空格 => space
-
换行 => tab (特殊,必须配合keydown去使用)
因为这个tab键本身就有一个功能,就是把焦点从当前元素切走,按下tab不等tab抬起来就已经切走了,就捕获不到了。 -
上 => up
-
下 => down
-
左 => left
-
右 => right
也可以使用keyCode去指定具体的按键,例如:@keydown.13
绑定回车的键盘事件(不推荐,因为该特性已从web中移除了,未来可能不再支持)
按键修饰符也可以连续写,表示同时按下那几个按键事件才触发,比如 @keydown.ctrl.y 表示ctrl + y同时按下事件触发。
系统修饰键
系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
- (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
- (2).配合keydown使用:正常触发事件。
自定义别名
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意如果是多个单词组成的按键key,需要转成小写,单词间用-隔开
例如kebab-case(短横线命名)
Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
exact 修饰符
exact修饰符可以让你控制由精确的系统修饰符组合触发的事件。
@keydown.ctrl
,即使 Alt 或 Shift 和 ctrl 一起被一同按下时也会触发
@keydown.ctrl.exact
,只有 Ctrl 被按下的时候才触发
@keydown.exact
,表示没有任何系统修饰符被按下的时候才触发,简单来说就是除了系统修饰键不会触发,其他按键都会触发
鼠标按钮修饰符
Vue提供会限制处理函数仅响应特定的鼠标按钮。
- left :表示只有鼠标左键触发
- right :表示只有鼠标右键触发
- middle :表示只有鼠标滚轮触发