文章目录

3.6 事件绑定指令

vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input等。v-on 简写为 @。

通过v-on绑定的事件处理函数，需要在methods节点中声明。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" v-on:click="add">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                tips: "请输入..."
            },
            methods: {
            	//声明方法1
                // add: function() {
                //     alert('11111')
                // }
                // 或
                //声明方法2
                add() {
                    alert('1111')
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述

3.6.1 事件对象

在原生的DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。在v-on指令所绑定的事件处理函数中，同样可以接收事件对象event。没有任何传参，会默认有一个事件对象。
获取产生事件的组件， 事件对象.target。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" v-on:click="add">
        <p>{{ num }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
            	//e为事件对象，没有任何传参，会默认有一个事件对象。
                add(e) {
                    this.num++;
                    e.target.style.backgroundColor = "red";
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述
点击了两次按钮
请添加图片描述

3.6.2 绑定事件并传参

在使用v-on指令绑定事件时，可以使用（）进行传参。
当有主动进行传参时，事件参数对象会被覆盖，所以vue提供了$event来表示原生的事件参数对象event，$event可以解决事件参数对象被覆盖的问题。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    	<!-- add事件处理函数中传入参数 -->
        <input type="button" value="点击" v-on:click="add(10, $event)">
        <p>{{ num }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
            	//事件处理函数
                add(a, e) {
                    this.num+=a;
                    e.target.style.backgroundColor = "red";
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述
点击了一次按钮
请添加图片描述

3.6.3 事件修饰符

在事件处理函数中调用preventDefault()或 stopPropagation()是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：

事件修饰符说明
.prevent阻止默认行为（例如:阻止a连接的跳转、阻止表单的提交等)
.stop阻止事件冒泡
.capture以捕获模式触发当前的事件处理函数
.once绑定的事件只触发1次
.self只有在event.target是当前元素自身时触发事件处理函数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 阻止默认的跳转行为 -->
        <a href="https://www.baidu.com/?tn=44004473_27_oem_dg" @click.prevent="add">baidu</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add(e) {

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

请添加图片描述
点击超链接不会跳转

3.6.4 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

<!-- 只有在按的键为enter时候调用submit方法 -->
<input @keyup.enter="submit">
<!-- 只有在按的键为esc时候调用clear方法 -->
<input @keyup.esc="clear">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc="clear">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            methods: {
                clear( e ) {
                    e.target.value = ''
                }
            }
        })
    </script>
</body>
</html>

请添加图片描述
按下esc键
请添加图片描述

# 前端 # vue.js # 前端框架
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue