Vue 修饰符

1.表单修饰符

.lazy光标离开触发

在我们输入完光标离开才更新视图,相当于在onchange事件触发更新。

<div id="app">
  <input type="text" v-model.lazy="message" />
  <div>{{message}}</div>
</div>

.trim 过滤首尾的空格

<div id="app">
  <input type="text" v-model.trim="message" />
  <div>{{message}}</div>
</div>

.number

如果你先输入数字，那它就会限制你输入的只能是数字。 如果你先输入字符串，那它就相当于没有加.number 而不是单一的限制输入数字或者输入的东西转换成数字

<div id="app">
  <input type="text" v-model.number="message" />
  <div>{{message}}</div>
</div>

 

2.事件修饰符

.stop 阻止事件冒泡

由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件; 一键阻止事件冒泡，相当于调用了event.stopPropagation()方法。

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

shout(e){
  console.log(e)
}
//1
//2

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

.prevent 阻止事件的默认行为

用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

.self 点击元素本身触发

只有点击不被子元素覆盖的区域才会触发.self

<div @click.self="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

.once 只触发一次

这个修饰符绑定的事件只会触发一次

<button @click.once="shout(1)">ok</button>

.capture 向下捕获方式触发

完整的事件机制是：捕获阶段--目标阶段--冒泡阶段。

默认的呢，是事件触发是从目标开始往上冒泡。 当加了这个.capture以后呢，就反过来了，事件触发从包含这个元素的顶层开始往下触发。

  <div @click.capture="shout(1)">
    obj1
    <div @click.capture="shout(2)">
      obj2
      <div @click="shout(3)">
        obj3
        <div @click="shout(4)">
          obj4
        </div>
      </div>
    </div>
  </div>
// 1 2 4 3

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3

.native 转化为原生事件

再调用组件时，给组件绑定事件是不会生效的。例如：<g-component @click="click()"></g-component>，这里的click事件是不会生效的，必须加上.native修饰符。

.passive 滚动事件延迟

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

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

 

3.鼠标按钮修饰符

.left 左键点击

.right 右键点击

.middle 中键点击

 

4.键值修饰符

<input type="text" @keyup="shout(4)">

.keyCode

上面的例子，我们按下键盘任意的键都会触发shout事件。所以为了监听键盘上对应键盘的事件，用上了.keyCode修饰符

为了方便使用，vue给一些常用的键提供了别名:

普通键：

.enter .tab .delete //(捕获“删除”和“退格”键) .space .esc .up .down .left .right

 

系统修饰键：

//待续