What events are there in vuejs-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What events are there in vuejs

青灯夜游

Sep 27, 2021 pm 06:18 PM

vuejsevent

The events in vuejs are: focus, blur, click (click), dblclick, contextmen, mousemove, mouseover, mouseout, mouseup, keydown, keyup, select, wheel, etc.

What events are there in vuejs

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

`Event Handler` Event Handling

Event handling in Vuejs is very powerful and very important. We must learn it well.

Event Handler The reason why Vuejs puts it in a high position is based on this consideration:

Put the code related to the event Written independently, it is very easy to locate various logics and easy to maintain. After
event handler is separated, the DOM element of the page will look very simple. Easy to understand.
When a page is closed, the corresponding ViewModel will also be recycled. Then the various event handler defined on the page will also be garbage collected. Will not cause memory overflow.

SupportedEvent

We have seen before I’ve been to v-on:click, so what events can be supported by v-on?

As long as it is a standard HTML defined Event, it is supported by Vuejs.

focus (The element gains focus)
blur (The element loses focus)
click (Click the left mouse button)
dblclick (Double-click the left mouse button)
contextmenu (Single-machine right mouse button)
mouseover (The pointer moves to the element with event monitoring or its child elements)
mouseout (The pointer moves out of the element, or to its child elements Up)
keydown (Keyboard action: Press any key)
keyup (Keyboard action: Release any key)

All HTML standard events: https://developer.mozilla.org/zh-CN/docs/Web/Events

Example:

A total of 162 standard events are defined, and dozens of non-standard events, as well as Mozilla-specific events. As shown in the figure below:

What events are there in vuejs
We don’t need to remember them all. Usually in daily development, less than 20 are the most common events.

Use`v-on` Binding events

We can think that almost all events are driven by v-on this directive . Therefore, this section will provide a more detailed explanation of v-on.

1. Use variables in v-on

As shown in the following code, you can reference variables in v-on:

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id=&#39;app&#39;>
		您点击了： {% raw %}{{{% endraw %} count }} 次
		<br/>
		<button v-on:click=&#39;count += 1&#39; style=&#39;margin-top: 50px&#39;> + 1</button>
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				count: 0
			}
		})
	</script>
</body>
</html>

After opening the above code with a browser and clicking the button, you can see that the variable count will be 1. As shown in the figure below:

What events are there in vuejs

2. Use the method name in

v-on

. The above example can also be implemented as follows:

<html>
<head>
	<script ></script>
</head>
<body>
	<div id=&#39;app&#39;>
		您点击了：{% raw %}{{{% endraw %} count }} 次
		<br/>
		<button v-on:click=&#39;increase_count&#39; style=&#39;margin-top: 50px&#39;>  + 1 </button>
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				count: 0
			}, 
			methods: {
				increase_count: function(){
					this.count += 1
				}
			}
		})
	</script>
</body>
</html>

You can see that in v-on:click='increase_count', increase_count is a method name.

3. Use the method name parameter in `v-on`

We can also use v-on:click=' directly some_function("your_parameter")' is written like this, as shown in the following example:

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id=&#39;app&#39;>
		{% raw %}{{{% endraw %} message }}
		<br/>
		<button v-on:click=&#39;say_hi("明日的Vuejs大神")&#39; style=&#39;margin-top: 50px&#39;> 跟我打个招呼~ </button>
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				message: "这是个 在click中调用 方法 + 参数的例子"
			},
			methods: {
				say_hi: function(name){
					this.message = "你好啊，" + name + "!"
				}
			}
		})
	</script>
</body>
</html>

After opening it with a browser, click the button, and you will see the following picture:
What events are there in vuejs

4. Redesign the logic of the button

In actual development, we often encounter situations like this: Click a button, or trigger a certain After the event, you want the default state of the button.

The most typical example: When submitting a form (<form></form>), we want to verify the form first. If verification fails, the form is not submitted.

At this time, if we want the form not to be submitted, we have to make this submit button without any next action. In all development languages, there will be a corresponding method called: "preventDefault"
(Stop the default action)

Let's look at this example:

<html>
<head>
	<script ></script>
</head>
<body>
	<div id=&#39;app&#39;>

		请输入您想打开的网址,   	<br/>
		判断规则是： 				<br/>
		1. 务必以 "http://"开头 	<br/>
		2. 不能是空字符串			<br/>
		<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
		<br/>
		<a v-bind:href="this.url" v-on:click=&#39;validate($event)&#39;> 点我确定 </a>
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				url: &#39;&#39;
			}, 
			methods: {
				validate: function(event){
					if(this.url.length == 0 || this.url.indexOf(&#39;http://&#39;) != 0){
						alert("您输入的网址不符合规则。 无法跳转")
						if(event){
							alert("event is: " + event)
							event.preventDefault()
						}   
					}
				}
			}
		})
	</script>
