JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目3 基于Vue基础语法实现表单提交页面(任务2-任务实施)_第1页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目3 基于Vue基础语法实现表单提交页面(任务2-任务实施)_第2页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目3 基于Vue基础语法实现表单提交页面(任务2-任务实施)_第3页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目3 基于Vue基础语法实现表单提交页面(任务2-任务实施)_第4页
JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目3 基于Vue基础语法实现表单提交页面(任务2-任务实施)_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目3智慧公寓管理系统的登录注册页任务3-2基于Vue基础语法实现表单提交页面1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务导入

在构建一个完善的在线预订系统时，提升用户体验的关键之一便是提供一个直观且功能完备的表单页面，让用户能够轻松完成预订流程。为了进一步优化我们的系统界面和交互设计，接下来我们将着手实现一个高效的表单页面，该页面不仅集成了用户预订所需的所有关键信息点，还通过合理的布局和导航设计，极大地方便了用户的操作。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务概述

具体来说，本任务要求我们精心打造一个包含左侧菜单栏与右侧内容区域的表单页面。左侧菜单栏作为导航核心，将简洁明了地展示“表单”与“列表”两大功能模块，其中“表单”选项将是我们此次任务的重点。列表展示页面是任务3-3的预留功能，本任务中不对其进行详细介绍。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务概述

当用户点击“表单”选项时，页面右侧的内容区域将优雅地展开，呈现出一个精心设计的预订信息填写表单。这个表单将涵盖用户预订过程中最为关心的几个关键字段，包括但不限于房间类型、入住时间、预订人姓名、联系电话、入住人数以及联系邮箱等。通过为这些字段提供清晰明了的输入框和选择项，我们旨在确保用户能够准确无误地填写所有必要信息。此外，为了提升用户体验，还将为表单页面添加一个醒目的提交按钮，让用户能够一键提交所填写的信息。一旦提交成功，页面将在表单下方即时显示一条确认消息，并展示用户刚刚提交的预订数据，让用户对预订结果一目了然。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施在ch03文件夹创建一个Example3-15.html文件，并在该文件中引入Vue，具体代码如例3-15所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施元素结构代码：<body><divid="app"><divclass="layout"><divclass="menu"><divv-for="(item,index)inmenuList":key="index":class="{'active':item.id===clickId?true:false,'menu-item':true}"@click="clickMenu(item.id)"><divstyle="margin-right:10px;">♒</div><div>{{}}</div></div></div><divclass="main-content"><divclass="main-card"><divv-if="isForm"><formclass="form"><div><labelfor="type">房间类型:</label><selectid="type"name="fruits"v-model="form.type"><optionvalue="标准间">标准间</option><optionvalue="大床房">大床房</option><optionvalue="商务房">商务房</option><optionvalue="家庭房">家庭房</option></select></div>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施元素结构代码：<div><labelfor="time">入住时间:</label><inputtype="date"id="time"v-model="form.time"required></div><div><labelfor="name">预订人姓名:</label><inputtype="text"id="name"v-model=""required></div><div><labelfor="phone">预订人电话:</label><inputtype="tel"id="phone"v-model="form.phone"required></div><div><labelfor="number">入住人数:</label><inputtype="number"id="number"v-model="form.number"required></div><div><labelfor="email">联系邮箱:</label><inputtype="email"id="email"v-model="form.email"required></div><divv-if="isSubmit"><p>提交成功的数据</p><pv-html="formData"></p></div></form>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施元素结构代码：<divclass="submit-btn"><p@click="submitForm">提交</p></div></div><divv-else><divv-if="isSubmit"><pv-html="myHtml"></p></div></div></div></div></div></div>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施JavaScript代码：<scriptsrc="/vue@3/dist/vue.global.js"></script><script>constapp=Vue.createApp({data(){return{menuList:[{id:'1',name:'表单'},{id:'2',name:'列表'},],clickId:'1',form:{type:'标准间',time:'',name:'',phone:'',number:'',email:''},isForm:true,isSubmit:false,myHtml:'<divstyle="color:red;">列表页面</div>'}},methods:{clickMenu(id){this.clickId=id;},changeContent(id){if(id==='1'){this.isForm=true;}else{this.isForm=false;}},submitForm(){for(letiinthis.form){if(this.form[i]===''){alert('请将表单填写完整');return;}}this.isSubmit=true;alert('保存成功');}},watch:{clickId:{handler(newValue,oldValue){this.changeContent(newValue)}}},computed:{formData(){returnJSON.stringify(this.form);}}});app.mount('#app')</script>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施CSS代码：<style>.menu-item{height:60px;line-height:60px;color:#000;display:flex;justify-content:center;cursor:pointer;border-bottom:1pxsolid#fff;}.menu-item:hover{background-color:rgb(238,245,255);}//控制菜单切换的样式.active{color:rgb(117163255);}//省略其他元素样式</style>HTML5的优势

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论