vue事件（vue事件写法）

本篇文章给大家谈谈vue事件，以及vue事件写法对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、08《Vue 入门教程》Vue 事件处理
• 2、vue事件监听
• 3、Vue中的@keyup事件
• 4、Vue中 事件总线（eventBus）使用
• 5、vue中的事件冒泡和捕获(stop、capture)
• 6、vue中的点击事件

08《Vue 入门教程》Vue 事件处理

本小节我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令 v-on ，本章节我们将详细介绍在 v-on 的一些用法。包括如何传递参数、如何使用事件修饰符等。其中，事件修饰符是本章节的难点。事件修饰符很多，同学们不需要一下子都记住，只要学会如何使用它，在开发过程中如果有所遗忘，可以通过翻看文档来使用。

使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 count + 1 的操作。

在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行，雀游禅v-on 指令可以接收一个定义的方法来调用。示例如下：

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。

有时候我们需要在事件触发的时候传递一些参数，

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定了一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。

有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

实例演示

"运行案例" 可查看在线运行效果

代码解释： 在上述 JS 代码第 9-12 行，我们定义了事件函数 setCount。 在按钮点击事件中，我们将 $event 对象传递给函数，因此，在函数 setCount 中可以访问到原生事件对象。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细磨蔽节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指顷尘定的修饰符。

Vue 提供了以下事件修饰符：

接下来，我们用一个完整的示例来看下这些修饰符的使用方法。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 代码第 4-7 行，stop 案例中，当我们给按钮 click 事件添加 .stop 修饰符之后，点击按钮，事件不会向上传递。 代码第 10-16 行，submit.prevent 案例中，当给 submit 事件添加 .prevent 修饰符之后，提交事件不再重载页面。 代码第 19-21 行，capture 案例中，我们给父容器添加了 capture 事件，当点击按钮的时候，会先触发 capture 中的事件函数，然后再触发按钮绑定的点击事件。 代码第 24-26 行，self 案例中，我们给父容器的点击事件添加了 .self 的修饰符，所以只有点击父容器的时候才会触发该方法，当点击按钮的时候并不会触发父容器绑定的事件。 代码第 29-31 行，once 案例中，我们给按钮的点击事件添加了 .once 的修饰符，所以只有首次点击按钮的时候会触发事件函数，再次点击之后将不会触发事件函数。

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

注意：在 Mac 系统键盘上，meta 对应 command 键 ( )。在 Windows 系统键盘 meta 对应 Windows 徽标键 ( )。在 Sun 操作系统键盘上，meta 对应实心宝石键 ( )。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

Vue提供了.exact修饰符，实现单独的系统按键的事件。

例如：

本节，我们带大家学习了事件处理。主要知识点有以下几点：

[img]

vue事件监听

HTML 所监听的事件我们的vue都已经加入了监听竖盯枝

HTML 事件参考手册

下面我们来介绍几个比较常用的事件

1、onclick 元素上发生鼠标点击时触发。 == vue用法 @click（）

2、onscroll 当元素滚动条被滚动时运行的脚本。则旁 == vue用法 @scroll（）

可以用来监听元素是否滚动到底，如下：

3、ondblclick 元素上发生鼠标双击时触发。 == vue用法 @dblclick（）

4、onmousedown 当元素上按下鼠标按钮时触发。。 == vue用法 @mousedown（）

下面是一个元素拖动的例子：

5、onkeydown 在用户按下按键时触发。 == vue用法 @keydown（）

6、onkeypress 在用户敲击按钮时触发。 == vue用法 @keypress（）

7、onkeyup 当用户释放按键时触发。 == vue用法 @keyup（）

具体可以参考文档 HTML 事件参考手册

跟踪触摸的属性

每个Touch对象包含的属余敏性如下。

Vue中的@keyup事件

@keyup 是按键松开的事件，瞎悄当指定的按键松开会触发磨仿渣大薯的事件。

比如：平台登录页面使用该事件，当输入账号和密码后，直接回车完成登录

@keyup.enter 回车按键松开

@keyup.left 左键松开

@keyup.right 右键松开

@keyup.up 上键松开

@keyup.down 下键松开

@keyup.delete 删除键松开

Vue中 事件总线（eventBus）使用

在Vue中如果两个页面组件中没有任何引入和被引入关系，该如何通信呢？首先可能会想到是Vuex ，但是如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信，就可以考虑 Vue 中的事件总线 ，即 eventBus 来通信。

eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。由于太方便如若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的 Vuex 作为状态管理中心，将通知的概念上升到共享状态层次。

A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

eventBus 适合小项目、数据被更少组件使用的项目，对于中大型项目悄埋数据在很多组件之间使用的情况 eventBus 就不太适用了禅运链。eventBus 其实就是一个发布订贺孙阅模式，利用 Vue 的自定义事件机制，在触发的地方通过 $emit 向全局Bus外发布一个事件，在需要监听的页面，通过 $on 监听事件。最后在组件销毁时，需要通过 $off 将事件移除监听

vue中的事件冒泡和捕获(stop、capture)

      对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom（捕获过程），然后再从目标的Dom原路传出去（冒泡过程）。通常我们只监听冒泡过程。在vue中，当我们添加了事件修饰符capture后，才会变成捕获监听器。

      这时我们有帆纳8个监听器了，在捕获过程和冒泡过程都有监听。输出如下图。

      我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只穿两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

      在不使用任何框架的情况下，我们在js中通过stopPropagation方法阻止事件继续传递。 使用框架时可使用对应的框架提供的方法。接下来我将了Vue框架的stop修饰符态唯没来阻止事件传递。 我们可山悄以在传递过程中阻止事件继续传递，防止触发不需要的事件。

vue中的点击事件

是一个自己总是记不太清的属性：

几个相雹桥同的元素，添加同样的一个点击事件处理程序来做处理，需要将元素自身

传递给事件处理租旅程序来改变弊肆凳元素自身的一些属性，或者行为：

Tab(num,event){

var e = event.currentTarget // 这样获取到的是被点击的元素自身

var c = event.target // 这样获取到的是点击元素的子元素

}

子

关于vue事件和vue事件写法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。