VUE中的修饰符、指令

修饰符

表单修饰符

表单中v-model每次input事件触发

• v-model.lazy每次change事件触发
• v-model.number转为数字类型
• v-moel.trim过滤首尾空格

事件修饰符

• .stop阻止事件继续传播 => event.stopPropagation()
• .prevent阻止事件默认行为 => event.preventDefalt()
• .capture事件捕获模式，先当前元素后向内执行 => addEventListener的第三参数true
• .self只对event.target当前元素触发事件
• .once只触发一次，可用于自定义组件事件上
• .passive不阻止事件默认行为，立即执行函数（不和.prevent一起用）
• .native监听原生事件

键盘按键修饰符

v-on:keyboardEvent.key键盘事件绑定有效按键名key作为修饰符，(IE9中对.esc以及所有方向键有不同的key值，内置别名以兼容IE9)；Vue提供的按键别名：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

其他的keyCode表：？

鼠标按钮修饰符

v-on:mouseEvent.key鼠标事件绑定按键名key作为修饰符，限制鼠标按钮才能响应事件：

• .left
• .right
• .middle

系统修饰符

仅在按下相应系统键时候才能触发鼠标或键盘事件的监听器

• .ctrl
• .alt
• .shift
• .meta

精准系统修饰符.exact

精准控制系统修饰符组合才能触发事件：

//即使Alt或Shift，和Ctrl一同按下，也会触发click事件
<button @click.ctrl="onClick">.</button>
//只有Ctr被按下时，才会触发
<button @click.ctrl.exact="onClick">.</button>
//没有任何系统修饰符被按下时，才会触发
<button @click.exact="onClick">.</button>

事件传播机制

？

指令

v-html
v-text
v-model
v-bind：:
v-on：@
v-show
v-if、v-else-if、v-else
v-for :key