在vue中v-model、v-on除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现,通过在指令后面用小数点 .
连接修饰符名称来调用修饰符,下面是对vue中的修饰符的总结及积累:
v-model
是用于在表单表单元素上创建双向数据绑定的指令。在 和
上,默认通过监听元素的 input 事件来更新绑定的属性值。
1、.lazy 修饰符
.lazy
:在改变后才触发,也就是说当input
或者textarea
失去焦点时,它所绑定的值才会改变,如:
<input type="text" v-model.lazy="haha">
<p>输入的内容为:{{ haha }}p>
2、.number 修饰符
.number
:用来将输入的内容转换成数值,但如果输入的是字符串,则输出的也是字符串;
用于type='text'
:
<input type="text" v-model.number="haha">
<p>输入的内容为:{{ haha }}p>
用于type='number'
:
<input type="number" v-model.number="haha">
<p>输入的内容为:{{ haha }}p>
无论是用在text
中还是用在number
中,都需要再进行处理:
用在text
中:
<script>
// 对haha监听,如下:
watch: {
haha (newVal, oldVal) {
this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
}
}
</script>
用在number
中:
<script>
// 给input绑定blur事件
methods: {
inputBlurFunc (newVal, oldVal) {
this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
}
}
script>
3、.trim 修饰符
.trim
:自动过滤字符串前后的空格
<input type="text" v-model.trim="haha">
<p>输入的内容为:{{ haha }}p>
1、.stop 修饰符
.stop
:该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation()
方法
<div @click='clickDivFunc'>
<button @click.stop='clickBtnFunc'>点我button>
<div>
2、.prevent 修饰符
.prevent
:该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault()
方法
<form @submit.prevent='clickBtnFunc'>form>
3、.self 修饰符
.self
:只有该元素本身能触发此事件,它的子元素无法触发它的事件;所以,当点击了它的子元素,按照冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是它,所以它的事件不会被触发;如下:
<div @click.self='clickDivFunc'>
<button @click='clickBtnFunc'>点我button>
<div>
4、.once 修饰符
.once
:该修饰符表示绑定的事件只会被触发一次
<button @click.once='clickBtnFunc'>点我button>
5、.native 修饰符
.native
:给某个组件的根元素上添加事件,需要添加该修饰符来使事件有效;使用在普通根元素上,改修饰符是无效的;如下:
<my-component v-on:click.native="clickFun"></my-component>
Vue 允许为 v-on 在绑定键盘事件时添加按键修饰符,通过 keyup.keyCode
的方式来监听键盘特定按键的事件。也可以通过按键名称来监听,如下:
<input type='text' @keyup.13='submitFunc'>
<input type='text' @keyup.enter="submit">
所有的按键别名:
自定义按键修饰符
通过config.keyCodes
对象来自定义按键修饰符别名,如:
Vue.config.keyCodes.f1 = 112
1、.sync 修饰符
.sync
:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定,即在子组件中修改父组件的属性值;该修饰符会被扩展为一个自动更新父组件属性的v-on
监听器,如下:
<comp :foo.sync="bar">comp>
扩展为:
<comp :foo="bar" @update:foo="val => bar = val">comp>
当子组件需要更新foo的值时,它需要显式的触发更新事件,如下:
this.emit('update:foo', newValue)