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

vuejs中有什麼事件

青灯夜游
青灯夜游原創
2021-09-27 18:18:362486瀏覽

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
上一篇:vuejs有指令嗎下一篇:vuejs有指令嗎