7、VUE事件

1、事件处理

Vue.js使用v-on指令监听DOM事件来触发JS回调函数。

V-on： 缩写为 @

 

 

 

事件回调函数可以传入$event这个事件对象。

 

 

 

2、事件修饰符

     在事件处理程序中调用event.preventDefault()或者event.stopPropagation()是很常见的。尽管我们可以在事件处理函数中轻松实现这点，但更好的方式是：事件处理函数只是纯粹的数据逻辑，而不是去处理DOM事件细节。

     为了解决这个问题，Vue.js为v-on提供了事件修饰符。通过由“.”来调用修饰符。

 

 

 

2.1. .stop

.stop修饰符用来阻止事件冒泡。

 

 

2.2. .prevent

.prevent修饰符取消事件的默认动作。

 

 

 

2.3. .capture

      .capture修饰符捕获冒泡事件，优先执行。

     

 

2.4. .self

     .self只在当前控件触发事件,事件不会传播。

 

 

2.5. .once

       .once事件只会执行一次。

 

 

 

 

3、表单处理

3.1. V-mode数据绑定

     使用v-model指令在表单控件上创建双向数据绑定。

    

 

 V-model会忽略所有表单元素的vaue、checked、selected特性的初始值，因为它会以模型层的数据作为初始值。

 

 

 

 

 

 

 

 

3.2. V-mode修饰符-lazy

 

 

 

3.3. V-mode修饰符-number

 

 

3.4. V-mode修饰符-trim