Vue事件绑定（非常详细哦~）

最新推荐文章于 2023-06-27 15:49:52 发布

weixin_46370867

最新推荐文章于 2023-06-27 15:49:52 发布

阅读量3.3k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/112798570

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

下面是对Vue中事件绑定的整理，希望可以帮助到有需要的小伙伴~

事件绑定

vue如何处理事件

v-on指令用法

<input type= ‘button”v-on:click="num++'/>

v-on简写形式
```
<input type= ‘button'@click='num++/>
```

事件函数的调用方式

直接绑定函数名称

<button v-on :click（事件类型）='say（方法名）'>Hello</button>

调用函数

<button v-on:click（事件类型）='say()（方法名()）' >say hi</button>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <!-- 1. 提供标签用于存放数据 -->
    <div id="app">
        <!-- 4. 把vue提供的数据填充到标签里面 -->
        <!-- 把msg数据存放到id为app的div中 -->
        <!-- {{}} : 插值表达式
                * 把数据填充到HTML标签里
                * 支持基本的计算操作
        -->
        <div>{{num}}</div> 
        <div>
            <button v-on:click="num++">点击</button>
            <button @click="num++">点击@</button>
            <button @click="handle">点击方法1</button>
            <button @click="handle()">点击方法1</button>
        </div>
      
    </div>
    <!-- 2. 引入vue.js库文件 -->
    <script src="js/vue.js"></script>
    <script>
    //   3. 使用vue语法实现功能
    // 事件绑定
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                num: 0
            },
            // vue的第二个属性 --  写方法
            methods: {
                handle: function(){
                    // 这里的this指针指向Vue的实例对象
                    console.log(this === vm);
                    this.num++;
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

事件函数参数传递

普通参数和事件对象

<button v-on:click=' say ( "hi",$event(固定的)) '>say hi</ button>

事件绑定-传参示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <!-- 1. 提供标签用于存放数据 -->
    <div id="app">
        <!-- 4. 把vue提供的数据填充到标签里面 -->
        <!-- 把msg数据存放到id为app的div中 -->
        <!-- {{}} : 插值表达式
                * 把数据填充到HTML标签里
                * 支持基本的计算操作
        -->
        <div>{{num}}</div> 
        <div>
            <button @click="handle1">点击方法1传参</button>
            <button @click="handle2(123,456,$event)">点击方法2传参</button>
        </div>
      
    </div>
    <!-- 2. 引入vue.js库文件 -->
    <script src="js/vue.js"></script>
    <script>
    //   3. 使用vue语法实现功能
    /*
        事件绑定
        1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数event
        2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

    */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                num: 0
            },
            // vue的第二个属性 --  写方法
            methods: {
                // 点击方法2的函数
                handle2: function(p,p1){
                    // 这里的this指针指向Vue的实例对象
                    console.log(this === vm);
                    console.log(p,p1);
                    // 通过传递的最后一个参数$event，拿到触发事件的对象
                    console.log(event.target.tagName);
                    // 通过传递的最后一个参数$event，拿到触发事件的内容
                    console.log(event.target.innerHTML);
                    this.num++;
                },
                handle1: function(event) { // 参数event是事件对象
                    console.log(event.target.innerHTML);
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

4.事件修饰符

stop阻止冒泡

<a v-on :click.stop="handle">跳转</ a>

prevent阻止默认行为

<a v-on :click-prevent="handle">跳转</ a>

更多的事件修饰符可以参考API：https://cn.vuejs.org/v2/api/#v-on

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
</head>
<body>
    <!-- 1. 提供标签用于存放数据 -->
    <div id="app">
        <!-- 4. 把vue提供的数据填充到标签里面 -->
        <!-- 把msg数据存放到id为app的div中 -->
        <!-- {{}} : 插值表达式
                * 把数据填充到HTML标签里
                * 支持基本的计算操作
        -->

        <div>{{num}}</div> 
        <div v-on:click="handle0">
            <button @click.stop="handle1">点击方法1</button>
        </div>

        <div>
            <a href="http://www.baidu.com" v-on:click.prevent="handle2">百度</a>
        </div>
      
    </div>
    <!-- 2. 引入vue.js库文件 -->
    <script src="js/vue.js"></script>
    <script>
    //   3. 使用vue语法实现功能
    /*
        事件绑定
        1. 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数event
        2. 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

    */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                num: 0
            },
            // vue的第二个属性 --  写方法
            methods: {
                handle0: function(){
                    this.num++;
                },
                handle1: function(event) { // 参数event是事件对象
                    // 阻止冒泡
                    event.stopPropagation();
                },
                handle2: function(){
                    // 阻止默认行为
                    event.preventDefault();
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

5. 按键修饰符

.enter 回车键
```
<input v-on : keyup.enter="submit '>
```
.delete删除键
```
<input v-on : keyup.delete='handle' >
```

更多的按键修饰符可以参考官网API

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>
<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <!-- v-on:keyup.delete 中的delete表示删除键  -->
                <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
            </div>

            <div>
                密码：
                <!-- v-on:keyup.enter 中的enter表示回车键  -->
                <input type="text" v-on:keyup.enter="handleSubmit" v-model="pwd">
            </div>

            <div>
                <input type="button" v-on:click="handleSubmit" value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 按键修饰符
        var vm = new Vue({
            el: "#app",
            data: {
                uname: '',
                pwd: ''
            },
            methods: {
                clearContent: function(){
                    // 按delete键的时候，清空用户名
                    this.uname = '';
                },
                handleSubmit: function(){
                    console.log(this.uname,this.pwd)
                }
            }
        })
    </script>
</body>
</html>

6. 自定义案件修饰符

全局config.keyCodes对象

每一个值是一个按键的唯一标识

vue.config.keycodes.f1 = 112

每一个按键都有一个唯一标识的数字：

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义按键修饰符</title>
</head>
<body>
    <div id="app">
        <input type="text" v-on:keyup="handle" v-model="info">
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 按键修饰符
        var vm = new Vue({
            el: "#app",
            data: {
                info: ''
            },
            methods: {
                handle: function(event){
                    console.log(event.keyCode)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义按键修饰符</title>
</head>
<body>
    <div id="app">
        <!-- 65对应的是a键 -->
        <input type="text" v-on:keyup.65="handle" v-model="info">
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 按键修饰符
        var vm = new Vue({
            el: "#app",
            data: {
                info: ''
            },
            methods: {
                handle: function(event){
                    console.log(event.keyCode)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

示例3：

通过事件绑定，自定义按键修饰符

规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义按键修饰符</title>
</head>
<body>
    <div id="app">
        <!-- 65对应的是a键 -->
        <!-- 只有输入a的时候才会打印  -->
        <input type="text" v-on:keyup.aaa="handle" v-model="info">
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 按键修饰符
        /*
            事件绑定 - 自定义案件修饰符
            规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

        */ 
        Vue.config.keyCodes.aaa = 65 // aaa是65对应的按键，即a键
        var vm = new Vue({
            el: "#app",
            data: {
                info: ''
            },
            methods: {
                handle: function(event){
                    console.log(event.keyCode)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

weixin_46370867

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue事件绑定（非常详细哦~）

下面是对Vue中事件绑定的整理，希望可以帮助到有需要的小伙伴~事件绑定vue如何处理事件v-on指令用法<input type= ‘button”v-on:click="num++'/>v-on简写形式<input type= ‘button'@click='num++/>事件函数的调用方式直接绑定函数名称<button v-on :click（事件类型）='say（方法名）'>Hello</button>
复制链接

扫一扫

专栏目录