Vue2修饰符

一如彷徨
274 阅读4分钟

修饰符的概念

  • 修饰符是用于限定类型以及类型成员的声明的一种符号

  • 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

  • 常见修饰符种类：

    1. 表单修饰符
    2. 事件修饰符
    3. 鼠标修饰符
    4. 按键修饰符
    5. v-bind修饰符

表单修饰符

  • 用于 v-model 指令

lazy

  • 默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
  • 添加 lazy 修饰符，从而转为在 change 事件之后进行同步
 <!-- 输入框失去焦点时，才会更改数据源 -->
 <input type="text" v-model.lazy="username">

1665570666624.png

number

  • 将用户的输入值转为数值类型
 <input type="text" v-model.number="age"/>

1665570869189.png

trim

  • 自动过滤用户输入的首尾空白字符
  • 注：初始值为数值类型，键入空格后虽然能过滤，但值类型会转化为字符串
 <input type="text" v-model.trim="age"/>

1665629198498.png

事件修饰符

  • 用于监听事件（ v-on指令 / @ ）

stop

  • 阻止事件冒泡
  • 相当于原生的 event.stopPropagation()
 <div id="app" @click="showMsg('div')">
   <button @click.stop="showMsg('button')">点击</button>
 </div>

1665629811797.png

prevent

  • 阻止事件的默认行为（如a链接跳转、表单提交重载等）
  • 相当于原生的 event.preventDefault()
 <a href="http://www.baidu.com" @click.prevent="showMsg('button')">点击</a>

1665629994324.png

capture

  • 添加事件监听器时使用事件捕获模式
   <div id="app" @click.capture="showMsg('div')">
     <button @click="showMsg('button')">点击</button>
   </div>

1665631436695.png

elf

  • 只当在 event.target 是当前元素自身时触发处理函数
 <div class="outer" @click="getTarget">
    <div class="mid" @click.self="getTarget">
      <div class="inner" @click="getTarget"></div>
    </div>
 </div>

 getTarget(event){
   console.log('currentTarget: ', event.currentTarget, 'target: ', event.target);
 }

1665634918885.png

once

  • 事件将只会触发一次
  • 其它只能对原生的 DOM 事件起作用，.once 修饰符还能被用到自定义的组件事件上
 <!-- 点击事件将只会触发一次 -->
 <button @click.once="showMsg('button')">点击</button>

passive

  • 对应 addEventListener 中的 passive 选项

  • 用途： 监听元素滚动事件时，会一直触发 onscroll 事件让网页变卡，因此使用 passive 时，相当于给 onscroll 事件加了 .lazy

  • 原理：

    • 不使用 passive ，浏览器执行完监听回调才得知是否有preventDefault，若没有再去执行默认行为
    • 使用 passive ，就是告诉浏览器不会有 preventDefault，直接执行默认行为，不考虑回调函数，即使在回调函数里调用 preventDefault 也不生效。
 <div @scroll.passive="onScroll">...</div>
  • 注意： 不要把 .passive 和 .prevent 一起使用，因为 .prevent 会被忽略

鼠标修饰符

  • 限制处理函数仅响应特定的鼠标按钮

left

  • 仅鼠标左键点击会触发
 <button @click.left="showMsg('button')">点击</button>

right

  • 仅鼠标右键点击会触发
 <button @click.right="showMsg('button')">点击</button>

1665641846027.png

middle

  • 仅鼠标中键（滚轮） 点击会触发
 <button @click.middle="showMsg('button')">点击</button>

按键修饰符

  • 监听键盘事件时，经常需要判断详细的按键，可以为键盘相关的事件添加按键修饰符
 <!-- 只有按下回车时调用submit() -->
 <input @keyup.enter="submit">

普通键

  • 为了支持旧浏览器，Vue 提供了常用的按键码的别名

    • .enter（回车）、.tab（Tab键）、.delete (删除/退格键)、.esc、.space（空格键）、.up、.down、.left、.right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值，若要做兼容，内置别名是首选

 // 内置f1键别名
 // 可以使用 `@keyup.f1`
 Vue.config.keyCodes.f1 = 112

系统修饰键

  • 仅在按下相应按键时才触发鼠标或键盘事件的监听回调
  • .ctrl、.alt、.shift、.meta
 <!-- 只有按下Ctrl+C时调用copy() -->
 <input v-model="name" @keydown.ctrl.67="copy"/> 

 copy(){
   console.log('按下了Ctrl+C');
 }

1666504262417.png

注意：不同电脑的meat键盘有差别

  • Mac系统： 对应 command 键 (⌘)
  • Windows系统： 对应 Windows 徽标键 (⊞)
  • Sun操作系统： 对应实心宝石键 (◆)
  • Knight / space-cadet键盘： 标记为“META”

系统修饰键与普通键有什么不同？

  • 在和 keyup 事件一起用时，系统修饰键必须处于按下状态

exact修饰符

  • 允许控制由精确的系统修饰符组合触发的事件
 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
 <!-- Ctrl和普通键同时按下也会触发，有其他系统修饰键则不生效 -->
 <button @click.ctrl.exact="onCtrlClick">按下Ctrl键</button>

 <!-- 没有任何系统修饰符被按下的时候才触发 -->
 <button @click.exact="onClick">不按下任何修饰键</button>

v-bind修饰符

prop

  • 被用于绑定 DOM 属性
  • v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 绑定到 property
  • 作用： 避免暴露数据，防止污染HTML结构
 <!-- 没使用.prop修饰符 -->
 <input :content="name" id="input"/>
 ​
 <!-- 使用.prop修饰符 -->
 <input :content.prop="name" id="input-prop"/>

 mounted(){
   const elNotProp = document.getElementById('input')
   const elHasProp = document.getElementById('input-prop')
   console.log('没有prop',elNotProp);
   console.log('没有prop',elNotProp.attributes);
   console.log('有prop',elHasProp);
   console.log('有prop',elHasProp.attributes);
 }

1666507409589.png

camel

  • HTML特性是不区分大小写
  • .camel 修饰符允许将 v-bind 属性名称驼峰化
 <svg :my-name="name" id="svg"></svg>
 ​
 <!-- 使用camel -->
 <svg :my-name.camel="name" id="svg-camel"></svg>

 mounted(){
   const el = document.getElementById('svg')
   const elCamel = document.getElementById('svg-camel')
   console.log('没有camel',el);
   console.log('带camel',elCamel);
 }

1666507983822.png

注意： 好像除了 svg 会转成驼峰命名，其他标签只是把连接符 - 去掉

1666508565463.png

sync

  • 实现子父组件的双向绑定，子组件同步修改父组件的值
  • 实际上就是一个语法糖

App.vue

 <Count :num.sync="num"/>

 data(){
   return { num:1 }
 },

Count.vue

 <h1>{{num}}</h1>
 <button @click="changeNum">修改num</button>

 props:{
   num:{ type:Number, default:1 }
 },
 
 methods:{
   changeNum(){
     this.$emit('update:num',5) // 修改父组件的值
   }
 }

1666510237902.png

sync修饰符的原理是什么？

  • 本质上就是通过绑定属性，以及监听 update:属性 事件实现
  • update：是 vue 约定好的名称部分
<Count :num="num" @update:num="(val)=> num = val"/>

<Count :num.sync="num"/>

<!-- 上面两种写法一致 -->
avatar
文章
阅读
粉丝