v-on 指令

简介: v- 开头1. v-on 两种修饰符1)事件修饰符(4种)prevent,stop,capture,self详细说明:prevent: preventDefault() 阻止事件的默认行为stop: stopPropagation() 阻止事件冒泡capture: 表示添加事件侦听器时采用 capture 即捕获模式示例代码:.

v- 开头

1. v-on 两种修饰符

1)事件修饰符(4种)
prevent,stop,capture,self

详细说明:
prevent: preventDefault() 阻止事件的默认行为
stop: stopPropagation() 阻止事件冒泡
capture: 表示添加事件侦听器时采用 capture 即捕获模式

示例代码:
<div v-on:click.capture='doThis'>...</div>

self: 只有当事件作用在该元素本身(而不是子元素),触发时触发回调

示例代码:
<div v-on:click.self='doSomething'>...</div>

2)按键修饰符(监听键盘事件)
记住 keyCode 比较困难,Vue.js 提供了别名

  • enter (keyCode: 13)
  • tab (keyCode: 9)
  • delete (keyCode: 8, 46)
  • esc (keyCode: 27)
  • space (keyCode: 32)
  • up (keyCode: 38)
  • dowm (keyCode: 40)
  • left (keyCode: 37)
  • right (keyCode: 39)
    示例:
只有在回车时调用 vm.submit()
<input v-on:keyup.13='submit'></input>
或:
<input v-on:keyup.enter='submit'></input>
缩写语法:
<input @keyup.enter='submit'></input>
目录
相关文章
|
存储 Shell 开发者
E906的指令|学习笔记
快速学习 E906的指令
450 0
|
3月前
|
Kubernetes 监控 容器
k9s常用的指令
K9s 是一个用于 Kubernetes 群集管理的命令行工具,它提供了一系列常用的指令,用于查看、管理和监控 Kubernetes 资源。以下是一些常用的 K9s 指令: 1. **查看资源列表:** - `:po`:查看 Pod 列表。 - `:svc`:查看 Service 列表。 - `:deploy`:查看 Deployment 列表。 - `:ns`:查看 Namespace 列表。 2. **在资源列表中的操作:** - 使用上下箭头键浏览资源列表。 - `Enter` 键进入资源的详细信息视图。 - `d`:删除选定的资源。
116 4
|
8月前
|
Kubernetes API 容器
2022-10-13-k8s的操作指令
2022-10-13-k8s的操作指令
62 0
|
9月前
|
JavaScript
v-if 指令
1.v-if指令的作用是:根据表达式的真假切换元素的显示状态 2.本质是通过操纵dom元素来切换显示状态 3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除 4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小
|
Go Docker 容器
Dockfile指令
笔记:Dockfile指令
176 0
|
JavaScript 前端开发
3、指令(v-if与v-for的区别、各种指令的使用)
3、指令(v-if与v-for的区别、各种指令的使用)
117 0
3、指令(v-if与v-for的区别、各种指令的使用)
|
前端开发 安全 JavaScript
内置指令
内置指令
109 0
NgModel指令学习笔记
NgModel指令学习笔记
115 0
NgModel指令学习笔记
数据指令
增删改查 插入数据,如果已有主键值则插入数据失败
101 0
|
JavaScript 索引
v-for指令的四种使用方式
一、v-for属性 二、四种使用方式代码