Vue入门指北——modifier

简介: Vue入门指北——modifier

前言


在我们在进行开发的时候,往往会对当前点击事件进行限制,比如当我们需要按下回车键触发相应的method事件,并阻止默认的换行操作的时候,可能需要通过JavaScript判断相应的keycode,并且通过event.preventDefault()阻止他的默认行为。虽然说我们可以很轻松的实现这点,但更好的方式:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。而这一点也是vue官方所想看到,因此他推出很多modifier(修饰符),帮助我们更好的实现他,合理使用,事半功倍。


按键修饰符


  • KeyDown:按下按键时触发
  • KeyPress:按下按键,并且产生一个字符时触发
  • KeyUp: 松开某一个按键时触发


按键别名:

.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right


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


当我们想监听回车键按下执行send方式时:


<input @keyup.enter="send" />
复制代码


当然还有鼠标键组合键等等,这里不做阐述,想了解更多功能请查阅官方文档。


事件修饰符


这里介绍下几个常用的修饰符:具体请参考官方文档。


  • .stop:阻止事件冒泡


<a @click.stop="doThis"></a>
复制代码


  • .prevent:阻止事件默认行为


<form @submit.prevent="onSubmit"></form>
复制代码


  • .native:将原生事件绑定到组件


<components @click.native="onSend" />
复制代码


当我们要做一个聊天页面,用户想在输入框输入消息后按下回车键,立即发送消息时,就可以通过vue提供的修饰符组合起来做的,而调用的方法只需要出处理相应业务就可以。


以element的input为例:


<el-input @keydown.enter.native.prevent="send" />
复制代码


通过上文的按键修饰符加上相应的键名, native和prevent事件修饰符就可以很轻松实现这种效果。

相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
1天前
|
JavaScript
vue学习(14)深度监视
vue学习(14)深度监视
10 0
|
6天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
11 0
|
6天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用