5-Vue vue-on

1. 作用：对页面中的事件进行绑定

2. 语法： v-on:事件类型=“事件处理函数名”

缩写： @事件类型=“事件处理函数名”

3. vue事件绑定提供了两方面的内容：自定义事件和为DOM绑定事件。vue中为DOM元素绑定事件是采用DOM2级事件的处理方式。

例如 ：

结果 ：

栗子1 ： 用v-on指令来监听DOM事件，并进行JavaScript处理

结果：

栗子2 ： 可以将事件处理函数名放在methods中，这样直接调用函数名即可

结果: hello vue    BUTTON

栗子3 ：可以给函数传入参数

结果: hi  what

栗子4 ：在内联语句处理器中访问原生DOM事件。可以用特殊变量$event把它传入方法

结果: form cannot be submitted yet

尽管我们可以在methods中实现阻止默认事件等，但更好的方法是methods中只有纯粹的数据逻辑，而不是去处理DOM事件

为了解决这个问题，vue为v-on提供了事件修饰符。通过由.表示的指令后缀来调用修饰符

1..stop 阻止单击事件冒泡

栗子 ：

解析 ： 因为div是button的父元素，当点击button时，会冒泡到父元素，相当于也点击了button，也就是没阻止冒泡事件时，会弹出123 接着弹出456，阻止冒泡事件之后，不会冒泡到父元素，也就只能弹出123了

转自作者：椰果粒