Vue.js事件处理：v-on指令

落日橙子乳酸菌

已于 2022-02-07 13:31:21 修改

阅读量1.5k

点赞数 6

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

于 2022-02-06 15:33:56 首次发布

本文链接：https://blog.csdn.net/m0_48670609/article/details/122796634

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-on指令作用

v-on指令用于进行元素的事件绑定。

v-on指令基础示例

v-on后面通过冒号方式连接事件类型的名称，类似于v-bind指令

<body>
    <div id="app">
      <p> {{ content }} </p>
      <button v-on:click="content='这是新的内容'">按钮</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              content: '这是默认内容'
            }
        });
    </script>
</body>

运行结果：可以通过点击按钮更改p标签显示的内容。

v-on指令简写方式

简写方式是将 v-on: 部分简化成了 @ 符号。

<body>
    <div id="app">
      <p> {{ content }} </p>
      <button v-on:click="content='这是新的内容'">按钮</button>
      <button @click="content='这是按钮2的内容'">按钮2</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              content: '这是默认内容'
            }
        });
    </script>
</body>

日常书写时，通常采用简写方式，即 @click= 的方式。

methods中设置函数进行事件处理

向上述示例，当事件处理程序内部较少时，可以直接书写在属性值内部，以字符串的形式进行书写。当事件处理程序功能较多时，书写在标签内部就是一个不合理的方式了。
事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。

<body>
    <div id="app">
      <p> {{ content }} </p>
      <button v-on:click="content='这是新的内容'">按钮</button>
      <button @click="content='这是按钮2的内容'">按钮2</button>
      <button @click="fn">按钮3</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              content: '这是默认内容'
            },
            methods: {
                fn () {
                    this.content= '这是按钮3的内容'
                    // 注意这里的this
                }
            }
        });
    </script>
</body>

上述代码总结了v-on指令使用的三种方式，其中第二种和第三种更为常用，当事件处理程序代码较少时用第二种方式；事件程序较多时用第三种方式函数方式。

参数接收事件对象

设置时间处理程序后，如果希望进行事件对象的操作，可以用 event 方式接收，通过 fn(event) 方式，其中event也可以书写为e或其他名称形式，它所代表的的就是以前在DOM中操作的那个事件对象。

<body>
    <div id="app">
      <p> {{ content }} </p>
      <button v-on:click="content='这是新的内容'">按钮</button>
      <button @click="content='这是按钮2的内容'">按钮2</button>
      <button @click="fn">按钮3</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              content: '这是默认内容'
            },
            methods: {
                fn (event) {
                    console.log(event);
                    this.content= '这是按钮3的内容'
                }
            }
        });
    </script>
</body>

运行后点击 f12 在控制台中可以看到得到一个 MouseEvent 对象，这是一个鼠标事件的事件对象，展开后可以看到一些熟悉的属性，例如 clientx，clienty是鼠标的坐标。

视图中通过 $event 访问事件对象

如果希望在视图中访问事件对象，可以通过 $event 访问事件对象。

一般情况下，在设置点击事件时，直接接收事件处理程序的参数也就是事件对象就可以了。在Vue.js中，它允许我们给事件进行传参，但是如果我们希望自己对事件进行参数传递入并同时也能使用事件对象的话，那我们就需要有一种方式能够访问到能够得到事件对象，这样再手动的将我们需要的数据比如content和事件对象$event 传入到事件对象中，那么在事件处理程序fn中就可以相应地接收这两个参数进行处理操作。

<body>
    <div id="app">
      <p> {{ content }} </p>
      <button v-on:click="content='这是新的内容'">按钮</button><!-- 方式一 -->
      <button @click="content='这是按钮2的内容'">按钮2</button><!-- 方式二 -->
      <button @click="fn">按钮3</button><!-- 方式三 -->
      <button @click="fn(200, $event)">按钮4</button><!-- 方式四 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              content: '这是默认内容'
            },
            methods: {
                fn (event) {
                    console.log(event);
                    this.content= '这是按钮3的内容'
                },
                fn2(value,event) {
                    console.log(value, event);
                }
            }
        });
    </script>
</body>

一般来说，如果希望在事件处理程序中进行事件操作，在 fn2 中可以像 fn 一样接收一个 event 参数，但是如果我们自己也想传参的话，我们就需要对函数做调用，这样，通过调用方式，我们去给它传入实参，这样，实参才可以在底部的形参中进行操作，那么就可以写成括号的方式 fn( )，括号内部可以写成任意形式，比如可以写200，即 fn( 200 )，后续还需要使用事件对象，但是如果不传入的话就没有参数了，所以就需要通过$event方式进行书写，即最后写成 fn( 200, $e v e n t) 。注意，$ event是Vue.js内部提供的一个名称，不能随意修改，当Vue.js在进行模板内容解析时，它看到了$evevt，就会将事件对象传入，从而达到接收事件对象的目的。

注意，当进行书写时，比较常用的还是方式二和方式三，更常用的是方式三。当需要进行事件对象使用并且还需要进行传参时，才会用方式四，并不是以后都用方式四。