vue修饰符（表单、事件、鼠标、按键等）

为了方便大家写代码， vue提供来许多修饰符，大致分为

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

// 表单修饰符
.lazy - 我们输入完所有东西，光标离开才更新视图
.trim - 过滤首尾空格
.number - 自动将用户的输入值转为数值类型，如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number

// 事件修饰符 （尽管我们可以在方法中轻松实现相关处理，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。）
.stop - 调用 event.stopPropagation(), 阻止事件冒泡(不触发父级事件)。
.prevent - 调用 event.preventDefault(), 阻止默认行为，比如点击链接会进行跳转；填写表单时按回车会自动提交到服务器；点击鼠标右键会呼出浏览器右键菜单。
.capture - 添加事件侦听器时使用 capture 模式。事件触发从包含这个元素的顶层开始往下触发，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。完整的事件机制是：捕获阶段--目标阶段--冒泡阶段
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。把一个vue组件转化为一个普通的HTML标签。
.once - 只触发一次回调。
.passive - { passive: true } 模式添加侦听器。当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

// 鼠标按键修饰符
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。

// 键值修饰符
.keyCode - 只当事件是从特定键触发时才触发回调。
.exact - 只需要或者只能按一个系统修饰键来触发。

// 其他修饰符
.sync - 父子组件进行双向数据绑定，会扩展成一个更新父组件绑定值的 v-on 侦听器。
.camel - HTML 特性是不区分大小写的，该修饰符使属性被渲染为驼峰名
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)

部分示例

<input type="text" @keyup.enter="shout(4)">
//普通键 .enter .tab .delete .space .esc .up .down .left .right
//系统修饰键 .ctrl .alt .meta .shift
//可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112

<input type="text" @keyup.ctrl.67="shout(4)"> // 同时按下ctrl+c时，触发keyup事件
<button type="text" @click.ctrl.exact="shout(4)">ok</button> // 可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发
<input type="text" @keydown.enter.exact="shout('我被触发了')"> // 可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发
<button v-on:click.ctrl="onClick">A</button>  // 即使 Alt 或 Shift 被一同按下时也会触发
<button v-on:click.ctrl.exact="onCtrlClick">A</button> // 有且只有 Ctrl 被按下的时候才触发
<button v-on:click.exact="onClick">A</button>  // 没有任何系统修饰符被按下的时候才触发

注意事项

• 修饰符可以同时使用多个,但是可能会因为顺序而有所不同。用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。也就是从左往右判断~
• property 和 attribute 🔗
  attribute（特性），是我们赋予某个事物的特质或对象。
  property（属性），是早已存在的不需要外界赋予的特质。

特别补充

 1. 点击事件：
     1. onclick：单击事件
     2. ondblclick：双击事件
 2. 焦点事件
     1. onblur：失去焦点
     2. onfocus:元素获得焦点。
 3. 加载事件：
     1. onload：一张页面或一幅图像完成加载。
 4. 鼠标事件：
     1. onmousedown    鼠标按钮被按下。
     2. onmouseup    鼠标按键被松开。
     3. onmousemove    鼠标被移动。
     4. onmouseover    鼠标移到某元素之上。
     5. onmouseout    鼠标从某元素移开。
 5. 键盘事件：
     1. onkeydown    某个键盘按键被按下。    
     2. onkeyup        某个键盘按键被松开。
     3. onkeypress    某个键盘按键被按下并松开。
 6. 选择和改变
     1. onchange    域的内容被改变。
     2. onselect    文本被选中。
 7. 表单事件：
     1. onsubmit    确认按钮被点击。
     2. onreset    重置按钮被点击。