搜尋
首頁web前端前端問答vuejs中有什麼事件

vuejs中有什麼事件

青灯夜游
青灯夜游
Sep 27, 2021 pm 06:18 PM
vuejs事件

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

vuejs中有什麼事件

本教學操作環境：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

範例：

vuejs中有什麼事件

vuejs中有什麼事件

vuejs中有什麼事件

總共定義了162個標準事件， 和數十個非標準事件，以及Mozilla的特定事件。如下圖所示：

vuejs中有什麼事件
我們不用全部都記住，通常在日常開發中，只有不到20個是最常見的event.

使用v-on 進行事件的綁定

我們可以認為，幾乎所有的事件，都是由v-on 這個directive 來驅動的。所以，本節會對 v-on 有更詳盡的說明。

1. 在v-on 中使用變數

如下面程式碼所示，可以在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>

上面的程式碼，用瀏覽器開啟後， 點選按鈕， 就可以看到 count 這個變數會隨之1. 如下圖所示：

vuejs中有什麼事件

2. 在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;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>

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

3. 在v-on 中使用方法名稱參數

#我們也可以直接使用v-on:click=' some_function("your_parameter")' 這樣的寫法，如下面的範例所示：

<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>

使用瀏覽器開啟後，點選按鈕，就可以看到下圖所示：
vuejs中有什麼事件

4. 重新設計按鈕的邏輯

我們在實際開發中，往往會遇到這樣的情況： 點選某個按鈕，或觸發某個事件後，希望按鈕的預設狀態。

最典型的例子： 提交表單(<form></form>)的時候，我們希望先對表單進行驗證。如果驗證不通過，則該表單就不要提交。

這個時候，如果希望表單不要提交，我們就要讓 這個 submit 按鈕，不要有下一步的動作。在所有的開發語言當中，都會有一個對應的方法，叫做： “preventDefault”
(停止預設動作)

我們看這個範例：

<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;> 点我确定 </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” 提示框。

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

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

如下图所示：
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教程》

以上是vuejs中有什麼事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
usestate（）與用戶ducer（）：為您的狀態需求選擇正確的掛鉤usestate（）與用戶ducer（）：為您的狀態需求選擇正確的掛鉤Apr 24, 2025 pm 05:13 PM

selectUsestate（）forsimple，獨立的variables; useusereducer（）forcomplexstateLogicorWhenStatedIppedsonPreviousState.1）usestate（）isidealForsImpleupDatesLikeToggGlikGlingaBglingAboolAboolAupDatingacount.2

使用usestate（）管理狀態：實用教程使用usestate（）管理狀態：實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案，因為它簡化了狀態管理，使代碼更清晰、更易讀，並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量，2)它通過鉤子機制在重新渲染間記住狀態，3)使用useState可以利用React的優化如備忘錄化，提升性能，4)但需注意只能在組件頂層或自定義鉤子中調用，避免在循環、條件或嵌套函數中使用。

何時使用usestate（）以及何時考慮替代狀態管理解決方案何時使用usestate（）以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate（）forlocalComponentStateMangementighatighation; 1）usestate（）isidealforsimple，localforsimple.2）useglobalstate.2）useglobalstateSolutionsLikErcontExtforsharedState.3）

React的可重複使用的組件：增強代碼可維護性和效率React的可重複使用的組件：增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1）heSredunceRedUndenceNandSimplifyUpdates.2）yensureconsistencyInuserexperience.3）

反應中的虛擬DOM：通過有效更新來提高性能反應中的虛擬DOM：通過有效更新來提高性能Apr 24, 2025 pm 04:41 PM

TheVirtualDOMisalightweightin-memorycopyoftherealDOMusedbyReacttooptimizeUIupdates.ItboostsperformancebyminimizingdirectDOMmanipulationthroughaprocessofupdatingtheVirtualDOMfirst,thenapplyingonlynecessarychangestotheactualDOM.

HTML和React的集成：實用指南HTML和React的集成：實用指南Apr 21, 2025 am 12:16 AM

HTML與React可以通過JSX無縫整合，構建高效的用戶界面。 1)使用JSX嵌入HTML元素，2)利用虛擬DOM優化渲染性能，3)通過組件化管理和渲染HTML結構。這種整合方式不僅直觀，還能提升應用性能。

React和HTML：渲染數據和處理事件React和HTML：渲染數據和處理事件Apr 20, 2025 am 12:21 AM

React通過state和props高效渲染數據，並通過合成事件系統處理用戶事件。 1）使用useState管理狀態，如計數器示例。 2）事件處理通過在JSX中添加函數實現，如按鈕點擊。 3）渲染列表需使用key屬性，如TodoList組件。 4）表單處理需使用useState和e.preventDefault()，如Form組件。

後端連接：反應如何與服務器互動後端連接：反應如何與服務器互動Apr 20, 2025 am 12:19 AM

React通過HTTP請求與服務器交互，實現數據的獲取、發送、更新和刪除。 1)用戶操作觸發事件，2)發起HTTP請求，3)處理服務器響應，4)更新組件狀態並重新渲染。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
4 週前ByDDD
Atomfall指南：項目位置，任務指南和技巧
1 個月前ByDDD
顯示更多

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7690
15
Java教學
1639
14
CakePHP 教程
1393
52
Laravel 教程
1287
25
PHP教程
1229
29
顯示更多