Vue事件处理 - 技术栈

事件的基本使用

直接上代码吧：

js 复制代码

<body>
    <div id="app">
        <h2>全民制作人们你们好，我是{{name}}</h2>
        <button v-on:click="showInfo1">点我显示提示信息(无参)</button>
        <button @click="showInfo2($event,fans)">点我显示提示信息(传参)</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'kunkun',
            fans:'ikun',
        },
        methods: {
            showInfo1(){
                alert('ikun你们好！')
            },
            showInfo2(event,fans){
                alert(fans+ '你们好！!')
            }
        },
    })
</script>

运行如上代码，分别查看两个按钮点击后的运行结果：

点击第一个按钮的运行结果: 点击第二个按钮的运行结果:

来波总结

在Vue中，使用v-on:fun或@:fun绑定事件，后者写法更常用。其中，fun是事件名。v-on指令可以浅显的理解为当... ...的时候，那么v-on:click则是当点击的时候；

event是事件对象，调用时的写法是$event

事件的回调需要配置在methods对象上，最终会在vm上；

methods中配置的函数，不要使用箭头函数，否则this就不是vm了。

methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；

@click="demo"和@click="demo($event)"效果一致，但后者可以传参。

事件修饰符

同样的,先上代码:

js 复制代码

<body>
    <div id="app">
        <h2>全民制作人们你们好，我是{{name}}</h2>
        <a href="https://t.hk.uy/b43p" @click="showInfo" >看看我的个人简介吧！</a>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'kunkun',
        },
        methods: {
            showInfo(){
                alert("你来啦~")
            }
        },
    })
</script>

运行如上代码，点击链接，会出现提示信息，随后就会跳转到该网址。

Q：那么如果我想要点击链接后不跳转该如何做呢？

A：在该事件后加入事件修饰符prevent即可。例如@click.prevernt="showInfo"，该修饰符是用来阻止默认事件的。

再有如下代码：

js 复制代码

<body>
    <div id="app">
        <h2>全民制作人们你们好，我是{{name}}</h2>

        <div @click="showInfo">
            <button @click="showInfo">点我显示提示信息</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'kunkun',
        },
        methods: {
            showInfo(e){
                alert("你来啦~")
            }
        },
    })
</script>

运行后点击按钮会发现提示框出现了两次，这是因为作为子元素的按钮的单击事件行为冒泡冒到了作为父元素的div盒子身上。

Q：那么如果我想要阻止事件冒泡该怎么做呢？

A：在该事件后加入事件修饰符stop即可。例如@click.stop="showInfo"，该修饰符是用来阻止默认事件的，是加在子元素上的。

Q：那么如果我想要该事件只触发一次该怎么做呢？ (单击按钮后显示提示框，再次单击就不要提示了、)

A：在该事件后加入事件修饰符once即可。例如@click.once="showInfo"，这样就能够做到让某个元素的事件只会触发一次了。

以上三个事件是常用事件，下面直接总结Vue中的事件修饰符：

prevent：阻止默认事件（常用）

stop：阻止事件冒泡（常用）

once：事件只触发一次（常用）

capture：使用事件的捕获模式

self ：只有event.target是当前操作元素时才触发事件

passive：事件的默认行为立即执行。不用等待事件回调完毕

最后，修饰符是可以连用的，例如@click.prevent.stop。

键盘事件

上一个小案例：

js 复制代码

<body>
    <div id="app">
        <h2>欢迎来到{{name}}</h2>、
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'Vue',
        },
        methods: {
            showInfo(e){
                console.log(e.target.value);
            }
        },
    })
</script>

运行打开浏览器控制台，输入123，然后按下回车，控制台就会将刚才的输入信息进行输出，如下：

在上面的代码中，keyup是键盘上按键的抬起事件，对应的有kewdown，.enter是按键的别名。连起来的意思就是：当回车键抬起时，调用showInfo方法。

以下是Vue中常用的按键别名：

按键	别名
回车	enter
删除	delete
退出	esc
空格	space
换行	tab
上	up
下	down
左	left
右	right

tab按键只能绑定keydown事件。

Q：那么如果我要绑定的按键没在这几个常用按键里该怎么做呢？

A：Vue未提供别名的按键，可以使用原始的key值去绑定(例如绑定回车就可以输入keyup.13)，想要知道每个键的名字和对应的值，可以将上面代码的输出信息改为：console.log(e.key,e.keyCode);，当按键由两个字母组成时，要以短横线命名，例如大小写键CapsLock 就应改写为caps-lock。

四个特殊的系统修饰键：ctrl、alt、shift、meta(win键)

配合keyup使用：按下修饰键的同时，再按下其它键，随后释放其它键，事件才会触发。

配合keydown使用：正常触发事件。

想要按下指定按键触发事件，也可以像事件修饰符那样连写。例如想要按下Ctrl+Y 触发事件则可以写成@keyup.ctrl.y="showInfo"。

Tips：

可以使用keycode去指定具体的按键，但不推荐，今后可能会被废弃掉。

可以使用Vue.config.keyCodes.自定义键名 = 键码来定制按键别名。例如： Vue.config.keyCodes.huiche = 13

以上就是事件处理的全部内容咯~