Vue事件修饰符

v-model修饰符

lazy

v-model.lazy='value'

作用：输入时输入框的绑定的值不会改变，失去焦点时才会改变绑定的值

trim

v-model.trim='value'

作用：去除双向绑定值前后的空格

number

v-model.number='value'

作用：自动将输入的值转为number类型

1. 如果先输入数字，只取前面数字部分
2. 先输入字母，number修饰服无效

事件修饰符

stop

@click.stop='clickEvent'

作用：阻止事件冒泡;如果点击一个元素会触发父元素的事件，给子元素添加可阻止触发父元素事件

capture

@click.capture='clickEvent'

作用：由外向内捕获事件;一般先触发子元素事件，再触发父元素事件，加了capture就反了过来。

self

@click.self='clickEvent'

作用：self修饰符作用是，只有点击事件绑定的本身才会触发事件；和阻止冒泡在触发上貌似没啥区别

once

@click.once='clickEvent'

作用：事件只会执行一次

prevent

@click.prevent='clickEvent'

作用：阻止默认事件(例如a标签的跳转和地址栏加/)

native

@click.native="clickEvent"

作用：加在自定义组件的事件上，保证事件能够执行

passive

@scroll.passive="onScroll"

作用：监听滚动事件时，会一直触发onScroll事件，如果是在移动端，网页会变得很卡。加了pass

camel

绑定一些带有驼峰命名的属性名时，可用此正常解析，而不会被解析成全小写

sync

• 父组件传值进子组件时，子组件向要改变这个值时可以这么写:

  <children :foo="bar" @update:foo="val=>bar=val;"></children>
  

• 子组件里

  this.$emit('update:foo',newValue)
  

这种方式可以通过Sync方式进行简写

• 父组件

  <children :foo.sync="bar"></children>
  

• 子组件里

  this.$emit('update:foo',newValue)
  

事件按键修饰符

left,right,middle

@click.middle="clickEnvent"

作用：点击鼠标左右中键时才会触发事件

ive会在滚动停止时触发事件

keyCode

每个按键能触发事件

<input type="text" @keyup="shout(4)">

要限制成某个按键触发怎么办呢？

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