vue修饰符

表单修饰符：

1、lazy：懒加载

      <input type="text" v-model="projectName" />
      {{ projectName }}

　　此时输入框执行的事件是input事件，实时同步（双向绑定）

      <input type="text" v-model.lazy="projectName" />
      {{ projectName }}

　　此时输入框执行的事件是change事件，当光标离开input框后触发（解除双向绑定）

 

　　注意：.lazy对elementUI的el-input不起作用，vant的van-field也不起作用

 

2、trim：去除首尾空格

      <el-input v-model.trim="projectName">

　　

3、number：将输入的字符转为数字，就是输入0-9时会自动转为数字，在el-input中会禁止输入数字外的其他字符，但是如果第一个输入的字符不是字符型数字，那么相当于没加 .number，所以这是个垃圾

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

　　如果想禁止输入数字外其他字符：限制input框只能输入数字

 

注意：这3个修饰符可以一起用，但是要注意lazy在el-input中不起作用

      <input type="text" v-model.lazy.trim.number="projectName"/>

 

事件修饰符：

1、stop：阻止事件冒泡

      <button @click.stop="handleClick"></button>

 

2、prevent：阻止默认事件

      <div style="width:50px;height:50px;background:red;" @click="click1">
        <div style="width:30px;height:40px;background:blue;" @click.prevent="click2">
          <a href="https://www.baidu.com/" target="_blank" @click="aClick">百度</a>
        </div>
      </div>

　　此时阻止了a连接的跳转，.prevent加给a标签或者两个div都可以阻止。

　　注意：修饰符可以使用多个，@click.prevent.self会阻止所有的点击，@click.self.prevent只会阻止自己的点击

 

3、self：不受冒泡影响，加了 .self后只有点击自己才会触发

      <div style="width:50px;height:50px;background:red;" @click.self="click1">
        <div style="width:30px;height:40px;background:blue;" @click="click2">
          <a href="https://www.baidu.com/" target="_blank" @click="aClick">百度</a>
        </div>
      </div>

 

4、once：只触发一次，第二次点击无效

      <div style="width:50px;height:50px;background:red;" @click.once="click1">
        <div style="width:30px;height:40px;background:blue;" @click.once="click2">
          <a href="https://www.baidu.com/" target="_blank" @click.once="aClick">百度</a>
        </div>
      </div>

 

5、capture：正常的事件机制是捕获-目标-冒泡，而加了capture修饰符后，在捕获阶段就会触发事件

      <div style="width:50px;height:50px;background:red;" @click="click1">
        <div style="width:30px;height:30px;background:blue;" @click.capture="click2">
          <div style="width:10px;height:10px;background:yellow;" @click="click3"></div>
        </div>
      </div>

　　谁加了 .capture，谁就从事件机制中抽出来最先执行，剩下的按照事件机制顺序执行

　　如果都加了 .capture，就按照事件机制相反的顺序执行

　　如果是加了一部分，未加一部分，加了 .capture的抽出来按照事件机制相反顺序先执行，剩下的按照以此按照事件机制执行

 

6、native：给组件绑定事件，将组件转化成普通的html标签

      <aaa @click.native="click4"></aaa>

　　注意：不能用 .native修饰html标签

　

鼠标按钮修饰符：

1、left：左键

2、middle：中键　　只有按下中键才会触发

3、right：右键

      <div style="width:50px;height:50px;background:red;" @click.middle="click1">
        <div style="width:30px;height:30px;background:blue;" @click="click2">
          <div style="width:10px;height:10px;background:yellow;" @click="click3"></div>
        </div>
      </div>

 

键盘修饰符：

按下任意键，抬起时都会触发keyup事件：

      <input type="text" @keyup="keyup(100)">

普通键：

　　.enter

　　.tab

　　.delete（delete键和back键）

　　.space

　　.esc

　　.up

　　.down

　　.left

　　.right

系统修饰键：

　　.ctrl

　　.shift

　　.alt

　　.meta

 

使用普通键时：也可以写成@keyup.13='hendleKeyup'

      <input type="text" @keyup.enter="keyup(100)">

使用系统修饰键时：需要和其他键码（可以写enter也可以写13）连接起来一起使用才有效

      <input type="text" @keyup.meta.enter="keyup(100)">

自定义键值修饰符：main.js中：

  Vue.config.keyCodes = {
    f1: 112,
    f2: 113,
    f4: 114
  }

 

exact修饰符：

用来限制系统修饰符（ctrl、shift、alt、meta）：

      <!-- 只要按下ctrl键点击时就会触发 -->
      <div @click.ctrl="click1"></div>      
      <!-- 按下ctrl键点击时触发，同时按下其他系统修饰符（shift、alt、meta）则不会触发 -->
      <div @click.ctrl.exact="click1"></div>
      <!-- 没有任何系统修饰符按下时点击触发 -->
      <div @click.exact="click1"></div>

注意：

　　1、@click.exact：事件只要带了exact修饰符，按下系统修饰符就不执行

　　2、@click.exact.ctrl：事件带了exact修饰符，但是加上ctrl修饰符，此时必须要按下ctrl修饰符并且不能按下其他系统修饰符才能执行

　　3、@click.exact.ctrl.shift：事件带了exact修饰符，但是加上ctrl和shift修饰符，此时必须同时按下ctrl和shift修饰符并且不能按下其他系统修饰符才能执行

　　4、以上三种情况中，不管按不按下普通键都可以执行

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.lazy----<input type="text" v-model.lazy="value">----在光标离开后input框才会更新数据
.trim----<input type="text" v-model.trim="value">----输入框过滤首尾的空格
.number----<input type="text" v-model.number="value">----加了number修饰符后，如果先输入的是数字，表示这个输入框只能输入数字，如果先输入了字符串，等于这个输入框没有加number修饰符，所以这个修饰符就是个垃圾，还是得用正则判断

事件修饰符：
.stop----<button @click.stop="test"></button>----阻止事件冒泡
.prevent----<a @click.prevent="test"></a>----组件浏览器默认事件
.self----<div @click.self="test"></div>----只有点击到元素本身才会触发----bug：@click.self阻止了自身的点击，必须要点击到padding区域才行
.once----<div @click.once="test"></div>----只有第一次点击有效
.capture----<div @click.capture="test(1)"> <button @click="test(2)">test</button></div>----先1后2----事件机制是捕获-目标-冒泡，capture是倒过来
.passive----<div v-on:scroll.passive="onScroll">...</div>----滚动事件会立即触发，每次滚动都有一个默认事件触发，加了passive就是告诉浏览器，不需要查询，不需要触发这个默认事件
.native----<My-component @click.native="test"></My-component>----给组件绑定原生事件，给vue组件绑定事件的时候，必须加上 .native ，否则会认为监听的是来自子组件自定义的事件，等同于在子组件内部处理click事件后向外发送click事件（$emit()）
.left .right .middle----<button @click.right="test">test</button>----鼠标点击的时候触发

按键修饰符：.enter .esc .left .right .up .dowm .tab .delete .scape----<input type="text" @keyup.enter="test">
.keyCode----<input type="text" @keyCode(13)="test">