vue 13种常见修饰符

13种vue常见修饰符

• 功能性修饰
• 表单修饰符
• 事件修饰符
• 鼠标按键修饰符
• 键值修饰符

功能性修饰

• .sync
• 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)
• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
• 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

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

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

表单修饰符

• .lazy 相当于防抖或onchange
• .trim去除首尾空格
• .number转成数字

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

<input type="text" v-model.trim="value">
//如果你先输入数字，那它就会限制你输入的只能是数字
//如果你先输入字符串，那它就相当于没有加.number
//1234adc-->1234
//abc1234-->abc1234
<input type="text" v-model.number="value">

事件修饰符

• 完整的事件机制是：捕获阶段--目标阶段--冒泡阶段
• 默认是事件触发是目标阶段--冒泡阶段
• 捕获阶段 (从根节点开始顺着目标节点构建一条事件路径，即事件由页面元素接收，逐级向下，到具体的元素)
• 目标阶段 (到达目标节点，即元素本身)
• 冒泡阶段 (从目标节点顺着捕获阶段构建的路径回去， 即跟捕获相反具体元素本身，逐级向上，到页面元素)
• stopPropagation阻止冒泡
• stopImmediatePropagation立即阻止冒泡，相当于捕获阶段组织
• .stop 阻止事件冒泡,event.stopPropagation()
• .prevent阻止事件默认行为,event.preventDefalut()
• .self只当事件是从事件绑定的元素本身触发时才触发回调。
• .capture 捕获阶段--目标阶段
• .once执行一次
• .native自定义组件使用原生事件
• .passive相当于给onscroll事件整了一个.lazy修饰符；因为监听元素滚动事件，移动端会卡

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

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

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

<My-component @click="shout(3)"></My-component>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

鼠标按钮修饰符

• .left 左键点击
• .right 右键点击
• .middle 中键点击

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

键值修饰符

• .keyCode如果不用keyCode修饰符，那我们每次按下键盘都会触发shout

<input type="text" @keyup.keyCode="shout(4)">
<input type="text" @keyup.ctrl="shout(4)">
<input type="text" @keyup.ctrl.67="shout(4)">
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift

• exact 限制系统修饰键
• 像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

<button type="text" @click.ctrl.exact="shout(4)">ok</button>