【吐血总结】前端开发:一文带你精通Vue.js前端框架(七)

文章目录

    • 前言
    • 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前端框架系列(七),带领读者掌握事件处理器及表单等。

前端开发系列将持续更新,读者可订阅专栏持续学习。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/176949.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

交换机堆叠 配置(H3C)

堆叠用来干什么&#xff1f; 一台交换机网口有限&#xff0c;无法满足网络需求&#xff1b; 无法达到网络要求&#xff0c;为了扩展核心设备的转发要求&#xff0c;不改变原来网络&#xff0c; 可以使用新交换机和原来交换机组成IRF。 配合聚合可以达到备用作用&#xff0c;防…

爆款元服务!教你如何设计高使用率卡片

元服务的概念相信大家已经在 HDC 2023 上有了很详细的了解&#xff0c;更轻便的开发方式&#xff0c;让开发者跃跃欲试。目前也已经有很多开发者开发出了一些爆款元服务&#xff0c;那么如何让你的元服务拥有更高的传播范围、更高的用户使用率和更多的用户触点呢&#xff1f;设…

Java实现音频转码,WAV、MP3、AMR互转

1.背景 最近在集成一款产品支持语音双向对讲&#xff0c;首先是采集小程序的音频下发给设备端&#xff0c;然后可以控制设备录音生成音频链路让小程序播放。在这个过程中发现&#xff0c;设备除了AMR格式的音频外&#xff0c;其他的音频都不支持&#xff0c;而微信小程序有不支…

2023年好用的远程协同运维工具当属行云管家!

对于IT小伙伴而言&#xff0c;一款好用的远程协同运维工具是非常重要的&#xff0c;不仅可以提高工作效率&#xff0c;还能第一时间解决运维难题&#xff0c;所以好用的远程协同工具是非常必要的。这里就给大家推荐一款哦&#xff01; 2023年好用的远程协同运维工具当属行云管…

保护数据库防止数据泄露

为了避免金钱损失、声誉损害、机密性损失、不遵守政府法规等&#xff0c;保护组织的数据至关重要&#xff0c;保护数据库可以保护您的企业免受无数安全威胁&#xff0c;包括权限滥用、数据泄露、数据库注入和其他网络攻击。 选择工具保护数据库 Log360 是一站式 SIEM 解决方案…

省级数字经济政策词频分析数据集(2005-2023)

数据简介&#xff1a;当今社会&#xff0c;数字经济已经成为推动世界经济发展和社会变革的重要动力。随着信息技术的迅猛发展和智能化技术的普及应用&#xff0c;数字经济政策的制定和实施变得愈发重要。数字经济政策的词频分析成为了对政策文件和宣言进行深度解读的关键工具。…

NI MIMO原型验证系统硬件介绍 已更新 2023年1月6日

https://www.ni.com/zh-cn/shop/wireless-design-test/what-is-the-mimo-prototyping-system/introduction-to-the-ni-mimo-prototyping-system-hardware.html 概览 随着采用无线连接方式的设备大量涌现&#xff0c;迫切需要研发可满足更高数据与容量需求的无线技术。来势汹汹…

wx小程序web-view uniapp H5

最近微信小程序对有视频播放的审核严&#xff0c;需要提供“文娱类资质”。而申请这个资质比较繁琐。所以我们在小程序上用web-view做跳转到H5&#xff0c;这是小程序关于web-view文档说明https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 开发前配…

MacOS Ventura 13 优化配置(ARM架构新手向导)

一、系统配置 1、About My MacBook Pro 2、在当前标签打开新窗口 桌面上创建目录的文件夹&#xff0c;每次新打开一个目录&#xff0c;就会创建一个窗口&#xff0c;这就造成窗口太多&#xff0c;不太好查看和管理&#xff0c;我们可以改成在新标签处打开新目录。需要在&…

Flink(五)【DataStream 转换算子(上)】

前言 这节注定是一个大的章节&#xff0c;我预估一下得两三天&#xff0c;涉及到的一些东西不懂就重新学&#xff0c;比如 Lambda 表达式&#xff0c;我只知道 Scala 中很方便&#xff0c;但在 Java 中有点发怵了&#xff1b;一个接口能不能 new 来构造对象? 答案是可以的&…

Hive的安装部署

目录 1.修改hadoop相关参数2.Hive解压安装3.Hive元数据的三种部署方式3.1 元数据库之Derby3.2 元数据库之Mysql3.3 元数据之MetaStore Server 4.hive的两种访问方式4.1 命令行的方式4.2 HiveServer2模式 1.修改hadoop相关参数 1&#xff09;修改core-site.xml [roothadoop102…

网网络安全基础之php开发 文件读取、写入功能的实现

前言 续之前的系列&#xff0c;这里php开发的文件操作的内容读取以及文本写入的部分 文件读取代码的实现 css代码 本系列的php博客都是这个css&#xff0c;名字都是index.css /* css样式初始化 */ * {font-family: Poppins, sans-serif;margin: 0;padding: 0;box-sizing: …