Vue教学4

鸠桉

已于 2024-03-05 13:49:00 修改

阅读量2k

点赞数 41

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-02-20 19:23:09 首次发布

本文链接：https://blog.csdn.net/HJERSON/article/details/136187433

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中正确处理事件，包括如何绑定点击事件、回调函数的放置、常用事件修饰符如prevent、stop和once的用法，以及键盘事件的监听和自定义键名。

摘要由CSDN通过智能技术生成

一、事件处理

1.事件的基本使用

首先做一个按钮绑定事件的一个实例，并用到指令 v-on：可简写为 @

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
    // 在Vue中要给一个元素绑定事件得用指令.  v-on：当...的时候 click：点击 "showInfo"：回调函数
    // 所以当点击这个按钮的时候就会执行showInfo这个函数
    <button v-on:click="showInfo">点我提示信息</button>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            name: "Hello"
        }

    })
</script>
</body>
</html>

那问题来了，这个回调函数该写在哪了呢？

当写在Vue外面时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
    <button v-on:click="showInfo">点我提示信息</button>
</div>
 
<script type="text/javascript">
    function showInfo() {
        alert("你好")
    }

    new Vue({
        el: "#root",
        data: {
            name: "Hello"
        }

    })
</script>
</body>
</html>

所以我们应该把回调函数写在Vue实例里面去，要使用配置对象 methods:{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
    <button v-on:click="showInfo">点我提示信息</button>
</div>

<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            name:"Hello"
        },
        methods:{
            showInfo(){
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

2.事件修饰符

Vue中有很多修饰符，下面我来介绍几个常用的事件修饰符

（1）prevent: 阻止默认事件

首先定义了一个a标签，在网页上点击它时会默认跳转到另一个网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
    <a href="https://www.baidu.com" @click="showInfo">点我前往</a>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            name: "Hello"
        },
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

如果我们不想让它默认跳转，就需要使用prevent修饰符

只需要在@click后加 .prevent 即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
    <a href="https://www.baidu.com" @click.prevent="showInfo">点我前往</a>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            name: "Hello"
        },
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

（2）stop: 阻止事件冒泡

在div标签下面再创建了个button按钮，当两个都有点击事件时，在页面打开点击按钮时会出现事件冒泡，会出现两次弹窗。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <style>
        *{
            margin-top: 12.5px;
        }
        .demo1{
            height: 50px;
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="demo1" @click="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

与prevent同理，阻止事件冒泡要在按钮 bottton 的 @click 后面加上 .stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <style>
        *{
            margin-top: 12.5px;
        }
        .demo1{
            height: 50px;
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

（3）once: 事件只触发一次

首先也定义一个按钮botton

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="showInfo">点我提示信息</button>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

如果我们想要这个按钮只触发一次，在这个按钮点了一次出现弹框后，再点击这个按钮就不会再出现弹框就需要 once 这个修饰符同前两个一样，在 @click 后面加上 .once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click.once="showInfo">点我提示信息</button>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

（4）修饰符可以连续写

将之前修饰符 prevent 和 stop 的实例一起结合运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <style>
        *{
            margin-top: 12.5px;
        }
        .demo1{
            height: 50px;
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="demo1" @click="showInfo">
        <a href="https://www.baidu.com" @click="showInfo">点我提示信息</a>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

最后改进成这样即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <style>
        *{
            margin-top: 12.5px;
        }
        .demo1{
            height: 50px;
            background: skyblue;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="demo1" @click="showInfo">
<!--        修饰符可以连续写，但是也有先后行为，例：@click.prevent.stop  表先阻止默认事件，再阻止冒泡-->
        <a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>
    </div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        methods: {
            showInfo() {
                alert("你好啊")
            }
        }
    })
</script>
</body>
</html>

3.键盘事件

（1）Vue中常用的按键别名：

回车 ==> enter

删除 ==> delete （捕获“删除”和“退格”键）

退出 ==> esc

空格 ==> space

换行 ==> tab

上 ==> up

下 ==> down

左 ==> left

右 ==> right

keyup：按下键盘并且释放该键才会触发

keydown：按下键盘，在没释放该键时就会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>{{name}}</h2>
<!--                                                 @keyup.enter 在输入完成后按下enter按钮的时候便会执行showInfo函数-->
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>

<script type="text/javascript">
    new Vue({
        el: "#root",
        data:{
            name:"hello"
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value)
            }
        }
    })
</script>
</body>
</html>