11-Vue指令之V-on

最新推荐文章于 2024-08-20 18:05:43 发布

原创最新推荐文章于 2024-08-20 18:05:43 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue.js中的v-on指令，该指令用于绑定事件监听器。文章详细解释了如何使用v-on来监听原生DOM事件及自定义事件，并展示了如何利用修饰符如.stop、.prevent等来增强事件处理能力。

v-on 指令用于绑定事件监听器。
事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略
使用在普通元素上时，只能监听原生 DOM 事件；使用在自定义元素组件上时，也可以监听子组件触发的自定义事件
在监听原生 DOM 事件时，如果只定义一个参数，DOM event 为事件的唯一参数；如果在内联语句处理器中访问原生 DOM 事件，则可以用特殊变量 $event 把它传入方法
在监听自定义事件时，内联语句可以访问一个 $arguments 属性，它是一个数组，包含了传给子组件的$ emit 回调的参数

<!--方法处理器-->
<button v-on:click = 'doThis'></button>
<!--内联语句-->
<button v-on:click = "doThat('hello',$event)"></button>
<!--缩写-->
<button @click = 'doThis'></button>

v-on 后面不仅可以跟参数，还可以增加修饰符
- .stop — 调用 event.stopPropagation()
- .prevent — 调用 event.preventDefault()
- .capture — 添加事件监听器时使用 capture 模式
- .self — 只当事件是从监听器绑定的元素本身触发时才触发回调
- .{ keyCode | keyAlias} — 只在指定按键上触发回调。
Vue.js 提供的键值有：

 esc:27    tab:9    space:32   delete:[8,46] 
 up:38     left:37  right:39   down:40

<!--停止冒泡-->
<button @click.stop = 'doThis'></button>
<!--阻止默认行为-->
<button @click.prevent =  'doThis'></button>
<!--阻止默认行为，没有表达式-->
<form @submit.prevent></form>
<!--串联修饰符-->
<button @click.stop.prevent = 'doThis'></button>
<!--串联修饰符，键别名-->
<input @keyup.enter = 'onEnter'>
<!--键修饰符 键代码-->
<input @keyup.13 = 'onEnter'>