vuejs中有哪些事件

这篇文章主要介绍了vuejs中有哪些事件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

vuejs中的事件有：focus、blur、click（单击）、dblclick、contextmen、mousemove、mouseover、mouseout、mouseup、keydown 、keyup、select、wheel等等。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

Event Handler 事件处理

Vuejs中的事件处理非常强大， 也非常重要。 我们一定要学好它。

Event Handler 之所以会被Vuejs放到很高的地位，是基于这样的考虑：

• 把跟事件相关的代码独立的写出来， 非常容易定位各种逻辑， 维护起来方便。

• event handler 被独立出来之后， 页面的DOM元素看起来就会很简单。 容易理解。

• 当一个页面被关掉时，对应的ViewModel也会被回收。那么该页面定义的各种 event handler 也会被一并垃圾回收。 不会造成内存溢出。

支持的Event

我们在前面曾经看到过 v-on:click, 那么，都有哪些事件可以被v-on所支持呢？

只要是标准的HTML定义的Event, 都是被Vuejs支持的。

• focus （元素获得焦点)

• blur (元素失去焦点)

• click （单击 鼠标左键）

• dblclick (双击鼠标左键)

• contextmenu (单机鼠标右键)

• mouseover (指针移到有事件监听的元素或者它的子元素内)

• mouseout (指针移出元素，或者移到它的子元素上)

• keydown （键盘动作： 按下任意键)

• keyup (键盘动作： 释放任意键)

所有HTML标准事件：https://developer.mozilla.org/zh-CN/docs/Web/Events

例：

总共定义了 162个标准事件， 和 几十个非标准事件，以及 Mozilla的特定事件。 如下图所示：

我们不用全部都记住，通常在日常开发中，只有不到20个是最常见的event.

使用 v-on 进行事件的绑定

我们可以认为，几乎所有的事件，都是由 v-on 这个 directive 来驱动的。 所以，本节会对 v-on 有更加详尽的说明。

1. 在 v-on 中使用变量

如下面代码所示，可以在 v-on 中引用变量：

                
                您点击了： {% raw %}{{{% endraw %} count }} 次                
                 + 1        
        

上面的代码，用浏览器打开后， 点击 按钮， 就可以看到 count 这个变量会随之 +1. 如下图所示：

2. 在 v-on 中使用方法名

上面的例子，也可以按照下面的写法来实现：

                
                您点击了：{% raw %}{{{% endraw %} count }} 次                
                  + 1         
        

可以看到，在 v-on:click='increase_count' 中， increase_count 就是一个方法名。

3. 在v-on 中使用方法名 + 参数

我们也可以直接使用 v-on:click='some_function("your_parameter")' 这样的写法，如 下面的例子所示：

                
                {% raw %}{{{% endraw %} message }}                
                 跟我打个招呼~         
        

使用浏览器打开后，点击按钮，就可以看到下图所示：

4. 重新设计按钮的逻辑

我们在实际开发中，往往会遇到这样的情况： 点击某个按钮，或者触发某个事件后，希望按钮的默认状态。

最典型的例子： 提交表单(

                
                请输入您想打开的网址,      
                判断规则是：                             
                1. 务必以 "http://"开头     
                2. 不能是空字符串                 
                 
                
                 点我确定         
        

                
                请输入您想打开的网址,      
                判断规则是：                             
                1. 务必以 "http://"开头     
                2. 不能是空字符串                 
                 
                
                 点我确定         
        

 点我确定 methods: {        validate: function(event){                if(this.url.length == 0 || this.url.indexOf('http://') != 0){                        if(event){                                event.preventDefault()                        }                   }        },        show_message: function(){                alert("您输入的网址不符合规则。 无法跳转")        }}

                
                输入完毕后，按下回车键，就会
                触发 "show_message" 事件~