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 中引用变量：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
您点击了： {% raw %}{{{% endraw %} count }} 次
<br/>
<button v-on:click='count += 1' style='margin-top: 50px'> + 1</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
}
})
</script>
</body>
</html>上面的代码，用浏览器打开后， 点击 按钮， 就可以看到 count 这个变量会随之 +1. 如下图所示：
2. 在 v-on 中使用方法名
上面的例子，也可以按照下面的写法来实现：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
您点击了：{% raw %}{{{% endraw %} count }} 次
<br/>
<button v-on:click='increase_count' style='margin-top: 50px'> + 1 </button>
</div>
<script>
var app = new Vue({
el: '#app',
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='app'>
{% raw %}{{{% endraw %} message }}
<br/>
<button v-on:click='say_hi("明日的Vuejs大神")' style='margin-top: 50px'> 跟我打个招呼~ </button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "这是个 在click中调用 方法 + 参数的例子"
},
methods: {
say_hi: function(name){
this.message = "你好啊，" + name + "!"
}
}
})
</script>
</body>
</html>使用浏览器打开后，点击按钮，就可以看到下图所示：
4. 重新设计按钮的逻辑
我们在实际开发中，往往会遇到这样的情况： 点击某个按钮，或者触发某个事件后，希望按钮的默认状态。
最典型的例子： 提交表单(<form/>)的时候，我们希望先对该表单进行验证。 如果验证不通过，该表单就不要提交。
这个时候，如果希望表单不要提交，我们就要让 这个 submit 按钮，不要有下一步的动作。 在所有的开发语言当中，都会有一个对应的方法，叫做： “preventDefault”
(停止默认动作)
我们看这个例子：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id='app'>
请输入您想打开的网址, <br/>
判断规则是： <br/>
1. 务必以 "http://"开头 <br/>
2. 不能是空字符串 <br/>
<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
<br/>
<a v-bind:href="this.url" v-on:click='validate($event)'> 点我确定 </a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: ''
},
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 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/> 元素的默认动作（让浏览器发生跳转） 。 否则的
话，会弹出一个 “alert” 提示框。
用浏览器打开这段代码，可以看到下图所示：
我们先输入一个合法的地址： http://baidu.com ， 可以看到，点击后，页面发生了跳转。 跳转到了百度。
我们再输入一个 “不合法”的地址： https://baidu.com 注意： 该地址不是以 “http://” 开头，所以我们的vuejs 代码不会让它放行。
如下图所示：
进一步观察，页面也不会跳转（很好的解释了 这个时候 <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='app'>
请输入您想打开的网址, <br/>
判断规则是： <br/>
1. 务必以 "http://"开头 <br/>
2. 不能是空字符串 <br/>
<input v-model="url" placeholder="请输入 http:// 开头的字符串, 否则不会跳转" /> <br/>
<br/>
<a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 点我确定 </a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: ''
},
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 0){
if(event){
event.preventDefault()
}
}
},
show_message: function(){
alert("您输入的网址不符合规则。 无法跳转")
}
}
})
</script>
</body>
</html>可以看出，上面的代码的核心是：
<a v-bind:href="this.url" v-on:click='validate($event)' v-on:click.prevent='show_message'> 点我确定 </a>
methods: {
validate: function(event){
if(this.url.length == 0 || this.url.indexOf('http://') != 0){
if(event){
event.preventDefault()
}
}
},
show_message: function(){
alert("您输入的网址不符合规则。 无法跳转")
}
}先是在 <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='app'>
输入完毕后，按下回车键，就会<br/>
触发 "show_message" 事件~ <br/><br/>
<input v-on:keyup.enter="show_message" v-model="message" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
show_message: function(){
alert("您输入了：" + this.message)
}
}
})
</script>
</body>
</html>可以看到，在上面的代码中， v-on:keyup.enter="show_message" 为 <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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
在iPhone锁屏上获取即将到来的日历事件
Dec 01, 2023 pm 02:21 PM
在运行iOS16或更高版本的iPhone上，您可以直接在锁定屏幕上显示即将到来的日历事件。继续阅读以了解它是如何完成的。由于表盘复杂功能，许多AppleWatch用户习惯于能够看一眼手腕来查看下一个即将到来的日历事件。随着iOS16和锁定屏幕小部件的出现，您可以直接在iPhone上查看相同的日历事件信息，甚至无需解锁设备。日历锁定屏幕小组件有两种风格，允许您跟踪下一个即将发生的事件的时间，或使用更大的小组件来显示事件名称及其时间。若要开始添加小组件，请使用面容ID或触控ID解锁iPhone，长按
Vue.js与Lua语言的融合，构建游戏开发的前端引擎的最佳实践和经验分享
Aug 01, 2023 pm 08:14 PM
Vue.js与Lua语言的融合，构建游戏开发的前端引擎的最佳实践和经验分享引言：随着游戏开发的不断发展，游戏前端引擎的选择成为了一个重要的决策。在这些选择中，Vue.js框架和Lua语言都成为了众多开发者的关注点。Vue.js作为一款流行的前端框架具有丰富的生态系统和便捷的开发方式，而Lua语言则因其轻量级和高效性能在游戏开发中得到广泛应用。本文将探讨如何将
如何使用Vue实现仿QQ聊天气泡特效
Sep 20, 2023 pm 02:27 PM
如何使用Vue实现仿QQ聊天气泡特效在现如今的社交时代，聊天功能已经成为了手机应用和网页应用的核心功能之一。而聊天界面中最常见的元素之一就是聊天气泡，它可以清晰地将发送者和接收者的信息区分开来，有效地提高了信息的可读性。本文将介绍如何使用Vue实现仿QQ聊天气泡特效，以及提供具体的代码示例。首先，我们需要创建一个Vue组件来表示聊天气泡。组件包含两个主要部分
如何使用PHP和Vue.js实现图表上的数据筛选和排序功能
Aug 27, 2023 am 11:51 AM
如何使用PHP和Vue.js实现图表上的数据筛选和排序功能在网页开发中，图表是一种非常常见的数据展示方式。使用PHP和Vue.js可以轻松实现图表上的数据筛选和排序功能，使用户能够自定义查看图表上的数据，提高数据的可视化效果和用户体验。首先，我们需要准备一组数据供图表使用。假设我们有一个数据表格，包含姓名、年龄和成绩三列，数据如下：姓名年龄成绩张三1890李
在JavaScript中，'oninput'事件的用途是什么？
Aug 26, 2023 pm 03:17 PM
当在输入框中添加值时，就会发生oninput事件。您可以尝试运行以下代码来了解如何在JavaScript中实现oninput事件-示例<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"
Vue.js与Dart语言的集成，构建酷炫的移动应用UI界面的实践和开发技巧
Aug 02, 2023 pm 03:33 PM
Vue.js与Dart语言的集成，构建酷炫的移动应用UI界面的实践和开发技巧引言：在移动应用开发中，用户界面(UI)的设计和实现是非常重要的一部分。为了能够实现酷炫的移动应用界面，我们可以将Vue.js与Dart语言进行集成，借助Vue.js的强大数据绑定和组件化特性，以及Dart语言的丰富的移动应用开发库，来构建出令人惊艳的移动应用UI界面。本文将介绍如何
jQuery中如何实现select元素的改变事件绑定
Feb 23, 2024 pm 01:12 PM
jQuery是一个流行的JavaScript库，可以用来简化DOM操作、事件处理、动画效果等。在web开发中，经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实现对select元素改变事件的绑定，并提供具体的代码示例。首先，我们需要使用标签来创建一个包含选项的下拉菜单：
如何在PHP和Vue.js中实现可交互的热力图统计
Aug 19, 2023 am 09:41 AM
如何在PHP和Vue.js中实现可交互的热力图统计热力图（Heatmap）是一种以热力图的形式展示数据分布和集中度的可视化方式。在Web开发中，常常需要将后端数据和前端展示结合起来，实现可交互的热力图统计功能。本文将介绍如何在PHP和Vue.js中实现这一功能，并提供相应的代码示例。第一步：后端数据的准备首先，我们需要准备用于生成热力图的数据。在PHP中，我
