记录学习的四种修饰符:
- 事件修饰符
- 表单修饰符
- 键盘修饰符
- 鼠标修饰符
1.事件修饰符
如果可以,避免在methods中处理DOM事件细节,最好methods只有纯粹的数据逻辑。
那为了处理DOM事件,Vue.js为v-on提供了事件修饰符:
- .stop --- 取消事件的进一步冒泡,即不会向上触发其他点击事件,相当于
event.stopPropagation()
。
<div class="div1" @click="number(2)">
<!--<div class="div2" @click="number(1)"></div>-->
<!--不加.stop的话会冒泡,输出1,2-->
<div class="div2" @click.stop="number(1)"></div>
<!--加.stop会阻止冒泡,输出1-->
</div>
<script>
var vm = new Vue({
el : ".div1",
methods : {
number : function(num){
console.log(num);
}
}
})
</script>
-
.prevent --- 阻止事件的默认行为 --- 相当于
event.preventDefault()
。
例如:
点击submit按钮提交表单,用了.prevent
就会阻止表单的提交。 -
.capture --- 事件冒泡的顺序是沿着DOM树向上传播的(子->父),但是.capture会将顺序改过来:
<div class="div1" @click.capture="number(2)">
<div class="div2" @click="number(1)"></div>
</div>
<!--正常点击div2会输出1,2-->
<!--加.capture点击div2会输出2,1-->
注意.capture作用在父节点上,每层都加,不然按普通冒泡处理。
- .self --- 只当事件在该元素本身触发时才会触发回调 --- 子元素也不会触发。
<div class="div1" @click.self="number(2)">
<div class="div2" @click="number(1)"></div>
</div>
<!--点击div1区域(不包含div2)输出2 ,点击div2区域(不包含div1)输出1-->
2.表单修饰符
- .lazy --- v-model的绑定很同步,比如下面这个例子,你输入的时候它就在展示你输入的信息了 ,如果用
.lazy
修饰符,情况就会跟onchange
事件一样,在我们全部输入完离开之后(outline消失)才会更新视图。
<div class="a">
<input type="text" v-model="val" />
<p>{{ val }}</p>
</div>
<script>
var vm = new Vue({
el : '.a',
data : {
val : ''
}
})
</script>
<input type="text" v-model.lazy="val" />
-
.number --- 可以自动将用户的输入值转换为Number类型(如果原值的转换结果为NaN则返回原值):
然后我就试了一下,发现emm,输入字符串显示的还是字符串,输入数字显示的还是数字??
但是在输入数字+字符串的组合就只会提取字符串之前数字:
- .trim --- 会过滤用户输入的首尾空格
3.键盘修饰符
在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on
在监听键盘事件时添加按键修饰 .keyCode:
<!-- 只有在 keyCode 是 14 时调用方法lala() -->
<button v-on:keyup.14="lala">lala</button>
有好多个键值,很难记忆,所以提供一些经常使用的键值的别名:
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
另外也可以用config.keyCodes
对象自定义按钮修饰符的别名:
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
4.鼠标修饰符
- .left --- 鼠标左键触发
- .right --- 鼠标右键触发
- .middle --- 鼠标中键触发
<div class="div1" @click.left="number(2)" @click.right="number(3)" @click.middle="number(4)"></div>
<script>
var vm = new Vue({
el : ".div1",
methods : {
number : function(num){
console.log(num);
}
}
})
//点击鼠标左键,输出2
//点击鼠标右键,输出3
//点击鼠标中键,输出4
</script>
有什么建议或者我有什么写得不好的,望告知,蟹蟹~🦀🦀