Vue修饰符-前端开发

vue提供了一些修饰符方便用户操作，常见的有.lazy.number.trim……1、修饰符 .lazy对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。但是加上.lazy之后，相当于监听change操作，只有在失去焦点的...

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>