vue中使用v-on监听多个方法？及v-on得用法？

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

vue中 v-on事件监听的四种常用方法

全部代码如下：

<template>
  <div>
    <!-- 一、普通绑定 -->
    <button v-on:click="dianji1">{{str1}}</button><br>
    <!--二、 v-on:click可以简写为@click -->
    <button @click="dianji2">{{str2}}</button><br>
    <!-- 三、对象形式的写法 ，里面可以写多个方法-->
    <button v-on="{ click: onClick, focus: onFocus, blur: onBlur }">多个事件</button><br>
    <!-- 四、在内联处理器中调用方法 -->
    <!-- 除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件： -->
    <button @click="myclick('今天','天气','不错',$event)">传参</button>
  </div>
</template>

<script>
//  @blur 是当元素失去焦点时所触发的事件
// @focus是元素获取焦点时所触发的事件
export default {
  data() {
    return {
      str1:'点击1',
      str2:'点击2',
    }
  },
  methods: {
    dianji1(){
      console.log('点击了1');
    },
    dianji2(){
      console.log('点击了2');
    },
    onClick(){
      console.log('点击事件');
    },
    onFocus(){
      console.log('焦点事件');
    },
    onBlur(){
      console.log('失去焦点事件');
    },
    myclick(str1,str2,str3,event){
      console.log(str1+str2+str3);
      console.log(event);  //event  接受的是事件对象
    }
  },
}
</script>

<style>

</style>

输出结果如下：

总结：

1. v-on：click(普通写法)
2. @click(简写：把v-on用@代替)
3. v-on="{ click: onClick, focus: onFocus, blur: onBlur }" 多个方法可以{}(对象的形式)
4. @click="myclick('今天','天气','不错',$event)" 在内联式直接写方法。