vue修饰符只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。如果你先输入数字，那

表单修饰符

.lazy

只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。

.trim

过滤首尾的空格（ps:首尾)，中间的是不会过滤的

.number

如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number

<input v-model.number.lazy.trim="testvalue" type="text">

事件修饰符

.sync

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，推荐以 update:myPropName 的模式触发事件取而代之。

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
// 简写
<text-document v-bind:title.sync="doc.title"></text-document>

用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用:

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

事件机制之捕获，冒泡

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件, 后触发子元素绑定的事件

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

addEventListener(event, listener, useCapture)　　

event---（事件名称，如click，不带on）
listener---事件监听函数
useCapture---是否采用事件捕获进行事件捕捉，
　　　　　　　　默认为false，即采用事件冒泡方式

<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js事件机制</title>
    <style>
        #parent{
            width: 200px;
            height:200px;
            text-align: center;
            line-height: 3;
            background: green;
        }
        #child{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background: orange;
        }
    </style>
    </head>
<body>
    <div id="parent">
        父元素
        <div id="child">
            子元素
        </div>
    </div>
    <script type="text/javascript">
        var parent = document.getElementById("parent");
        var child = document.getElementById("child");
    
        document.body.addEventListener("click",function(e){
            console.log("click-body");
        },false);
        
        parent.addEventListener("click",function(e){
            console.log("click-parent");
        },false);

        child.addEventListener("click",function(e){
            console.log("click-child");
        },false);

        document.body.addEventListener("click",function(e){
            console.log("click-body 事件捕获");
        },true);
        
        parent.addEventListener("click",function(e){
            console.log("click-parent 事件捕获");
        },true);

        child.addEventListener("click",function(e){
            console.log("click-child 事件捕获");
        },true);
    </script>
</body>
</html>

.stop

由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。一键阻止事件冒泡，相当于调用了event.stopPropagation()方法。

 <button @click.stop="click()">ok</button>

.prevent

用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。

.self

只当事件是从事件绑定的元素本身触发时才触发回调。

.once

这个修饰符的用法也是和名字一样简单粗暴，只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。

.capture

即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

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

.native

自定义组件中，使用.native绑定原声的事件。可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，注意：使用.native修饰符来操作普通HTML标签是会令事件失效的

// 自定义组件
<template>
  <button type="button" @click="clickHandler"><slot /></button>
</template>
export default {
  name: 'button',
  methods: {
    clickHandler () {
      this.$emit('vclick') // 触发 `vclick` 事件
    }
  }
}

// 引用组件
<vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>
import vButton from '@/components/Button'
export default {
  components: { vButton },
  methods: {
    clickHandler () {
      alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
    },
    vClickHandler () {
      alert('onvclick') // 触发 `vclick` 自定义事件
    }
  }
}

// 如果引用加上.native 则两个事件都能触发
<vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

按键修饰符

键盘事件

keydown：按下键盘键
keypress：紧接着keydown事件触发（只有按下字符键时触发）
keyup：释放键盘键

按键码

ASCII键值

<input type="text" @keyup.13="onEnter">
<input v-on:keyup.page-down="onPageDown">

vue 常用键值别名

enter
tab
delete (捕获“删除”和“退格”键)
esc
space
up
down
left
right

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

ctrl
alt
shift
meta // Mac meta 对应 command 键。Windows meta 对应 Windows 徽标键。

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact

允许你控制由精确的系统修饰符组合触发的事件。有且只有对应的键按下才会触发。

鼠标按钮修饰符

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

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

vue修饰符