Vue——你可能会遇到的修饰符

Vue中的修饰符以及代码演示

修饰符是以.指明的特殊后缀，若在事件中指明，例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()方法阻止事件的默认行为。

修饰符的类型

修饰符有：
一、事件修饰符
	1.  .stop阻止单击事件冒泡
	2.  .prevent阻止事件默认行为
	3.  .capture在事件点击时默认以捕获的形式触发
	4.  .self只有在元素本身触发时触发回调
	5.  .once只触发一次
	6.  .key触发事件的按键
	7. .passive不阻止事件的默认行为
二、v-model修饰符
	1.  .lazy 在输入框中，默认是在input事件中同步输入框的数据，使用 lazy修饰符会转变为在change事件中同步（失去焦点或按回车才更新）。
	2.  .number,将输入转换为Number类型，默认是String类型
	3.  .trim自动过滤输入框中的空格

一、事件修饰符

stop:
阻止单击事件冒泡

当父元素中有一个点击事件，子元素也有一个点击事件的时候，
点击子元素，子元素的方法执行后，父元素的方法也会执行，
从内到外，这就是时事件冒泡，
但若在子元素事件后面加上.stop后缀时，
点击子元素，父元素的点击事件就不会被触发，
这样就可以避免不必要的事件执行影响开发本来的意义。

prevent：
阻止事件默认行为

若a标签中加入click事件，并.prevent 例如：
@click.prevent = "SomeEvent"，
则会执行该方法，并且不会跳转href中的链接

capture:
在事件点击时默认以捕获的形式触发

正常父子元素都有点击事件的时候，
点击子元素默认会以冒泡的形式触发，
即先执行子元素的事件，再执行父元素的事件。
而加上了.capture修饰符后，改为捕获形式，
即先执行父元素的事件再执行子元素的事件。

.self：
只有触发方式作用在自己身上的时候才会触发

正常父子元素的点击事件，
默认情况下点击子元素会默认以冒泡的形式触发父元素的事件，
而我们可以在父元素的点击事件上加上修饰符.self，
即只有真正的点击父元素的时候，
才会触发父元素的点击事件，
冒泡对它不再产生影响。

.once：
事件只触发一次

在我们定义点击事件的时候，
我们点击一次就可以触发一次，
加上.once修饰符后，
我们只能触发这个事件一次，
之后的点击都不会再次触发该事件，
刷新页面之后重新走生命周期，
也是只可以调用一次。
其他的修饰符只能对DOM原生的事件起作用，
once还能用到自定义的组件事件上。

.key：
触发事件的按键

在有关input框内容输入时，
我们可以根据接下来用户点击哪个按键，
进行哪种相应的操作，
可以是@keydown.enter="EventName"
也可以是@keyup.81="EventName"来进行相应的操作。
可以操作的按键：
.enter .delete .tab .space .esc .up .down .left .right

.passive:
不阻止事件的默认行为

不能与.prevent同时使用，使用.passive就相当于提前通知浏览器，一定不会阻止默认行为，可以提前通知浏览器，提高性能。

二、v-model修饰符

.lazy
不会立刻触发v-model，点击enter后才会更新。

当我们使用v-model绑定某个数据的时候，
在input框中内容变化时，
绑定的数据也会随之变化，
增加.lazy后，是需要一个enter的触发才会更新。

.number
将input框中的内容自动转换成Number类型。

正常情况下，我们在输入框中若没有指明什么类型的输入框，
那么输入框中的值会转换成string类型，
当我们加上了number修饰符后，
所有输入的内容会转换成number类型，
如果出现字母、符号等情况v-model会保留从初始的数字开始，
到其他非number类型之前的这一段数字值。

.trim
去除输入框中字符串前面和后面的空格，去掉的是两端的空格，中间不会受到影响。

当一个输入框中无论前后输入多少个空格，
使用.trim修饰符后，
首端和尾端的空格都会被去除掉。

