vue学习记录二:修饰符(一):事件修饰符
vue学习记录二:修饰符(一):事件修饰符
- 一、.stop
- 二、.prevent
- 三、.self
- 四、.native
- 二、按键修饰符
- 三、表单操作符
写法
<div @click.stop.prevent ="fn"></div>
//事件修饰符可以连写,且顺序很重要。prevent 在最前面会阻止所有的点击,
一、.stop
1.stop:阻止事件冒泡。只触发最外层 的元素事件。原生js是event.stopPropagation()
二、.prevent
2.prevent:阻止默认行为,一般是阻止a标签的跳转行为。原生js是event.preventDefault()
三、.self
阻止冒泡上来的事件触发这个元素的这个事件。只有点击的是这个元素,才会触发这个元素的事件。
四、.native
触发组件的原生事件。
二、按键修饰符
写法
<div @keyup.enter ="fn"></div>
//事件的keycode表示按键的唯一标识,enter也可以写成数字,相当于那个按键,
1.enter:表示是按的是回车键时才会触发
2.delete:表示delete键和退格键才会触发
3.自定义按键修饰符:
Vue.config.keyCodes.aaa= 65
然后aaa修饰符的值就是65,即按下键盘上的a时才会触发事件。
名字是自定义的,但是值必须是按键对应的那个数字。
三、表单操作符
<input v-model.number ='age' type="number"/>
//控件或取到的值一般都是字符串形式,需要自己再做处理。
1.number:将值转换为数字
2.trim:去除字符串两边空格
3.lazy:将input事件切换为change事件,input事件是每次输入都触发,而change是失去焦点后就会触发。