博客
关于我
Vue基础学习笔记(五)之事件处理
阅读量:744 次
发布时间:2019-03-22

本文共 852 字,大约阅读时间需要 2 分钟。

5、事件处理

在Vue框架中,事件处理是非常重要的功能之一。事件处理有三种主要方式,分别是通过函数调用、通过函数名调用以及通过表达式调用。

监听事件–直接触发代码

这种方式通过在元素上直接使用v-on指令来绑定事件处理函数。例如,可以通过直接调用方法名来触发事件处理器。

代码示例:

{count}

方法事件处理器–写函数名

这种方式通过在v-on中指定方法名称来绑定事件处理函数。与直接调用方法的写法类似,但实际上两者工作方式相同。

代码示例:

{count}

内敛处理器方法—执行函数表达式

这种方式允许开发者通过表达式直接在模板中操作数据。虽然不常用,但在特定场景下可以提升可读性。

代码示例:

{count}

事件修饰符

Vue提供了多个事件修饰符,用于控制事件的传播或默认行为。这些修饰符可以提升代码的可复用性和安全性。

【1】阻止父组件触发----即阻止冒泡行为

使用.stop修饰符可以阻止事件向上级组件传播。

代码示例:

  • 111
  • 222
  • 333

使用.stop后的修改:

  • 111
  • 222
  • 333
【2】阻止默认行为

使用.prevent修饰符可以阻止元素的默认事件行为发生。

代码示例:

使用.preventDefault后的修改:

【3】只触发本身

使用.self修饰符可以阻止事件向上传播。

代码示例:

  • 111
  • 222
  • 333
【4】自触发一次(一次之后就失效)

使用.once修饰符可以让事件处理器只执行一次后自动解绑。

代码示例:

  • 111
  • 222
  • 333
【5】按回车键触发

使用.enter修饰符可以使事件仅在用户按回车键时触发。

代码示例:

6、表单控件绑定/双向数据绑定

Vue框架支持对表单控件进行绑定,实现双向数据同步。具体绑定方式与标准HTML表单控件一致,无需额外配置。

如需了解详细操作方法,可以参考《Vue基础学习笔记(六)之表单控件绑定/双向数据绑定》。

转载地址:http://esdwk.baihongyu.com/

你可能感兴趣的文章
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
Mysql join原理
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>