Vue中的事件处理

目录

1.v-on事件监听

1.1 简单事件处理

1.2 复杂事件处理

2.事件修饰符

---

1.v-on事件监听 1.1 简单事件处理

括号里,可以写一些简单的事件处理,如果事件比较复杂,则需要配置methods对象,把方法写在methods里边

语法  : v-on:事件名="事件处理 "   比如 v-on:click=" "

简写  : @事件名=" 事件处理"       比如  @click=" "

    当前数值是:{{num}}
    点击num+1  
    
    简写,点击num+1

1.2 复杂事件处理

语法  : v-on:事件名=" 事件处理函数"   比如 v-on:click=""

简写  : @事件名=" 事件处理函数"       比如  @click=" "

 注意 : 

事件处理函数必须写在methods对象中methods中函数写法: 函数名:function( ){ } 可以简写为 : 函数名( ){ }引号里边,函数后边的小括号可以加,也可以不加,如果需要传参数就加括号,不需要传参,一般不加括号

    {{message}}
    点击获取数据
    简写方式,点击获取数据
    简写方式,点击设置数据

2.事件修饰符 常用的事件修饰符有以下几种: .stop     阻止冒泡.prevent   禁用标签默认行为.self     只有触发自身才会执行.once     事件只执行一次.passive   滚动事件中,默认行为立即执行.capture   使用事件捕获模式

 1. 阻止冒泡  .stop 

2.禁用标签默认行为 .prevent

      点击跳转
 

3.只有触发自身才会执行 .self

4.事件只触发一次 .once

后两种事件修饰符应用的比较少,如果想了解,可以参考官方文档

事件处理 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/events.html