vue修饰符

表单修饰符

.lazy

在input表单输入时光标还在时，下面的值就已经出来了，但是有时我们希望输入完所有的东西时，光标离开时才更新视图。

<div>
    <input type="text" v-model.lazy="value" />
    <p>{{value}}</p>
</div>

这样只有在我们光标离开输入框的时候，它才会更新视图，相当于onchange事件触发触发更新。

.trim

在输入框输入时，需要过滤一下一些输入密码不小心多敲了一下空格的内容。

<input type="text" v-model.trim="value" />

注意： 只能过滤掉首尾之间的空格。

.number

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

如果先输入的是数字，那么它就会限制输入的只能是数字。

事件修饰符

.stop

由于事件冒泡的机制，给元素绑定点击事件的时候，会触发了父级的点击事件。相当于调用了event.stopPropagation。

<button @click.stop="aaa(1)">点击我</button>

##### .prevent 阻止事件的默认行为，例如，当提交表单按钮时阻止对表单的提交。相当于调用了`event.preventDefault()`方法。 ```vue

``` **注意：**修饰符可以同时使用多个，但是可能会因为顺序而有所不同。 `v-on:click.prevent.self`会阻止所有的点击，而`v-on:click.self.prevent`只会阻止对元素自身的点击。
##### .self 当事件是从事件绑定的元素本身触发时才触发回调。 ```vue

点击我

``` 当点击button时，不会触发事件aaa，只有点击div本身才会触发事件。
##### .once 绑定了事件之后只能触发一次。 ```vue 点我 ```
##### .capture 完整的事件机制是：捕获阶段 --> 目标阶段 --> 冒泡阶段。 默认是事件触发时是从目标开始往上冒泡。 加上`.capture`，就反过来了，事件触发从包含这个元素的顶层开始往下触发。 ```vue

obj1

obj2

obj3

obj4

// 1 2 4 3 ``` 从上面这个例子点击obj4时候，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3和obj4是默认的冒泡阶段触发，因此是4然后冒泡到3。
##### .passive 当在监听元素滚动事件时候，会一直触发onscroll事件，但是在移动端，网页会变卡，使用这个修饰符时，相当于给onscroll事件整了一个`.lazy`修饰符。 ```vue

```
##### .native 我们会经常写很多的小组件，有些小组件可能就会绑定一些事件，但是，像下面这样绑定事件是不会触发的。 ```vue ``` 必须使用.native来修饰这个click事件，可以理解成为该修饰符的作用就是把一个vue组件转换为一个普通的HTML标签。 **注意：** 使用`.native`修饰符来操作普通HTML标签是会令事件失效的。

### 鼠标按钮修饰符 `.left` 左键修饰符 `.right` 右键修饰符 `.middle` 中键修饰符 ```vue ```

### 键值修饰符 ##### .onkeyup
##### .onkeydown
##### .keyCode 如果不使用`keyCode`修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才会触发这个shout的时候，这个修饰符就有用了。 ```vue ``` 为了我们方便使用，一些常用的键的别名。 ```vue // 普通键 .enter .tab .delete 捕获删除和退格键 .space .esc .up .down .left .right

// 系统修饰键
.ctrl
.alt
.meta
.shift

可以通过全局`config.keyCodes`对象自定义按键修饰符别名：
```vue
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

键被分成普通常用的键和系统修饰键，是因为当我们写代码时，如果仅仅使用系统修饰键是无法触发keyup事件的。

<input type="text" @keyup.ctrl="shout(4)" />

需要将系统修饰键和其他键码链接起来使用，比如

<input type="text" @keyup.ctrl.67="shout(4)" />

这样当我们按下ctrl+c时，那就可以单独使用系统修饰符。
如果是鼠标事件，那就可以单独使用系统修饰符。

<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>

##### .exact

### v-bind 修饰符 ##### .sync
##### .prop