vue.js中的修饰符

1，表单输入框 input 中的修饰符：

.lazy  : 加 lazy 修饰符的区别相当于在输入失去焦点或者按了 enter 键后，视图才能更新。不加 lazy 则是在keyup就更新；例如：

<input v-model.lazy="msg"></input>
<h5>{{msg}}</h5>

.number   直接把输入的数值从字符串获取其他类型转为number类型，

<input v-model.number="msg"></input>
<h3>{{msg}}</h3>

.trim 自动过滤用户输入的首位空格

<input v-model.trim="msg"></input>

2，事件中的修饰符：

// 阻止事件冒泡，当点击box2的时候不会触发box1的点击事件，若不加则会触发
<div class="box1" @click="btn">
    <div class="box2" @click.stop="btn1"></div>
</div>
// 提交页面不在重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联使用
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符的情况
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式，即 元素在自身触发的事件先在此处理，然后交由内部元素处理；
<div v-on:click.capture="doThis"></div>
// 只有当 event.target 是当前元素自身时才触发处理函数
<div v-on:click.self="toThis"></div>

// 注意：使用修饰符的顺序很重要，相应的代码效果会以相应代码顺序产生；
// 比如：v-on:click.prevent.self 会阻止所有的点击；
// v-on:click.self.prevent 只会阻止对元素自身的点击；

2.1.4 新增修饰符：    .once    点击事件只会触发一次

<a v-on:click.once="clickMe"></a>

2.3 新增   .passive    这个修饰符会执行默认方法；思考：明明默认执行，为什么会设置这样一个修饰符；因为每次事件产生，浏览器都会去查询是否有 preventDefault 阻止该次事件的默认动作，我们加上passive,就是为了告诉浏览器，不用查询了，我们没用preventDeafult 阻止默认动作；       注：passive和prevent冲突，不能绑定在同一个监听器上；

<div v-on:scroll.passive="onScroll">...</div>

按键修饰符：

Vue 允许为 v-on 在监听键盘事件时添加按键时修饰符：

// 只有在 'key ' 是 'Enter' 时调用 submit方法
<input v-on:key.enter='submit'></input>

// 可以直接将keyboardEvent.key 暴露的任意有效按键名 转换为 kebab-case 来作为修饰符号；

// 以下示例中，处理函数只有在 'key' 等于 PageDown 时被调用
<input v-on:keyup.page-down="onPageDown"></input>

按键码：keyCode 的事件用法已经被废弃了，并可能不被新的浏览器所支持；使用keyCode特性也是允许的；

<input v-on:keyup.13="submit"></input>

为了支持旧浏览器，Vue.js中提供了常用按键码的别名：

.enter     .tab     .delete     .esc      .space     .up   .down     .left      .right

还可以通过全局的Vue.config.keyCodes 对象自定义按键修饰符别名；

Vue.config.keyCodes.f1 = 999

系统修饰符：可以使用如下修饰符来实现仅在按下相应按键时才会触发鼠标或键盘事件的监听器

.ctrl     .alt    .shift    .meta

.exact 修饰符 : 这个修饰符允许你控制由精确的系统修饰符组合触发的事件，就是说：当你给某个元素的事件监听器添加修饰符后，再添加   .exact  后，修饰符对应的按键被操作后，事件才会触发，多按或者少按都不会触发；

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

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

鼠标按键修饰符：

.left   .right   .middle

<input type="text" @click.left="doSomething">