vue学习 四 v-on的事件修饰符和按键修饰符

方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop            阻止事件继续传播
• .prevent          阻止标签的默认事件发生
• .capture
• .self
• .once            事件只会发生一次
• .passive

...



...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 

 

上图中的.once 事件中，页面结果就是点一次涨一岁后再点击就没有用了；

.stop 事件中，当鼠标移动到“停止移动”处时左边位置就不再变化了；

.prevent 事件中，当我们点击a标签后，只能执行alert方法输出hello world，不能跳转到百度了； 

 

按键的事件修饰符：

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

意思就是只有在按下enter键之后才能触发后面的方法