事件修饰符、按键修饰符、v-model修饰符

事件修饰符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<a v-on:click.stop="doThis">a>


<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>



<div v-on:click.self="doThat">...div>


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




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

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

按键修饰符

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

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

为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的名别：

• .enter
• .tab
• .delete（捕获‘删除’和‘退格’健）
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰键

• .ctrl
• .alt
• .shift
• .meta

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

例如：(注意keyup和click鼠标点击触发的区别）

<input @keyup.alt.67="clear">


<div @click.ctrl="doSomething">Do somethingdiv>

v-model修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步（除了上述输入法组合文字时）。你可以添加lazy修饰符，从而转变为使用change事件进行同步（也就是全部输入完了之后你按下enter健或者是其他触发事件时才会改变msg数据的值：

<input v-model.lazy="msg" >

.number

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

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

这通常很有用，因为即使在type="number"时，HTML输入元素的值也总会返回字符串。如果这个值无法被parseFloat()解析，则会返回原始的值。

.trim

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

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