v-on 以及v-model的修饰符

最近在使用vue，那么就来总结一下vue其中这两个指令的修饰符

一. v-on

1.stop

阻止单击事件继续传播

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

2.prevent

提交事件不再重载页面

v-on:submit.prevent="onSubmit">>

修饰符可以串联

v-on:click.stop.prevent="doThat">>

3.capture

添加事件监听器时使用事件捕获模式，

即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

v-on:click.capture="doThis">...>

4.self

只当在 event.target 是当前元素自身时触发处理函数

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

5.once

点击事件将只会触发一次

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

6.passive

事件的默认行为将会立即触发

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

　　还有需要注意的是使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
　　不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

 

 

二. v-model

v-model 的修饰符，一般用于控制数据同步的时机

1、.trim 自动过滤输入内容最开始 和 最后的 空格，中间的会保留一个空格，多的会被过滤掉

2、.lazy 一般情况下，在input的 v-model是一直在同步 输入的内容与显示的内容，不过再添加上 .lazy后，就会变成：在失去焦点或按回车时才更新数据

3、.number 自动将输入的数据转成 number类型，（ 不设置.number的情况下即使输入的是数字也会被当成字符串处理 ）