</body>
</html>

上面的代码中，可以看到，我们定义了一个变量： url. 并且通过代码：

<a v-bind:href="this.url" v-on:click="'validate($event)'"> 点我确定 </a> 做了两件事情：

把 url 绑定到了该元素上。
该元素在触发 click事件时，会调用 validate方法。该方法传递了一个特殊的参数： $event. 该参数是当前事件的一个实例。（MouseEvent)

在 validate方法中，我们是这样定义的：先验证是否符合规则。如果符合，放行，会继续触发 <a></a> 元素的默认动作（让浏览器发生跳转）。否则的
话，会弹出一个 “alert” 提示框。

用浏览器打开这段代码，可以看到下图所示：
What events are there in vuejs
我们先输入一个合法的地址： http://baidu.com ，可以看到，点击后，页面发生了跳转。跳转到了百度。

我们再输入一个 “不合法”的地址： https://baidu.com 注意：该地址不是以 “http://” 开头，所以我们的vuejs 代码不会让它放行。

如下图所示：
What events are there in vuejs
进一步观察，页面也不会跳转（很好的解释了这个时候 <a></a> 标签点了也不起作用)

5. `Event Modifiers` 事件修饰语

我们很多时候，希望把代码写的优雅一些。使用传统的方式，可能会把代码写的很臃肿。如果某个元素在不同的event下有不同的表现，那么代码看起来就会有
很多个 if ...else ... 这样的分支。

所以， Vuejs 提供了 “Event Modifiers”。

例如，我们可以把上面的例子略加修改：

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id=&#39;app&#39;>

		请输入您想打开的网址,   	<br/>
		判断规则是： 				<br/>
		1. 务必以 "http://"开头 	<br/>
		2. 不能是空字符串			<br/>
		<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
		<br/>
		<a v-bind:href="this.url" v-on:click=&#39;validate($event)&#39; v-on:click.prevent=&#39;show_message&#39;> 点我确定 </a>
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				url: &#39;&#39;
			}, 
			methods: {
				validate: function(event){
					if(this.url.length == 0 || this.url.indexOf(&#39;http://&#39;) != 0){
						if(event){
							event.preventDefault()
						}   
					}
				},
				show_message: function(){
					alert("您输入的网址不符合规则。 无法跳转")
				}
			}
		})
	</script>
</body>
</html>

可以看出，上面的代码的核心是：

<a v-bind:href="this.url" v-on:click=&#39;validate($event)&#39; v-on:click.prevent=&#39;show_message&#39;> 点我确定 </a>

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

先是在 <a></a> 中定义了两个 click 事件，一个是 click, 一个是 click.prevent. 后者表示，如果该元素的click 事件被阻止了的话，应该触发什么动作。

然后，在 methods 代码段中，专门定义了 show_message , 用来给 click.prevent 所使用。

上面的代码运行起来，跟前一个例子是一模一样的。只是抽象分类的程度更高了一些。在复杂的项目中有用处。

这样的 “event modifier”，有这些：

stop propagation 被停止后（也就是调用了 event.stopPropagation()方法后 )，被触发
prevent 调用了 event.preventDefault() 后被触发。
capture 子元素中的事件可以在该元素中被触发。
self 事件的 event.target 就是本元素时，被触发。
once 该事件最多被触发一次。
passive 为移动设备使用。 (在addEventListeners 定义时，增加passive选项。)

以上的 “event modifier” 也可以连接起来使用。例如： v-on:click.prevent.self

6. `Key Modifiers` 按键修饰语

Vuejs 也很贴心的提供了 Key Modifiers, 也就是一种支持键盘事件的快捷方法。我们看下面的例子：

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
	<div id=&#39;app&#39;>
		输入完毕后，按下回车键，就会<br/>
		触发 "show_message" 事件~  <br/><br/>

		<input v-on:keyup.enter="show_message" v-model="message" />
	</div>

	<script>
		var app = new Vue({
			el: &#39;#app&#39;, 
			data: {
				message: &#39;&#39;
			}, 
			methods: {
				show_message: function(){
					alert("您输入了：" + this.message)
				}
			}
		})
	</script>
</body>
</html>

可以看到，在上面的代码中， v-on:keyup.enter="show_message" 为 <a></a> 元素定义了事件，该事件对应了 “回车键”。
（严格的说，是回车键被按下后，松开弹起来的那一刻）

我们用浏览器打开上面的代码对应的文件，输入一段文字，按回车，就可以看到事件已经被触发了。

