5. Vue v-on绑定监听事件的基本使用

前言

上一章节，讲解了v-bind绑定属性的基本用法，那么本章节再来看看在Vue中如何进行事件监听。毕竟事件监听对于前端业务来说，还是一个大头事情呢！所以，必须讲讲。

而在Vue.js中用来监听事件的方法就是v-on，下面来看看基本介绍。

v-on介绍

v-on命令就是相当于js中的事件绑定，例如绑定click、mouseover等等监听事件。

本篇章基于click事件作为示例，说明v-on的基本使用方法。

直接使用指令v-on
使用简化指令@

官网说明文档

https://cn.vuejs.org/v2/api/#v-on

基本用法示例

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

这上面的一堆就是官网中说明v-on的基本用法，下面来看看快速入门的示例。

示例：绑定一个自定义的click事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">

        <input type="button" value="按钮" :title="mytitle + '追加内容'" v-on:click="show">

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: 'This is mytitle!'
            },
            methods:{
                show(){
                    alert("hello world");
                }
            }

        })
    </script>

</body>
</html>

浏览器显示如下：

可以从上面的代码看到，在Vue示例中需要设置methods来写方法show()，而show() 其实是show:function()的简写方式。

            methods:{
                show:function(){
                    alert("hello world");
                }
            }

可以简写为：

            methods:{
                show(){
                    alert("hello world");
                }
            }

示例：使用v-on的简写@

为了更加快速编写，可以直接使用@符号来绑定监听事件。

好了，看到这里，应该基本理解了v-on最最最最基本的用法，下面来加强一个跑马灯的示例。

使用v-on监听click事件，实现跑马灯效果示例

需求

使用v-on来编写一个跑马灯的效果示例。效果示例如下：

通过两个按钮控制下面的字符串在一定的区域内循环往左滚动，形成跑马灯的效果。

实现思路

编写两个按钮 「start」 和 「stop」，并且使用v-on进行click监听。分别绑定start_run() 和 stop_run() 方法。
start_run() 方法首先需要获取当前显示的字符串Hello world, this is funny，然后使用substring(开始截取的字符位置, 停止截取的字符位置)截取字符串，将第一个字符拼接到最后去。
设置一个定时器setInterval() 控制不断截取字符，并逐个拼接到最后，形成滚动效果。
stop_run()方法则是执行停止定时器clearInterval()即可。

实现：编写两个按钮以及字符串渲染

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">

        <!-- start按钮 -->
        <input type="button" value="start" @click="start">

        <!-- stop按钮 -->
        <input type="button" value="stop" @click="stop">

        <!-- 字符串内容 -->
        <h2 v-text="msg"></h2>
    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello World, this is funny!'
            },
            methods:{
                start(){
                    alert("start");
                },
                stop(){
                    alert("stop");
                }
            }

        })
    </script>

</body>
</html>

浏览器显示如下：

编写start_run()实现字符串截取以及颠倒拼接

多次点击start按钮，显示如下：

编写start_run()增加setInterval()定时截取字符串

在浏览器执行一下，发现报错，如下：

在这里提示substring方法未定义，其实这是一个this指针的问题。因为当将截取字符串的操作方法放入定时器的function()中，那么此时this指针则是指向function，而function()并没有定时msg，由于找不到msg，进而提示找不到substring方法。

解决这个问题可以使用箭头函数=>，将外部的「this」指针赋值给function()方法中。

如下：