文章目录
- 前言
- 1️⃣事件处理器
- 2️⃣表单
- 3️⃣总结
前言
上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.,现在让我们接着Vue系列的学习。
Vue中事件处理器、表单等在开发中的作用不可或缺,本文将基于实例进行以上知识点的讲解。
1️⃣事件处理器
在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
方法会被调用,并输出一条消息到控制台。
2️⃣表单
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指令对于表单的处理是十分高效快捷的。
3️⃣总结
以上为前端开发:一文带你精通Vue.js前端框架系列(七),带领读者掌握事件处理器及表单等。
前端开发系列将持续更新,读者可订阅专栏持续学习。