（15）事件处理，表单绑定

可以参考官网https://cn.vuejs.org/guide/essentials/event-handling.html来学习

添加事件，处理事件，传递参数

监听事件​

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

用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

假如我们在页面上添加一个按钮，然后我们给button添加事件，单击时counter（button按钮）加1

 

 

 <button @click="counter++">点击：counter={{counter}}</button>

效果：

 

示例2，点击按钮，改变文本内容，当点击按钮时，原始消息变化为点击按钮后的消息

 

 处理事件方法

修改点击之后的按钮文本

 （写法有多种）参考代码如下：

表单输入绑定

（v-model会根据控件类型自动选取正确的方法来更新元素，她负责监听用户输入的数据来更新数据，并在某种极端场景下进行一些特殊处理）双向数据绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

template

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

<input v-model="text">

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

 

<template>

  <div class="hello">

    <h3>v-model 示例</h3>

    <p>输入框中的内容: {{ userInput }}</p>

    <input v-model="userInput" placeholder="请输入一些文字" />

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  // 这里存放数据

  data() {

    return {

      userInput: "" // 初始值为空字符串

    }

  }

}

</script>

<style scoped>

.hello {

  text-align: center;

  margin-top: 60px;

}

</style>

修饰符lazy

在默认情况下，v-model在每次input时间触发后，将输入框的值与数据同步，lazy的效果就是将实时变更变为非实时，

比如用户输入后按下回车键后才变更。

 

 回车后