常见的修饰符

事件修饰符

.stop 相当于 event.stopPropagation()，用来阻止冒泡。

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>

//只输出1

.prevent 相当于 envet.preventDefault()，用来阻止默认事件。

<form v-on:submit.prevent="onSubmit"></form>

.native 监听组件根元素的原生事件。

<my-component v-on:click.native="doSomething"></my-component>

.once 只触发一次。

<button @click.once="shout(1)">ok</button>

表单修饰符

表单的时候用得最多的是input标签

指令用得最多的是v-model

表单的修饰符有

lazy     光标离开标签的时候，才会将值赋予给value

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

trim         自动过滤用户输入的首空格字符，而中间的空格不会过滤

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

 number     自动将用户的输入值转为数值类型

<input v-model.number="num" type="number">

v-bind 修饰符

async   能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);

简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}