事件绑定v-on+事件函数调用methods_怎么用v-on绑定事件,写一个方法调用传递参数的函数-CSDN博客

本文链接：https://blog.csdn.net/binbinhxx/article/details/112301182

本文介绍了Vue.js中的事件绑定，包括v-on指令的使用及其简写形式@，强调了将逻辑代码抽离到methods中以提高可读性。通过示例展示了如何直接绑定函数名和调用函数，并解释了在方法中this的含义，即指向vue实例对象。

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

事件绑定
要想做一个功能复杂的前端应用，肯定离不开与用户的交互，用户交互最相关的就是事件处理，双向数据绑定中v-model指令它的底层用到的就是事件，所以vue专门提供了一种事件处理的语法结构，其实用到的还是指令，我们称之为事件绑定，之前有一种说法叫做数据绑定（把数据填充到页面中的标签里面）其实它们之间所做的工作是类似的，就是把数据model和模版view关联起来，只不过是对于事件处理来说绑定的是具体的操作。
vue中如何处理事件？

v-on指令用法

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

v-on后面跟着冒号：+标准事件名称（如：click/focus/blur）=再跟具体的事件处理逻辑（如‘num++’）

<!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">
        <div>{{num}}</div>
        <div>
            <!-- 按钮控制num值发生变化的时候，页面的内容肯定也是跟着变的因为数据是响应式的  -->
            <button v-on:click = 'num++'>点击</button>
        </div>
    </div>
    <script type = 'text/javascript' src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num:0
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

v-on 简写形式

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

就是把v-on：改成@，vue的设计者还是非常替程序员考虑的，尽量把编程模式做的简答化，相对比v-on的简写模式要写的字符减少了，敲代码的时候更方便。实际开发中也是用v-on:的简写模式@

 <button @click = 'num++'>点击2</button>

<!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">
        <div>{{num}}</div>
        <div>
            <!-- 按钮控制num值发生变化的时候，页面的内容肯定也是跟着变的因为数据是响应式的  -->
            <button v-on:click = 'num++'>点击</button>
            <button @click = 'num++'>点击2</button>

        </div>
    </div>
    <script type = 'text/javascript' src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num:0
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
如果把数据的处理逻辑全部写在v-on：click = ‘XX’中合理吗？
明显是不合理的，因为随着业务量的复杂，逻辑代码比较多的话，可读性明显是不好的，应该要能想到 逻辑代码得抽取到一个方法代码里面，Vue方法定义在哪个位置呢？在vue当中专门提供了一个属性来定义我们需要的一个方法，叫methods，它的值是一个对象，在对象当中可以定义很多的方法，比如说起个名handle：function（）{}， 里面可以实现控制逻辑，比如‘num++’逻辑应该写在handle方法里。

事件函数的调用方式

直接绑定函数名称

<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>Document</title>
</head>
<body>
    <div id = "app">
        <div>{{num}}</div>
        <div>
            <!-- 按钮控制num值发生变化的时候，页面的内容肯定也是跟着变的因为数据是响应式的  -->
            <button v-on:click = 'num++'>点击</button>
            <button @click = 'num++'>点击2</button>
            <button @click = 'handle'>点击3</button>


        </div>
    </div>
    <script type = 'text/javascript' src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                handle:function() {
                    // 在方法里面num无法直接访问，要通过this才能得到num的值
                    // this指的是谁呢？通过vm可以访问到data中的属性
                    // this就是vm也就是vue实例对象
                    console.log(this === vm)
                    this.num++; 
                    
                }
            },
        });
    </script>
</body>
</html>

                    console.log(this === vm)

在这里插入图片描述

<!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">
        <div>{{num}}</div>
        <div>
            <!-- 按钮控制num值发生变化的时候，页面的内容肯定也是跟着变的因为数据是响应式的  -->
            <button v-on:click = 'num++'>点击</button>
            <button @click = 'num++'>点击2</button>
            <button @click = 'handle'>点击3</button>
            <button @click = 'handle()'>点击4</button>



        </div>
    </div>
    <script type = 'text/javascript' src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods: {
                handle:function() {
                    // 在方法里面num无法直接访问，要通过this才能得到num的值
                    // this指的是谁呢？通过vm可以访问到data中的属性
                    // this就是vm也就是vue实例对象
                    console.log(this === vm)
                    this.num++; 
                    
                }
            },
        });
    </script>
</body>
</html>

事件函数的调用方式–调用函数

<button @click = 'handle()'>点击4</button>

在这里插入图片描述
事件绑定的格式v-on只是指令，冒号：后面跟标准事件名称，并且可以将v-on: 简写成@；事件函数的调用方式有两种一种是直接绑定函数名，一种是调用函数；函数必须定义在methods的属性当中，还要知道函数中的this是什么含义，指的是vue的实例对象。