Vue 2.0学习笔记:v-on

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

在我们平常经常能看到这样的一些例子:

  • 当用户点击鼠标时
  • 当页面加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交HTML表单时
  • 当用户触发按键时

在使用Vue开发项目时,我们同样逃脱不了一些事件,那么这一节我们就一起来看看怎么在Vue中给元素或组件绑定一些事件。在学习Vue中的相关知识之前,咱们先简单的回忆一些JavaScript相关的知识。

JavaScript中事件相关知识

在JavaScript中任何一个DOM元素都有其自身存在的事件对象。事件对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态等。事件通常与函数结合使用,函数不会在事件发生前被执行。

在JavaScript中常见的事件句柄(Event Handlers)主要有:

属性名 描述(对应事件发生在何时...) 属性名 描述(对应事件发生在何时...)
onabort 图像的加载被中断 onblur 元素失去焦点
onchange 域的内容被改变 onclick 当用户点击某个对象时调用的事件名柄
ondblclick 当用户双击某个对象时调用的事件句柄 onerror 在加载文档或图像时发生错误
onfocus 元素获得焦点 onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载 onmousemove 鼠标按钮被按下
onmousemove 鼠标被移动 onmouseout 鼠标从某个元素移开
onmouseover 鼠标移动到某元素之上 onmouseup 鼠标铵键被松开
onreset 重置按钮被点击 onresize 窗口或框架被重新调整大小
onselect 文本被选中 onsubmit 确认按钮被点击
onunload 用户退出页面    

上表格中这些事件句柄,我们可以写在HTML元素中,也就当作HTML元素的属性,比如:

<!-- HTML -->
<h1 onclock="clickEvent">点击我</h1>

// JavaScript
function clickEvent() {
    alert('点我,我就出来了')
}
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/v-on.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部