VUE入门学习之事件处理

目录

• 1. 函数绑定
• 2. 带参数和$event 
• 3. 多个函数绑定一个事件
• 4. 事件修饰符
• 5. 按键修饰符 
• 6. 系统修饰键
•  .exact 修饰符 
• 鼠标按钮修饰符
• 总结

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 }}

只会执行set

{{ 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

鼠标按钮修饰符

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！