Vue.js - 事件处理中的事件监听( v-on )

什么是事件？通俗的说，点击一下鼠标中的点击就是事件，肯定不只是有点击这么一种事件，还有滑动啊、键盘按下哪个键啊、鼠标滚轮滚动啊等等，这些都是事件。事件监听就是用某种方法一直盯着某个事件，如果监听的事件发生了，就会触发后面执行的事情，比如说，有一个提交按钮，我们监听这个按钮有没有给点击，如果被点击了，就触发提交的处理代码，执行后续步骤。在 Vue 里我们应该怎么监听事件呢？下边为大家详细讲解。

创建一个简单的实例模板：

在 Vue 里面监听事件非常简单，只需要一个指令就可以实现，这个指令是 v-on 。

如何使用这个指令，先修改一下代码，这样能让你们更清晰的理解：

    
    
    


    

        加 1
        
点击按钮，点击次数会增加。
        
点击次数：{{ counter }}
    

    

在 button 标签里，我使用了 v-on 指令，指令冒号（:）后面的 click 代表的是监听点击事件，等号后面的是一个简单的运算方法。大家以后尽量不要把逻辑运算的内容写在 html 模板上，那样会让我们的代码很难阅读，前面也说过，需要计算的东西我们一般放到 methods 选项里面的方法里，然后再把方法名写到 html 模板上。这只是为了方便演示，才这么写的。

浏览器打开上面的 html 文件，会看到，我们没点击一次按钮，点击次数都会加 1 ：

这是我们用 v-on 指令监听了 button 的点击事件，每当我们点击 button 标签的时候，机会执 加 1 的 JavaScript 代码。 v-on 也可以简写成一个 @ 。我们把上面的代码规范一下，顺便用 @ 代替 v-on ，看一下是否能成功：

    
    
    


    

        加 1
        
点击按钮，点击次数会增加。
        
点击次数：{{ counter }}
    

    

会发现，这样也是完全可行的:

看右边的 script 标签里的代码，的的确确是我们修改之后的。

千万记住，不要把逻辑运算写到 html 模板上面，在 methods 里面定义一个方法计算完再把变量名放到监听事件里。

今天就到这里，感谢看完。

---

关注关注，关注一下下好不好