VUE入门学习之如何理解事件处理

本篇内容主要讲解"VUE入门学习之如何理解事件处理"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"VUE入门学习之如何理解事件处理"吧!

1. 函数绑定

可以用v-on:click="methodName"或者快捷方式 @click="methodName"绑定事件处理函数

@click="methodName()"也可以，@click="methodName"猜测是简写

  
{{ count }}
  
{{ count }}

  data() {    return {      count: 0,    };  },  methods: {    add() {      this.count++;    },  },

2. 带参数和$event

可以直接在往事件绑定的函数里传参数和$event

{{ count }}

  data() {    return {      count: 0,    };  },  methods: {    add() {      this.count++;    },    set(value, event) {      console.log(event);      this.count = value;    },  },

3. 多个函数绑定一个事件

多个函数直接用逗号分隔，这里即使是没有入参的函数，也要加括号，否则不会执行那个函数

比如

{{ count }}

  data() {    return {      count: 0,    };  },  methods: {    add() {      this.count++;    },    log() {      console.log("log---");    },    set(value, event) {      console.log(event);      this.count = value;    },  },

4. 事件修饰符

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

...

...

...

5. 按键修饰符

• .enter

• .tab

• .delete (捕获"删除"和"退格"键)

• .esc

• .space

• .up

• .down

• .left

• .right

6. 系统修饰键

事件触发时修饰键必须处于按下状态

• .ctrl

• .alt

• .shift

• .meta

Do something

.exact 修饰符

A

A

A

鼠标按钮修饰符

  鼠标左击  鼠标右击  鼠标中击

到此，相信大家对"VUE入门学习之如何理解事件处理"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！