Vue事件与表单处理

一、Vue事件处理

1、Vue.js 提供了事件处理机制，事件监听使用v-on指令监听DOM事件来触发JavaScript代码。

2、通常情况下需要编写监听事件、方法事件处理器等

二、v-on指令与事件监听

1、v-on指令为 HTML 元素绑定事件监听，类似原生JavaScript的onclick等写法，也是在HTML元素上进行监听。

2、表达式   v-on：事件名称 ='函数名称()'       表达式可以是一个方法的名字或一个内联语句，可以简写为  @事件名称 ='函数名称()'         函数定义在methods配置中。

3、事件调用的方法没有参数

<div id="app">
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
</div>

//写在methods里
   methods: {
      btn1Click() {
        console.log("按钮1");
      },
}

点击按钮1时，会在控制台输出按钮1

 4、存在参数的方法使用

<button v-on:click="btn1('你好鸭！')">按钮1</button>

    //写在methods里
    methods: {
      btn1: function(msg) {
        alert(msg);
      }
    }

点击按钮1时，会弹出写着“你好鸭！”的弹窗

5、在事件定义时, 写方法时省略了小括号, 如果方法本身有一个参数的, 这个时候, Vue会默认将浏览器生产的原生事件event参数传递到方法

<div id="app">
<button @click="btn2Click">按钮2</button>
</div>

//写在methods里
methods: {
btn2Click(event) {
        console.log('按钮2', event);
},
}

点击按钮2时，会在控制台输出按钮2