vue提供了一些修饰符方便用户操作，常见的有
.lazy
.number
.trim
……
1、修饰符 .lazy
对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了。
|
<input v-model.lazy="num1"/> |
2、修饰符 .number
有时候，拿到了数据需要进行数学运算， 为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型了。
|
<input v-model.number="num1"/> |
3、修饰符 .trim
trim 去掉前后的空白
|
<input v-model.trim="str"/> {{str.length}} |
一、事件修饰符
vue.js 还提供了各种事件修饰符来方便开发者使用
在事件处理程序中调用 或是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop ：阻止事件冒泡
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
|
.stop .prevent .capture .self .once |
事件修饰符里面有几个都是关于冒泡的，那么什么是冒泡呢? 简单的说就是 父元素里有 子元素， 如果点击了 子元素, 那么click 事件不仅会发生在子元素上，也会发生在其父元素上，依次不停地向父元素冒泡，直到document元素。
尝试点击下面的任意一个 div，就会观察到冒泡现象
|
<style type="text/css"> #grandFather{
} #father{ background-color: green; } #me{ background-color: blue; } #son{ background-color: yellow; } </style> <div id="box"> <div id="grandFather" @click="sel"> grandFather <div id="father" @click="sel"> father <div id="me" @click="sel"> me <div id="son" @click="sel"> son </div> </div> </div> </div> </div> <script type="text/javascript"> new Vue({ el:"#box", data:{ }, methods:{ sel(){ alert(event.currentTarget.id) } } }) </script> |
1、阻止冒泡 .stop
在me上的click后面加一个 .stop， 那么冒泡到了这里就结束了，就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">
2、优先触发 .capture
在father 上增加一个.capture
<div id="father" v-on:click.capture="doc">
那么当冒泡发生的时候，就会优先让father捕捉事件。
点击son或者me的时候，都会优先触发它
|
<div id="grandFather" @click="sel"> grandFather <div id="father" @click.capture="sel"> father <div id="me" @click="sel"> me <div id="son" @click="sel"> son </div> </div> </div> </div> |
3、只有自己能触发，子元素无法触发.self
修改father,增加 .self
<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。
|
<div id="grandFather" @click="sel"> grandFather <div id="father" @click.self="sel"> father <div id="me" @click="sel"> me <div id="son" @click="sel"> son </div> </div> </div> </div> |
4、只能提交一次 .once
修改father,增加 .once
<div id="father" v-on:click.once="doc">
这样father点击一次之后，就不会再监听到click了，但是有意思的是，grandFather还能监听到~
|
<div id="grandFather" @click="sel"> grandFather <div id="father" @click.once="sel"> father <div id="me" @click="sel"> me <div id="son" @click="sel"> son </div> </div> </div> </div> |
5、阻止提交 .prevent
通过在 click 后面添加 .prevent 可以阻止页面刷新。
|
@click.prevent="jump" |
也可以直接用@click.prevent后面不跟函数
|
@click.prevent |
注： 只有超链和form这种会导致页面刷新的操作，.prevent 才有用。 普通的不导致页面刷新的按钮，加上这个没有任何变化。
6、修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>