v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 缩写 – （动态赋值）

v-on 缩写 – （常用事件绑定，例如：click）

1 事件修饰符

事件修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.stop

阻止冒泡

当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面 而.stop就是阻止冒泡使用的

.prevent

阻止默认事件

在form表单提交时候或者在点击a标签的时候, 会阻止提交或跳转

.self

只当事件在该元素本身（比如不是子元素）触发时触发回调

这个修饰符跟.stop目的差不多, .stop 是阻止点击到自己身上的点击事件冒泡到其它标签上 .self 是除非你直接点击到我标签本身, 不接受其它标签上面的点击事件冒泡到我身上的事件

.once

事件只触发一次

绑定后只会触发一次

下面为代码演示, 主要功能就是有一个遮罩层,

.keyup

.native

将组件看待成一个html标签；

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

.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

处理函数只会在 $event.key 等于 PageDown 时被调用。

代码

2 v-model 修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

.number

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

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

.trim

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