点击查看上一篇文章👇
从零开始学Vue3——(一)入门/TeAmo__/article/details/123119271?spm=1001..3001.5501
前言
一、事件修饰符
二、按键修饰符
三、系统修饰符
四、鼠标按钮修饰符
五、表单
文本与多行文本
复选框checkbox
单选框radio
选择框select
六、表单修饰符
总结
前言
这节主要学习的是修饰符,可以使事件的声明更方便
一、事件修饰符
Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
修饰符可连用
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture 捕获
.self 自身元素触发
.once 执行一次
.passive 滚动立即触发,不等待滚动完成(移动端性能提升)
实例:
<div id="app"><button type="button" @click="say">say 正常点击事件</button><br><button type="button" @click.once="say">once 只能触发一次</button><br><div class="box" @click="say"><a href="" @click="say">a 弹出两次并跳转</a><br><a href="" @click.prevent="say">prevent 弹出两次不跳转</a><br><a href="" @click.prevent.stop="say">prevent+stop 弹出一次不跳转</a><br></div></div>
Vue.createApp({methods: {say() {alert("say!");}}}).mount("#app");
二、按键修饰符
监听键盘事件时,我们经常需要检查特定的按键。可以使用按键修饰符
Vue 为最常用的键提供了别名
.enter 回车
.tab 制表
.delete “删除”和“退格”键
.esc 取消
.space空格
.up 上
.down 下
.left 左
.right 右
实例:
<div id="app"><input type="text" @keyup.enter="list.unshift(temp1);temp1=''" v-model="temp1" placeholder="回车确定" /><br><input type="text" @keyup="up" v-model="temp2" placeholder="回车确定" /><p v-for="(item,index) in list">{{item}}</p></div>
Vue.createApp({data() {return {list: ["vue"],temp1: "",temp2: "",}}},methods: {up(e) {if (e.keyCode === 13) {this.list.unshift(this.temp2);this.temp2 = "";}}}}).mount("#app");
运行结果:
两个输入框实现效果相同,使用按键修饰符,无需再判断更方便
三、系统修饰符
按下相应按键时才触发键盘事件的监听器。
.enter 回车
.ctrl
.alt
.shift
.meta (⌘或Windows 图标键 ⊞)
.exact 精确
四、鼠标按钮修饰符
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
.left
.right
.middle
五、表单
文本与多行文本
<div id="app"><input type="text" v-model="msg1"/><p>{{msg1}}</p><textarea rows="" cols="" v-model="msg2"></textarea><p style="white-space: pre-line;">{{msg2}}</p></div>
Vue.createApp({data() {return {msg1: "",msg2: ""}}}).mount("#app");
运行结果:
ps:p标签的white-space: pre-line;属性是为了展示textarea的换行。
复选框checkbox
实例:单个复选框与多个复选框,与value结合可以获取到选中项的value
<div id="app"><label><input type="checkbox" v-model="check" />同意用户协议</label><p><button type="button" :disabled="!check">注册</button></p><p>{{check}}</p><p>爱好</p><label><input type="checkbox" value="唱歌" v-model="fav" />唱歌</label><label><input type="checkbox" value="跳舞" v-model="fav" />跳舞</label><label><input type="checkbox" value="读书" v-model="fav" />读书</label><label><input type="checkbox" value="游泳" v-model="fav" />游泳</label><p>{{fav}}</p></div>
Vue.createApp({data() {return {check: false,fav: [],}}}).mount("#app");
运行结果:
单选框radio
实例:
<div id="app"><label><input type="radio" name="group" value="1" v-model="gender" />男</label><label><input type="radio" name="group" value="2" v-model="gender" />女</label><label><input type="radio" name="group" value="3" v-model="gender" />保密</label><p>{{gender}}</p></div>
Vue.createApp({data() {return {gender: 3,}}}).mount("#app");
运行结果:
选择框select
实例:
<div id="app"><p>学历</p><select v-model="level"><option value="" disabled="disabled">请选择</option><option value="小学">小学</option><option value="初中">初中</option><option value="高中">高中</option><option value="高中">大学</option></select><p>{{level}}</p></div>
Vue.createApp({data() {return {level: '',}}}).mount("#app");
运行结果:
六、表单修饰符
.lazy 懒加载;change时更新而非input时更新
.number 将用户输入的值转为数字类型
.trim 过滤首尾空白
实例:
<div id="app"><p>数字:</p><input type="text" v-model.number="num" /><p>{{num}}</p><p>懒加载:</p><input type="text" v-model.lazy="lazy" /><p>{{lazy}}</p><p>去空格:</p><input type="text" v-model.trim="trim" /><p>{{trim}}</p></div>
Vue.createApp({data() {return {num: "",lazy:"",trim:"",}}}).mount("#app");
运行结果:
点个赞吧👍