美文网首页
v-on 指令

v-on 指令

作者: 赛亚人之神 | 来源:发表于2017-09-28 14:32 被阅读33次

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>

相关文章

  • 11.Vue.js方法

    v-on指令事件 v-on:click(鼠标单击事件) v-on:dblclick(鼠标双击事件) v-on:fo...

  • 【Vue基础】二、Vue中的指令

    1. v-on指令 v-on指令将事件绑定在元素上,可以简写为@。 v-on绑定的事件可以调用methods中的方...

  • Vue作品考核回顾

    基本指令 插值语法 Mustache 语法 {{ }} v-on v-on 监听指令, 语法糖为@ 在调用方法时,...

  • 说说 Vue.js 中的 v-on 事件指令

    v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件。 html: 注意:...

  • vue事件与表单处理

    事件处理 v-on指令 用于进行元素的事件绑定 Vue.js 还为 v-on 指令提供了简写方式@click 事件...

  • 【Vue】常用指令之v-on

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-on v-on指令是事件绑定指...

  • v-on指令

    Vue.js 基础学习 v-on 指令

  • v-on 指令

    v- 开头 1. v-on 两种修饰符 1)事件修饰符(4种)prevent,stop,capture,self ...

  • 指令

    一、事件监听:v-on指令 监听用户发生的事件,比如点击、拖拽、键盘事件等等,以便和用户交互。使用v-on指令 v...

  • vue中父子组件Props双向绑定

    事件处理方式 1. v-on指令 1.直接把 JavaScript 代码写在 v-on 指令中是不可行的,v-on...

网友评论

      本文标题:v-on 指令

      本文链接:https://www.haomeiwen.com/subject/mknmextx.html