v-model 修饰符
.lazy
- 取代 input 监听 change 事件
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
- 输入字符串转为有效的数字
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
<input v-model.number="age" type="number">
.trim
- 输入首尾空格过滤
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<div id='other'>
<input v-model.trim='trim'>
<p ref='tr'>{{trim}}</p>
<button @click='getStr'>获取</button>
</div>
<script>
new Vue({
el:'#other',
data:{
trim:''
},
methods:{
getStr(){
console.log(this.$refs.tr.innerHTML)
}
}
})
</script>
v-on 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
修饰符:
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
<!-- 停止冒泡,阻止单击事件继续传播 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
注意:
- 使用串联修饰符时,顺序很重要,其效果按串联顺序产生:
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击。
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符进行键值检查,省去查找常用按键对应的 code值的麻烦:
// keyCode 对应enter
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
// 缩写语法
<input @keyup.enter="submit">
全部的按键别名:
.enter => // enter键
.tab => // tab键
.delete => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右
系统修饰符
实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
注意:修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。
按键与keyCode
按键 | keyCode |
---|---|
0-9 | 48-57 |
a-z/A-Z | 65-90 |
F1-F24 | 112-135 |
BackSpace(退格) | 8 |
Tab | 9 |
Enter(回车) | 13 |
Caps_Lock(大写锁定) | 20 |
Space(空格键) | 32 |
Left(左箭头) | 37 |
up(上箭头) | 38 |
Right(右箭头) | 39 |
Down(下箭头) | 40 |