Vue事件处理

最新推荐文章于 2024-03-22 12:53:45 发布

安全天天学

最新推荐文章于 2024-03-22 12:53:45 发布

阅读量337

点赞数 1

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

本文链接：https://blog.csdn.net/qq_53568983/article/details/128262993

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue事件处理

前言
一、事件的基本使用
二、事件修饰符

前言

有了事件代理，还只是显示了数据，没有动态的改变，我们知道想要动态的改变必须使用方法，也就是函数，Vue事件处理，就相当于js当中的函数，这句话不怎么对，但是可以这样理解

一、事件的基本使用

使用讲如下几点：在讲之前先说一下：（Vue事件处理，没有使用代理，数据代理，数据代理，只有数据才代理，方法不代理，这是一点，还有一点就是，数据代理是为了动态的交互，而方法就是方法，只需要修改）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
</head>
<body>
    <div id="root">
        <h1>这是我的{{name}}</h1>
        <button v-on:click="getInfo1()">点我1</button>
        <button v-on:click="getInfo2(123)">点我1</button>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',
        },
        methods:{
            getInfo1(){
                alert('hello我')
                console.log(this);
            },
             getInfo2(value){
                alert('hello我');
                console.log(value);
            },
        }
     })
    </script>
</body>
</html>

注意：方法函数写在methods中，由于已经知道是一个函数，所以不需要

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

@就是v-on:的简写方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
</head>
<body>
    <div id="root">
        <h1>这是我的{{name}}</h1>
        <button v-on:click="getInfo1()">点我1</button>
        <button v-on:click="getInfo2(123)">点我1</button>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',
              
        },
        methods:{
            getInfo1(){
                alert('hello我')
                console.log(this);
            },
             getInfo2(value){
                alert('hello我');
                console.log(value);
            },
        }
     })
    </script>
</body>
</html>

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

看如下的图你就可以知道了

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

记住一点，箭头函数所执行的this都是windows

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
</head>
<body>
    <div id="root">
        <h1>这是我的{{name}}</h1>
        <button v-on:click="getInfo1">点我1</button>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',  
        },
        methods:{
            getInfo1(){
                console.log(this);
            },
        }
     })
    </script>
</body>
</html>

5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参

$event是占位符，在什么地方都可以

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
</head>
<body>
    <div id="root">
        <h1>这是我的{{name}}</h1>
        <button v-on:click="getInfo1()">点我1</button>
        <button v-on:click="getInfo2(123,$event)">点我1</button>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',
              
        },
        methods:{
            getInfo1(){
                console.log(event);
            },
             getInfo2(value,event){
                alert('hello我');
                console.log(value,event);
            },
        }
     })
    </script>
</body>
</html>

二、事件修饰符

1.prevent：阻止默认事件

首先来看一个事件，<a href="https://www.baidu.com" onclick="f()">点击</a>对于，这个事件，如果点击了a标签，但是不想要跳转，一般会使用event.stop,哪vue中直接使用stop即可，如下代码所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
    <style>

    </style>
</head>
<body>
   
    <div id="root">
        <h1>{{name}}</h1>
        <a href="https://www.baidu.com" @click.prevent="getInfo1">百度</a>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',  
        },
        methods:{
            getInfo1(){
         
                alert('123');
            },
        }
     })
    </script>
</body>
</html>

直接使用<a href="https://www.baidu.com" @click.prevent="getInfo1">百度</a>

2.stop：阻止事件冒泡

冒泡：父元素有和子元素一样的事件，当子元素的事件触发时，父元素的事件也触发，如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
    <style>

    </style>
</head>
<body>
    <div id="root">
        <div class="demo1" @click="getInfo1">
            <button @click.stop="getInfo1">点我一下获取信息</button>
        </div>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',  
        },
        methods:{
            getInfo1(){
                
                alert('123');
            },
        }
     })
    </script>
</body>
</html>

直接在事件后面加上.stop就可以阻止冒泡了

3.once：事件只触发一次

想要只执行一次事件直接在事件后面加上.once就可以了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>HTML5表单</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./vue_basic/js/vue.js">
       
    </script>
    <style>

    </style>
</head>
<body>
    <div id="root">
        <button @click.once="getInfo1">点我一下获取信息</button>
    </div>
    <script>
     let vm = new Vue({
        el:'#root',
        data:{
            name:'小米',  
        },
        methods:{
            getInfo1(){
                alert('123');
            },
        }
     })
    </script>
</body>
</html>