代码示例：

<template>
  <div class="default">
    <!-- 默认行为 -->
    <a @click.stop="Log" href="//www.baidu.com">阻止事件默认行为</a>
    <!-- 冒泡 -->
    <div @click="log2" class="parent">
      <div @click.stop="log1" class="son"></div>
    </div>
    <!-- 捕获 -->
    <div class="capFather" @click.capture="capLogparent">
      <div @click.capture="capLogson" class="capSon"></div>
    </div>
    <!-- self -->
    <div class="seltParent" @click.self="selfLogParent">
      <div class="selfSon" @click="selfLogSon"></div>
    </div>
    <!-- once -->
    <div class="once" @click.once="onceEvent">
    </div>
    <!-- key -->
    <label for="keyExam">key:</label>
    <input id="keyExam" name="keyExam" @keydown="getKeyCode" @keyup.enter="showContent" type="text"><br/>
    <!-- lazy -->
    <label for="lazyExam">lazyExam:</label>
    <input id="lazyExam" name="lazyExam" type="text" v-model.lazy="text">
    <span>{{text}}</span><br/>
    <!-- number -->
    <label for="numExam">numExam：</label>
    <input @keyup="logNum" v-model.number="numText" id="numExam" name="numExam" type="text">
    <span>{{typeof(numText)}}</span><br/>
    <!-- trim -->
    <label for="trimExam">trimExam：</label>
    <input id="trimExam" name="trimExam" v-model.trim.lazy="trimContent" type="text" @keyup="logTrim">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        text:'',
        numText:null,
        trimContent:'',
      }
    },
    methods: {
      Log() {
        console.log("打印结果，不跳转页面")
      },
      log1() {
        console.log("子元素被点击")
      },
      log2() {
        console.log("父元素被点击")
      },
      capLogson() {
        console.log("子元素被触发")
      },
      capLogparent() {
        console.log("父元素被触发")
      },
      selfLogSon() {
        console.log("自己-子元素被触发")
      },
      selfLogParent() {
        console.log("自己-父元素被触发")
      },
      onceEvent() {
        console.log("该事件只执行一次")
      },
      getKeyCode(e) {
        //获取不同键的keycode值
        console.log(e.keyCode)
      },
      showContent(){
        console.log("输入enter内容后抬起键盘输出我的内容")
      },
      logNum(){
        console.log("键盘抬起，输出转换成Number后的内容",this.numText)
      },
      logTrim(){
        console.log("去掉空格之后的内容",this.trimContent)
      }
    },
  }
</script>
<style scoped>
  .parent {
    width: 400px;
    height: 400px;
    background-color: green;
  }

  .son {
    width: 200px;
    height: 200px;
    background-color: red;
  }

  .capFather {
    width: 200px;
    height: 200px;
    background-color: green;
  }

  .capSon {
    width: 100px;
    height: 100px;
    background-color: orange;
  }

  .seltParent {
    width: 100px;
    height: 100px;
    background-color: blue;
  }

  .selfSon {
    width: 50px;
    height: 50px;
    background-color: pink;
  }

  .once {
    width: 50px;
    height: 50px;
    background-color: purple;
  }

  .key {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

修饰符使用

修饰符使用的顺序十分重要，例如Vue.js官网的示例

使用修饰符时，顺序很重要；
相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。即我们要按下系统修饰键，同时触发按键修饰符才会执行相应的功能

修饰键有：
.ctrl 
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

实例：
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
表示我们要同时按下Alt和C才能触发clear功能。

.exact修饰符

当我们使用
<button v-on:click.ctrl="onClick">A</button>
此时，按下ctrl和alt时该事件也会被触发
如果想精确的只有按下ctrl自己时才会触发，我们就需要对修饰符进行限制
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
这种情况下，则是我们只有单独按下ctrl键才会被触发。

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

鼠标按钮修饰符

.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。