vue 修饰符？

未来不完美，所以一直要努力

一、vue修饰符 — v-on修饰符

修饰符：

.stop: 阻止事件冒泡

• .stop- 调用 event.stopPropagation()。
  阻止事件冒泡：

<template>
  <div class="parent" @click="clickParent">
    我是父元素
    <div class="child" @click="clickChild">我是子元素</div>
  </div>
</template>

当点击子元素时，默认行为是先触发子元素点击事件，再触发父元素点击事件。显然，有时候这并不是我们所期待的。我们可使用event.stopPropagation()来阻止事件冒泡。
而在Vue里，则可以使用修饰符进行处理，需要给子组件点击事件添加修饰符，如下：

 <div class="child" @click.stop="clickChild">我是子元素</div>

---

.prevent: 阻止默认事件

• .prevent- 调用 event.preventDefault()。
  阻止默认事件：

<template>
  <form v-model="formData" @submit="submitForm">
    姓名
    <input type="text" v-model="name" />
    <br />
    <button>submit</button>
  </form>
</template>

当点击提交按钮时，默认行为是提交表单数据且刷新当前页面。而如果想要阻止默认事件则需要添加event.preventDefault()。
而在Vue里则可使用修饰符.prevent即可阻止默认事件，如：

  <form v-model="formData" @submit.prevent="submitForm">

---

.capture: 开启捕获模式

• .capture- 添加事件侦听器时使用 capture 模式。
  开启冒泡模式:

<template>
  <div class="parent" @click="clickParent">
    我是父元素
    <div class="child" @click="clickChild">我是子元素</div>
  </div>
</template>

有时我们仅仅是想点击父元素，却因为子元素层级比父元素相对高一些，所以会从子元素冒泡到父元素。但是，这并不是所期望的。在原生JS，开启方式为addEventListener(handleType, cllBack, useCapture),当useCapture为true时，则代表开启捕获模式。
而在Vue里，则可使用修饰符.capture即可，如下：

<template>
  <div class="parent" @click.capture="clickParent">
    我是父元素
    <div class="child" @click="clickChild">我是子元素</div>
  </div>
</template>

---

.self: 仅当点击自身才会触发回调

• .self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。

<template>
  <div class="parent" @click="clickParent">
    我是父元素
    <div class="child" @click="clickChild">我是子元素</div>
  </div>
</template>

正常点击父元素时，有可能是点击了子元素冒泡到父元素；有可能是开启了捕获模式从而后触发子元素事件。但两者均非所期待，为什么点击一个元素会触发两个标签绑定的事件？
在Vue里，可以使用.self来进行限制，如下：

<template>
  <div class="parent" @click.self="clickParent">
    我是父元素
    <div class="child" @click.stop="clickChild">我是子元素</div>
  </div>
</template>

如此，就可仅触发期望的事件。

---

• .native- 监听组件根元素的原生事件。

// TODO：

---

.once: 只触发一次回调

• .once- 只触发一次回调。

<template>
  <button @click="clickHandle">只有第一次点击会有效果</button>
</template>

上述为正常情况下的事件绑定。有时只希望按钮第一次点击可以生效，后续在点击不希望生效。
在Vue中，可以使用.once，修改如下：

<button @click.once="clickHandle">只有第一次点击会有效果</button>

---

.{keyCode | keyAlias}: 监听特定键从而引发回调

• .{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。

<template>
  <input type="text" @keyup="inputHandle" />
</template>

这是正常情况下的输入事件，可以在inputHandle回调事件的第一个默认参数里获取到keykeyCode、code、key等一些列参数。
如果想监听指定键的事件，在Vue里可以直接使用上述参数里的key进行操作。如下监听A键的按下的事件：

<template>
  <input type="text" @keydown.65="inputHandle" />
</template>

仅在按下字母A键的时候，才会执行该回调

---

特殊键盘按键监听

Vue官方提供的按键修饰符：

• .enter // 回车键抬起
• .tab // tab切换键抬起
• .delete (捕获“删除”和“退格”键)
• .esc //退出键抬起
• .space // 空格键抬起
• .up // 上
• .down // 下
• .left // 左
• .right // 右
• .对应键盘码 // 使用键盘码是要注意如果不是以上对应的键盘修饰符，需要创建按键修饰符

<template>
// 回车键监听
  <input type="text" @keydown.enter="inputHandle" /> 
  // tab键监听
  <input type="text" @keydown.tab="inputHandle" />
  // 删除键监听
  <input type="text" @keydown.delete="inputHandle" />
  // esc键监听
  <input type="text" @keydown.esc="inputHandle" />
  // space空格键监听
  <input type="text" @keydown.space="inputHandle" />
  // 上键监听
  <input type="text" @keydown.up="inputHandle" />
  // 下键监听
  <input type="text" @keydown.down="inputHandle" />
  // 左键监听
  <input type="text" @keydown.left="inputHandle" />
  // 右键监听
  <input type="text" @keydown.right="inputHandle" />
</template>

如果想要监听组合件，可直接连缀。如监听 shfit + enter 组合键:

<template>
  <input type="text" @keydown.shift.enter="inputHandle" />
</template>

---

二、vue修饰符 — v-mode修饰符

• .lazy- 取代 input 监听 change 事件
• .number- 输入字符串转为有效的数字
• .trim- 输入首尾空格过滤

.lazy示例：

<template>
  <input type="text" v-model.lazy="lazyValue" />
</template>

这种情况，在你输入的过程中并不会实时将数据同步至data里，.lazy会在你的输入框失焦时再进行同步数据的操作

---

.lazy示例：

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

这种情况下，input的type属性限制只能输入number值，但是将其同步至data中时，默认转换为字符串。而.number的作用就是将其同步至data中时依旧保持为number格式

---

.trim示例：

<template>
  <input type="text" v-model.trim="lazyValue" />
</template>

这种情况下，无论在输入内容的最开始和最后加多少个空格，Vue将其同步至data中时会去掉首尾的所有空格