（6）事件

最新推荐文章于 2024-05-03 21:05:41 发布

liuyang___

最新推荐文章于 2024-05-03 21:05:41 发布

阅读量323

点赞数

分类专栏： vue学习笔记文章标签：前端 vue

本文链接：https://blog.csdn.net/liuyang___/article/details/125124816

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、vue如何处理事件？

v-on指令用法

<input type = 'button' v-no:click = 'num++' />

v-on简写形式

<input type = 'button' @click = 'num++' />

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
        <button v-on:click="num++">点击</button>
        <button @click="num++">点击1</button>
        </div>
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            num:0
        }
        })
</script>
</body>

</html>

两个点击事件，点击就会触发num++，但是我们对数据的处理可不止是++这么简单的操作，以后可能会进行一些复杂的操作，那么我们的等号后面就会堆一大坨东西，这样会不利于我们代码的可读性，所以我们vue给提供了事件函数！！

2、事件函数的调用方法

直接绑定函数名

<buttno v-on：click='say'>hello</button>

调用函数

<buttno v-on：click='say()'>Say hi</button>

    <div id="app">
        <div>{{num}}</div>
        <div>
        <button v-on:click="num++">点击</button>
        <button @click="num++">点击1</button>
        <button @click="handle">点击2</button>
        <button @click="handle()">点击3</button>
        </div>
    </div>


    var vm = new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handle:function(){
                // 这里的this是vue的实例对象
                console.log(this===vm);
                this.num++;
            }
        }
        })

要注意，函数必须定义在methods里面！

3、事件函数参数传递

普通参数和事件对象

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

    <div id="app">
        <div>{{num}}</div>
        <div>
        <button @click="handle1">点击1</button>
        <button @click="handle2(123,456,$event)">点击2</button>
        </div>
    </div>
    /*
    事件绑定-参数传递
    1、如果事件直接绑定函数名称，那么默认事件会传递事件对象作为事件函数的第一个参数
    2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
    */
    var vm = new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handle2:function(p,p1,event){
                console.log(p,p1);
                console.log(event.target.tagName);
                console.log(event.target.innerHTML);
                this.num++;
            },
            handle1:function(event){
                console.log(event.target.innerHTML);
            }
        }
        })

事件绑定-参数传递

1、如果事件直接绑定函数名称，那么默认事件会传递事件对象作为事件函数的第一个参数

2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

4、事件修饰符

.stop阻止冒泡（冒泡就是子元素绑定事件，父元素也绑定事件，当子元素出发事件时，父元素的事件也会触发，我们防止父元素事件触发，就叫组织冒泡）

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

.prevent阻止默认行为

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

<body>
    <div id="app">
        <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>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            num:0
        },
        methods:{
            handle0:function(){
                this.num++;
            },
            handle1:function(event){
                //阻止冒泡
                // event.stopPropagation();
            },
            handle2:function(){
                //阻止默认行为
                // event.preventDefault();
            }
        }
        })
</script>
</body>

5、按键修饰符

.enter 回车键

<input v-on:keyup.event="submit">

.delete删除键

<input v-on:keyup.delete="handle">

    <div id="app">
        <form action="">
            <div>
                用户名:
                <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
            </div>
            <div>
                密码:
                <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>
        var vm = new Vue({
            el:'#app',
            data:{
                uname:'',
                pwd:''
            },
            methods:{
                clearContent:function(){
                    //按delete键的时候，清空用户名
                    this.uname = ''
                },
                handleSubmit:function(){
                    console.log(this.uname,this.pwd);
                }
            }
        })
    </script>

6、自定义按键修饰符

全局config.keyCodes对象

Vue.config.keyCodes.f1 = 112

<body>
    <div id="app">
        <input type="text" v-on:keyup.aaa="handle" v-model="info">
    </div>
</body>
<script>
    /*
        事件绑定-自定义按键修饰符
        规则：自定义案件修饰符名字时自己定义的，但是对应的值必须是案件队形event.keyCode值
    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
        el:'#app',
        data:{
            info:''
        },
        methods:{
            handle:function(event){
                console.log(event.keyCode);
            }
        }
    })
</script>

事件绑定-自定义按键修饰符

规则：自定义案件修饰符名字时自己定义的，但是对应的值必须是案件队形event.keyCode值