vue常用的修饰符有哪些

时间：2024-11-03 09:43:48

1、修饰符是什么

在Vue 中，修饰符处理了许多 DOM 事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

vue中修饰符分为以下五种

汇总 修饰符 说明
表单 lazy 光标离开标签的时候，才会将值赋予给value
trim 自动过滤用户输入的首空格字符，而中间的空格不是过滤
number 自动将用户的输入值转为数值类型，但如果这个值无法被paresFloat解析，则会返回原来的值。

事件

stop

 阻止了事件冒泡，相当于调用了|event.stopPropagation 方法

prevent

 阻止了事件的默认行为，相当于调用了 event.preventDefault方法

self

 只当在event.target是当前元素自身时触发处理函数

once

 绑定了事件以后只能触发一次，第二次就不会触发

capture

 使事件触发从包含这个元素的顶层开始往下触发

passive

 在移动端，当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll:事件整了一个!lazy 修饰符

native

 让组件变成像 html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件

鼠标按键

·left 左键点击

·right

middle

键盘

普通键

 如enter、tab、delete、space、esc、up...

系统修饰键

 如ctrl、alt、meta、shift..

v-bind

sync

 能对 props 进行一个双向绑定

props

 设置自定义标签属性，避免暴露数据，防止污染HTML结构
camel 将命名变为驼峰命名法

2、表单修饰符

在我们填写表单的时候用得最多的是 input 标签，指令用得最多的是:v-model关于表单的修饰符有如下:lazy、trim、number

2.1 lazy

在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

<template>
  <div id="app">
    <input type="text" v-model.lazy="value" @input="handleInput" @blur="handleBlur" @change="handleChange" />
    <p>值：{{ value }}</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleInput(event) {
      console.log('input',event.target.value, this.value)
    },
    handleChange(event) {
      console.log('change',event.target.value, this.value)
    },
    handleBlur() {
      console.log('blur', this.value)
    }
  }
}
</script>

2.2 trim

自动过滤用户输入的首空格字符，而中间的空格不是过滤

<template>
  <div id="app">
    <input type="text" v-model.trim="value" @input="handleInput" @blur="handleBlur" @change="handleChange" />
    <p>值：{{ value }}</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleInput(event) {
      console.log('input',event.target.value, this.value)
    },
    handleChange(event) {
      console.log('change',event.target.value, this.value)
    },
    handleBlur() {
      console.log('blur', this.value)
    }
  }
}
</script>

2.3 number

自动将用户的输入值转为数值类型，但如果这个值无法被paresFloat解析，则会返回原来的值。

    <input type="number" v-model.number="value" />

3、事件修饰符

事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符:

3.1 stop

阻止了事件冒泡，相当于调用了event.stopPropagation 方法

<template>
  <div id="app">
    <div @click="handleStop(2)">
      <button @click.stop="handleStop(1)">按钮1</button>
    </div>
    <div @click="handleStop2(2)">
      <button @click="handleStop2(1)">按钮2</button>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleStop(num) {
      console.log('按钮1',num)
    },
    handleStop2(num) {
      console.log('按钮2',num)
    }
  }
}
</script>

3.2 prevent

阻止了事件的默认行为，相当于调用了 event.preventDefault方法

<template>
  <div id="app">
    <a href="https://example.com" @click.prevent="handleLink" id="myLink">点击我1</a>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleLink() {
      console.log('哈哈哈，没有跳转喔')
    },
  }
}
</script>

3.3 self

只当在event.target是当前元素自身时触发处理函数

<template>
  <div id="app">
    <div v-on:click.self="handleFun">啊哈哈哈</div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleFun() {
      console.log('哈哈哈，没有跳转喔')
    },
  }
}
</script>

3.4 once

绑定了事件以后只能触发一次，第二次就不会触发

 <div v-on:click.once="handleFun">啊哈哈哈</div>

3.5 capture

使事件触发从包含这个元素的顶层开始往下触发

<template>
  <div id="app">
    <div id="content">
      <div id="obj1" v-on:click.capture="handleFun">
        obj1
        <div id="obj2" v-on:click.capture="handleFun">
          obj2
          <div id="obj3" v-on:click="handleFun">
            obj3
            <div id="obj4" v-on:click="handleFun">
              obj4
              <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
              由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
              -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleFun(event) {
      console.log(event.currentTarget.id)
    },
  }
}
</script>

3.6 passive

在移动端，当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个.lazy 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把.passive;和.prevent;一起使用,因为.prevent;将会被忽略，同时浏览器可能会向你展示一个警告。.passive会告诉浏览器你不想阻止事件的默认行为

3.7 native

默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

注意：vue 3.x版本以上v-on 的 .native 修饰符已被移除。同时，新增的 emits 选项允许子组件定义真正会被触发的事件

4、鼠标按键修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下:

·left 左键点击

·right 右键点击

middle 中键点击

<template>
  <div id="app">
    <div v-on:click.left="handleLeft">left 左键点击</div>
    <div v-on:click.right="handleRight">right 右键点击</div>
    <div v-on:click.middle="handleMiddle">middle 中键点击</div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
   return {
    value: undefined
   }
  },
  methods: {
    handleLeft() {
      console.log('left 左键点击')
    },
    handleRight() {
      console.log('right 右键点击')
    },
    handleMiddle() {
      console.log('middle 中键点击')
    },
  }
}
</script>

5、键盘修饰符

键盘修饰符是用来修饰键盘事件(onkeyup;onkeydown)的，有如下:keyCode 存在很多，但vue 为我们提供了别名，分为以下两种:

普通键(enter、tab、delete、space、esc、up...)

系统修饰键(ctrl、alt、meta、shift...)

如

<div id="app">
    <!-- 只有按键为keyCode的时候才触发 -->
    <input type="text" @keyup.keyCode="handleCode"/>
    <!-- Enter键 -->
    <input type="text" @keyup.enter="handleEnter"/>
  </div>

6、v-bind修饰符

v-bind修饰符主要是为属性进行操作，用来分别有如下：sync、props、camel

6.1 sync

能对 props 进行一个双向绑定

  <!-- 父组件 -->
  <comp :myMessage.sync="bar"></comp>
  // 子组件
  this.$emit('update:myMessage',params);

使用 sync 需要注意以下两点:
使用 sync 的时候，子组件传递的事件名格式必须为 update:value，其中 value 必须与子组件中:props中声明的名称完全一致。
注意带有.sync修饰符的v-bind不能和表达式一起使用将 v-bind.sync用在一个字面量的对象上，例如v-bind.sync="{ title: doc.title}"是无法正常工作的了。

6.2 props

设置自定义标签属性，避免暴露数据，防止污染HTML结构

 <input id="uid" title="title1" value="1" :index.prop="index"/>

6.3 camel

将命名变为驼峰命名法，如将 view-Box属性名转换为viewBox

<svg :viewBox="viewBox'></svg>

相关文章