項(xiàng)目3智慧公寓管理系統(tǒng)的登錄注冊頁任務(wù)3-3基于組件實(shí)現(xiàn)列表渲染頁面1HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)導(dǎo)入

在構(gòu)建現(xiàn)代Web應(yīng)用時(shí)，組件化開發(fā)模式已成為提升應(yīng)用性能和可維護(hù)性的重要手段。在我們當(dāng)前的項(xiàng)目中，隨著功能的不斷擴(kuò)展，對(duì)頁面結(jié)構(gòu)和數(shù)據(jù)交互的靈活性要求也越來越高。為了進(jìn)一步提升用戶體驗(yàn)和應(yīng)用的響應(yīng)性，接下來我們將深入實(shí)施一個(gè)關(guān)鍵任務(wù)，即通過Vue的組件基礎(chǔ)知識(shí)來實(shí)現(xiàn)和優(yōu)化我們的表單頁面與列表頁面。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)概述

本任務(wù)的核心在于實(shí)現(xiàn)并優(yōu)化“任務(wù)3-3”中預(yù)留的列表渲染頁面功能。我們將通過定義兩個(gè)關(guān)鍵的局部組件，即FormCom和ListCom，來分別處理表單的提交和列表的展示邏輯。FormCom組件將負(fù)責(zé)捕獲用戶輸入的預(yù)訂信息，如房間類型、入住時(shí)間、預(yù)訂人姓名等，并提供一個(gè)提交按鈕來將這些數(shù)據(jù)發(fā)送給父組件。而ListCom組件則負(fù)責(zé)接收來自父組件的列表數(shù)據(jù)，并使用Vue的v-for指令來循環(huán)渲染這些數(shù)據(jù)，展示給用戶一個(gè)清晰的預(yù)訂列表。為了提升用戶體驗(yàn)，我們還將為表單頁面與列表頁面之間的切換添加過渡效果。這種平滑的過渡效果不僅讓頁面間的跳轉(zhuǎn)更加自然，還增強(qiáng)了應(yīng)用的整體美感。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)效果

HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施在ch03文件夾創(chuàng)建一個(gè)Example3-22.html文件，并在該文件中引入Vue，具體代碼如例3-22所示。HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施元素結(jié)構(gòu)代碼：<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"><Transition><divv-if="isForm"key="form"><form-com:form="form":submit-form="submitForm"/></div><divv-show="!isForm"key="list"><list-com:list="list"/></div></Transition></div></div></div></div>HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施JavaScript代碼：<scriptsrc="/vue@3/dist/vue.global.js"></script><script>//定義FormCom選項(xiàng)對(duì)象constFormCom={props:['submitForm'],data(){return{form:{type:'標(biāo)準(zhǔn)間',time:'',name:'',phone:'',number:'',email:''},}},template:`<div><formclass="form">HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施<div><labelfor="type">房間類型:</label><selectid="type"name="fruits"v-model="form.type"><optionvalue="標(biāo)準(zhǔn)間">標(biāo)準(zhǔn)間</option><optionvalue="大床房">大床房</option><optionvalue="商務(wù)房">商務(wù)房</option><optionvalue="家庭房">家庭房</option></select></div><div><labelfor="time">入住時(shí)間:</label><inputtype="date"id="time"v-model="form.time"required></div><div><labelfor="name">預(yù)訂人姓名:</label><inputtype="text"id="name"v-model=""required></div><div><labelfor="phone">預(yù)訂人電話:</label><inputtype="tel"id="phone"v-model="form.phone"required></div><div><labelfor="number">入住人數(shù):</label><inputtype="number"id="number"v-model="form.number"required></div><div>HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施<div><labelfor="email">聯(lián)系郵箱:</label><inputtype="email"id="email"v-model="form.email"required></div></form><divclass="submit-btn"><p@click="()=>this.submitForm(form)">提交</p></div></div>`}//定義ListCom選項(xiàng)對(duì)象constListCom={props:['list'],template:`<div><divv-for="(item,index)inthis.list":key="index"class="list-container"><div>{{item.type}}</div><div>{{item.time}}</div><div>{{}}</div><div>{{item.phone}}</div><div>{{item.number}}</div><div>{{item.email}}</div></div></div></div>`}HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施//創(chuàng)建Vue應(yīng)用程序?qū)嵗齝onstapp=Vue.createApp({components:{'form-com':FormCom,'list-com':ListCom},data(){return{menuList:[{id:'1',name:'表單'},{id:'2',name:'列表'},],clickId:'1',isForm:true,list:[{id:'0',type:'房間類型',time:'入住時(shí)間',name:'姓名',phone:'電話',number:'人數(shù)',email:'聯(lián)系郵箱'},{id:'1',type:'標(biāo)準(zhǔn)間',time:'2021-10-25',name:'張三',phone:,number:'6',email:'234983298@123.com'},]}},methods:{clickMenu(id){this.clickId=id;},

HTML5的優(yōu)勢

解決了跨瀏覽器的問題

新增多個(gè)新特性

（語義化標(biāo)簽、多媒體標(biāo)簽、canvas元素、本地存儲(chǔ)等）

用戶優(yōu)先原則

化繁為簡的優(yōu)勢任務(wù)實(shí)施clickMenu(id){this.clickId=id;},changeContent(id){if(id==='1'){this.isForm=true;}else{this.isForm=false;}},submitForm(form){for(letiinform){if(form[i]===''){alert('請將表單填寫完整');return;}}this.list.push({id:this.list.length,...form});alert('保存成功')}},watch:{clickId:{handler(newValue,oldValue){this.changeContent(newValue)}}},computed:{