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>