Vuejs 总共支持下面这些 Key modifiers:

enter 回车键
tab tab 键
delete 同时对应了 backspace 和 del 键
esc ESC 键
space 空格
up 向上键
down 向下键
left 向左键
right 向右键

随着 Vuejs 版本的不断迭代和更新，越来越多的 Key modifiers 被添加了进来，例如 page down, ctrl 。对于这些键的用法，
大家可以查阅官方文档。

相关推荐：《vue.js教程》

The above is the detailed content of What events are there in vuejs. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

VUE3基础教程：使用Vue.js插件封装图片上传组件Jun 15, 2023 pm 11:07 PM

VUE3基础教程：使用Vue.js插件封装图片上传组件Vue.js是一款流行的前端框架，它使开发者可以用更少的代码创建更高效、灵活的应用程序。尤其是在Vue.js3发布之后，它的优化和改进使得更多的开发者倾向于使用它。这篇文章将介绍如何使用Vue.js3来封装一个图片上传组件插件。在开始之前，需要先确保已经安装了Vue.js和VueCLI。如果尚未安装

VUE3快速入门：使用Vue.js指令实现选项卡切换Jun 15, 2023 pm 11:45 PM

本文旨在帮助初学者快速入手Vue.js3，实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架，可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本，相较于之前的版本变动较大，但基本原理并未改变。在本文中，我们将使用Vue.js指令实现选项卡切换效果，目的是让读者熟悉Vue.js的

Flask + Vue.js：快速实现单页面应用Jun 17, 2023 am 09:06 AM

随着移动互联网和Web技术的迅速发展，越来越多的应用需要提供流畅、快速的用户体验。传统的多页面应用已经无法满足这些需求，而单页面应用（SPA）则成为了解决方案之一。那么，如何快速实现单页面应用呢？本文将介绍如何利用Flask和Vue.js来构建SPA。Flask是一个使用Python语言编写的轻量级Web应用框架，它的优点是灵活、易扩

VUE3基础教程：使用Vue.js插件封装日历组件Jun 15, 2023 pm 09:09 PM

Vue.js是现代化的前端JavaScript框架之一，它提供了一套完整的工具来构建交互式用户界面。在Vue.js的生态系统中，有各种各样的插件和组件，可以大大简化我们的开发流程。在本篇文章中，我们将介绍如何使用Vue.js插件封装一个日历组件，以方便我们在Vue.js项目中快速使用。Vue.js插件Vue.js插件可以扩展Vue.js的功能。它们可以添加全

Vue.js实现登录验证的完整指南（API、JWT、axios）Jun 09, 2023 pm 04:04 PM

Vue.js是一种流行的JavaScript框架，用于构建动态Web应用程序。实现用户登录验证是开发Web应用程序的必要部分之一。本文将介绍使用Vue.js、API、JWT和axios实现登录验证的完整指南。创建Vue.js应用程序首先，我们需要创建一个新的Vue.js应用程序。我们可以使用VueCLI或手动创建一个Vue.js应用程序。安装axiosax

VUE3开发入门教程：使用Vue.js组件封装chart图表Jun 15, 2023 pm 10:29 PM

随着大数据时代的到来，数据可视化已经成为了现如今的趋势之一。在Web前端开发的过程中，如何使用Vue.js进行数据可视化处理，成为了许多前端开发者所关注的问题。本文将会介绍如何使用Vue.js组件，封装基于chart.js库的图表。1.了解chart.jsChart.js是一款基于HTML5CanvasElement的简单易用、跨平台的开源图表库，我们可

VUE3基础教程：使用Vue.js自定义事件Jun 15, 2023 pm 09:43 PM

Vue.js是一款流行的JavaScript框架，它提供了很多方便的特性，所以它在开发Web应用程序时非常有用。Vue.js中的自定义事件系统使其更加灵活，并且可以通过组件事件触发和处理来实现更好的代码重用性。在本文中，我们将讨论如何使用Vue.js的自定义事件。Vue.js中自定义事件的基础在Vue.js中，我们可以通过v-on指令来监听DOM事件。例如，

使用Python与Vue.js开发实时同步的Web应用程序Jun 17, 2023 am 08:28 AM

随着Web应用程序的普及和用户体验的要求不断提高，实时同步已经成为了现代Web应用程序不可或缺的功能。在本文中，我们将介绍如何使用Python和Vue.js开发实时同步的Web应用程序。为了实现实时同步的功能，我们需要使用一些现代化的Web技术，其中包括WebSocket、异步编程和前端框架。以下是本文中将用到的技术栈：Python3.6+FlaskFla

See all articles