vuejs中有哪些事件

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

桑日网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联公司于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

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