【VUE】常用修饰符

v-model 修饰符

.lazy

• 取代 input 监听 change 事件
  在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

• 输入字符串转为有效的数字
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

.trim

• 输入首尾空格过滤
  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id='other'>
        <input v-model.trim='trim'>
        <p ref='tr'>{{trim}}</p>
        <button @click='getStr'>获取</button>
</div>

<script>
new Vue({
    el:'#other',
    data:{
         trim:''
     },
     methods:{
          getStr(){
              console.log(this.$refs.tr.innerHTML)
          }
    }
})
</script>

v-on 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

修饰符：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 停止冒泡，阻止单击事件继续传播 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

注意：

• 使用串联修饰符时，顺序很重要，其效果按串联顺序产生：v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符进行键值检查，省去查找常用按键对应的 code值的麻烦：

// keyCode 对应enter
<input v-on:keyup.13="submit">

<input v-on:keyup.enter="submit">
// 缩写语法
<input @keyup.enter="submit">

全部的按键别名：

 .enter => // enter键
 .tab => // tab键
 .delete  => // 删除键
 .esc => // 取消键
 .space => // 空格键
 .up => // 上
 .down => // 下
 .left => // 左
 .right => // 右

系统修饰符

实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 .ctrl
 .alt
 .shift
 .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

注意：修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

按键与keyCode

按键	keyCode
0-9	48-57
a-z/A-Z	65-90
F1-F24	112-135
BackSpace（退格）	8
Tab	9
Enter(回车)	13
Caps_Lock(大写锁定)	20
Space（空格键）	32
Left(左箭头)	37
up(上箭头)	38
Right(右箭头)	39
Down(下箭头)	40