七、方法与事件

当ViewModel 销毁时,所有的事件处理器都会自动删除,无须自己清理。

Vue 提供了一个特殊变量$event ,用于访问原生DOM 事件

<a href=” h!tp:llwww.apple.com”@ click="handleClick ('禁止打开’,$event )” >打开链接</a>

在@绑定的事件后加

小圆点“.”,再跟一个后缀来使用修饰符。Vue 支持以下修饰符:

• .stop

• .prevent

• .capture

• .self

• .once

具体用法如下:

< !一阻止单击事件冒泡一〉

<a @click.stop=”handle "></a>

〈!一提交事件不再重载页面一〉

<form @submit.prevent="handle” ></ form>

〈!一修饰符可以串联一〉

<a @click.stop.prevent=” handle ” ></a>

〈!一只有修饰符一〉

<form @submit . prevent></form>

〈!一添加事件侦听器时使用事件捕获模式一〉

<div @click . capture=”handle ”> ... </div>

〈!一只当事件在该元素本身(而不是子元素) 触发时触发回调一〉

<div @click.self=” handle ”> ... </div>

< !一只触发一次,组件同样适用一〉

<div @click.once=” handle ”> ... </div>

在表单元素上监昕键盘事件时,还可以使用按键修饰符,比如按下具体某个键时才调用方法:

< !一只有在keyCode 是13 时调用vm . submit ()一〉

<input @keyup.13 =“ submit ”〉

除了具体的某个keyCode 外, Vue 还提供了一些快捷名称,以下是全部的别名:

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

这些按键修饰符也可以组合使用,或和鼠标一起配合使用:

• .ctrl

• .alt

• .shift

• .meta (Mac 下是Command 键, Windows 下是窗口键)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,096评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,278评论 0 6
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,429评论 0 25
  • 亲爱的孩子,到这个月底你就要满5岁了,爸爸妈妈除了如往年正常一般给你准备生日礼物的同时,还决定为你营造一个新...
    多满李老师阅读 434评论 0 1