前言
上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.，现在让我们接着Vue系列的学习。
Vue中事件处理器、表单等在开发中的作用不可或缺，本文将基于实例进行以上知识点的讲解。
事件处理器
在Vue.js中，我们可以使用v-on指令来绑定事件处理器。事件处理分为多种，本文介绍常见的几种。
1.点击事件处理：
语法模板
<template> <button v-on:click="handleClick">Click Me</button> </template> <script> export default { methods: { handleClick() { // 在这里编写点击事件处理逻辑 console.log('Button clicked!'); } } }; </script>
当按钮被点击时，handleClick方法会被调用，并输出一条消息到控制台。
完整代码如下：
效果如下所示：
2.输入事件处理：
语法模板
<template> <input v-model="message" v-on:input="handleInput" placeholder="Type something"> </template> <script> export default { data() { return { message: '' }; }, methods: { handleInput() { // 在这里编写输入事件处理逻辑 console.log('Input value changed: ' + this.message); } } }; </script>
当文本输入框的值发生变化时，handleInput方法会被调用，并输出一条带有当前输入值的消息到控制台。
<div id="app"> <input v-model="inputValue" placeholder="Type something" oninput="handleInput(event)"> <p>You typed: {{ inputValue }}</p> </div> <script> new Vue({ el: '#app', data: { inputValue: '' } }); function handleInput(event) { var inputValue = event.target.value; console.log('Input value changed:', inputValue); // 在这里可以进行其他处理逻辑 } </script>
在上述代码中，我们使用 oninput 属性直接将 handleInput 函数绑定到输入框的 input 事件上。当用户在输入框中输入时，handleInput 函数会被调用，并通过 event.target.value 获取输入框的值。然后，你可以在函数中进行任何其他的处理逻辑。
3.键盘事件处理：
语法模板
<template> <input v-on:keyup.enter="handleEnterKey" placeholder="Press Enter"> </template> <script> export default { methods: { handleEnterKey() { // 在这里编写按下回车键的事件处理逻辑 console.log('Enter key pressed!'); } } }; </script>
当在文本输入框中按下回车键时，handleEnterKey方法会被调用，并输出一条消息到控制台。
表单
v-model 是 Vue.js 中一个常用的指令，它可以将表单输入元素绑定到 Vue 实例中的数据属性。通过这种方式，表单输入的值可以自动地同步到 Vue 实例中的数据，而不需要手动监听 “input” 或 “change” 事件来进行数据同步。
我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。
举个例子：
<div id="app"> <p>input 元素：</p> <input v-model="message"> <p>绑定: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2"></textarea> </div> <script> new Vue({ el: '#app', data: { message: '秋说', message2: '等风来\r\nWait' } })
页面回显如下：
我们可以通过以下形式实现复选框的双向数据绑定：
<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="1" value="秋说" v-model="checkedNames"> <label for="runoob">秋说</label> <input type="checkbox" id="2" value="花无缺" v-model="checkedNames"> <label for="google">花无缺</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } })
页面显示如下：
我们可以通过以下形式实现下拉列表的双向数据绑定：
<div id="app"> <select v-model="selected" name="1"> <option value="">choose</option> <option value="hello">秋说</option> <option value="bye">花无缺</option> </select> <div id="output"> 你的选择是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } })
页面回显如下：
通过以上实例可以看到，v-model指令对于表单的处理是十分高效快捷的。
总结
以上为前端开发：一文带你精通Vue.js前端框架系列（七），带领读者掌握事件处理器及表单等。
前端开发系列将持续更新，读者可订阅专栏持续学习。
