600元做网站,自己做的网站怎么搜不到,专业app制作平台,精美网页图片Vue常用的修饰符有哪些有什么应用场景
修饰符是什么
在Vue中#xff0c;修饰符处理了许多DOM事件的细节#xff0c;让我们不再需要花大量的时间去处理这些烦恼的事情#xff0c;而能有更多的精力专注于程序的逻辑处理
分类、有5种
表单修饰符事件修饰符鼠标按键修饰符键…Vue常用的修饰符有哪些有什么应用场景
修饰符是什么
在Vue中修饰符处理了许多DOM事件的细节让我们不再需要花大量的时间去处理这些烦恼的事情而能有更多的精力专注于程序的逻辑处理
分类、有5种
表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符
表单修饰符
在我们填写表单的时候用得最多的是input标签指令用得最多的是v-model
关于表单的修饰符有如下
lazytrimnumber
lazy
在我们填完信息光标离开标签的时候才会将值赋予给value也就是在change事件之后再进行信息同步
input typetext v-model.lazyvalue
p{{value}}/ptrim
它用于去除字符串两端的空格而中间的空格不会过滤
input typetext v-model.trimvaluenumber
自动将用户的输入值转为数值类型但如果这个值无法被parseFloat解析则会返回原来的值
input v-model.numberage typenumber事件修饰符
stop
阻止了事件冒泡相当于调用了event.stopPropagation方法
div clickshout(2)button click.stopshout(1)ok/button
/divprevent
阻止了事件的默认行为相当于调用了event.preventDefault方法
form v-on:submit.preventonSubmit/formself
只当在 event.target 是当前元素自身时触发处理函数
div v-on:click.selfdoThat.../div使用修饰符时顺序很重要相应的代码会以同样的顺序产生。因此用 v-on:click.prevent.self 会阻止所有的点击而 v-on:click.self.prevent 只会阻止对元素自身的点击
once
绑定了事件以后只能触发一次第二次就不会触发
button click.onceshout(1)ok/buttoncapture
.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
vue如果不加上这个会默认使用冒泡方式
div click.captureshout(1)obj1
div click.captureshout(2)obj2
div clickshout(3)obj3
div clickshout(4)obj4
/div
/div
/div
/div
// 输出结构: 1 2 4 3 passive
在移动端当我们在监听元素滚动事件的时候会一直触发onscroll事件会让我们的网页变卡因此我们使用这个修饰符的时候相当于给onscroll事件整了一个.lazy修饰符
vue的每个事件触发的时候都会先判断是否有阻止默认行为
当我们定义一个scroll事件的时候每次滚动的时候都会先判断是否阻止默认行为会降低性能显得不那么流畅。使用.passive就直接告诉浏览器不用检测默认行为了就会直接执行可以提高性能
!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --
!-- 而不会等待 onScroll 完成 --
!-- 这其中包含 event.preventDefault() 的情况 --
div v-on:scroll.passiveonScroll.../divnative
//孩子组件 这样vue会认为是一个自定义事件
Child clickonChildClick//这样子写的话vue就会认为是点击事件了
Child click.nativeonChildClick
鼠标按键修饰符
鼠标按钮修饰符针对的就是左键、右键、中键点击有如下
left 左键点击right 右键点击middle 中键点击
button click.leftshout(1)ok/button
button click.rightshout(1)ok/button
button click.middleshout(1)ok/button键盘修饰符
键盘修饰符是用来修饰键盘事件keyupkeydown的有如下
keyCode存在很多但vue为我们提供了别名分为以下两种
普通键enter、tab、delete、space、esc、up…系统修饰键ctrl、alt、meta、shift…
