vue 中的事件对象,事件修饰符,按键修饰符,鼠标修饰符,精确修饰符,表单修饰符

一、什么是事件

举个例子:比如 鼠标点击、移入/移出 等都是事件
在vue中,事件的回调函数第一个参数默认都为$event(事件对象),通过事件对象可以用于获取dom元素或者修改dom中的属性.

二、如何获取事件对象

很简单,直接在方法上加一个参数$event就可以了,这个是固定写法不能用其它单词代替,如果方法有多个参数,这个事件参数要放在最后
比如 <button @click='fn(args,$event)'></button>

<template>
    <div>
<button @click="getEvent($event)">获取事件对象</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
            }
        },
        methods:{
            getEvent(e){
                console.log(e)
            }
        }
    }
</script>

点击按钮控制台可以输出事件对象

有了dom对象,我们就可以操作dom了,比如

e.target.value  可用于获取dom元素的value值(如input框)
e.srcElement  表示当前标签

注意事项:

1.绑定事件时,如果没有小括号,那么第一个参数就是事件对象
2.绑定事件时,若果有小括号,但是没有传参,则$event为undefined
3.如果需要事件对象,并且需要传参,那么需要在绑定时使用$event进行占位
  例如: <input type="text"  @keyup="fn($event)">

三、Vue事件修饰符的使用

.stop:防止事件冒泡,等同于JavaScript中的event.stopPropagation()
.prevent:防止执行预设的行为,等同于JavaScript中的event.preventDefault()
.capture:捕获冒泡
.self:将事件绑定到自身,只有自身才能触发
.once:只触发一次
.passive:不阻止事件的默认行为

举个例子

//这样写,点击后会跳转到百度
<a href="http://www.baidu.com">跳转百度</a>
//.prevent阻止了默认事件,点击不会跳转链接
<a href="http://www.baidu.com" @click.prevent>跳转百度</a>

四、常用的按键修饰符

.enter、 .tab、 .delete(捕获“删除”和“退格”键)、 .esc、 .space、 .up、 .down、 .left、 .right。

@keyup松开按键触发事件,@keydown按下键时触发事件
用法很简单,在要用到的标签加 @keyup.enter="fn()" ,这个意思是按下enter键然后松开enter键时,执行fn()这个方法

<template>
    <div>
<input type="text" @keyup.enter="keys('enter')">
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        methods:{
            keys(k){
                console.log("按了"+k)
            }
        }
    }
</script>

解读:在input框输入后按 enter键后会执行 keys 方法,在控制台输出 按了enter

五、鼠标修饰符

left(点击左键),right(点击右键),middle(点击中间)

<div @click.left="handClick">点击</div>

六、精确修饰符 exact

<div @click.ctrl="handClick">点击</div>

此方法表示:按住ctrl键再点击会触发 handClick 事件,但是只要按住了ctrl键+其它键也都可以触发,我们想要的是,只按住ctrl一个键点击才触发,那么我们可以这么写:

<div @click.ctrl.exact="handClick">点击</div>

七、表单修饰符(输入框)

1、.lazy 我们经常在表单上使用v-model实现表单双向绑定,这个是实时绑定更新变化。我们想的是等输入完毕再同步数据,减少性能消耗。
因此我们使用 lazy :表单输入完毕,失去焦点才触发

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

2、.trim 我们输入操作经常会输入不必要的空格,而 trim 会帮我们去掉表单输入时,前后的空格,注意文字中间空格去不掉

<input type="text" v-model.trim="value">

3、.number 限制输入的为数值,但是没那么好用

<input type="text" v-model.number="value">

当输入 123abc 只会取到 123
输入 abc123 取不到数据

原文地址:https://www.cnblogs.com/qingheshiguang/p/14600159.html