《HTML5網(wǎng)頁前端設(shè)計(jì)》教案第13章前端框架實(shí)戰(zhàn)·基于Vue3.x的秒表程序的設(shè)計(jì)與實(shí)現(xiàn)一、教學(xué)目標(biāo)：了解前端框架的概念；了解基礎(chǔ)前端框架jQuery和Bootstrap；了解高級(jí)前端框架Vue、React和Angular；掌握Vue3框架的CDN引用；掌握Vue3創(chuàng)建和掛載應(yīng)用的方法；掌握Vue3數(shù)據(jù)動(dòng)態(tài)綁定和事件處理的方法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：了解前端框架及高級(jí)前端框架Vue；難點(diǎn)：Vue3數(shù)據(jù)動(dòng)態(tài)綁定和事件處理的方法。三、教學(xué)方法與手段：采取互動(dòng)式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡(jiǎn)介：當(dāng)學(xué)習(xí)了Web前端開發(fā)的基礎(chǔ)知識(shí)和各類API以后，可以進(jìn)一步了解前端框架的概念。本章介紹了基礎(chǔ)前端框架jQuery和Bootstrap，以及高級(jí)前端框架Vue、React和Angular。并以Vue3為例介紹其引用和基礎(chǔ)開發(fā)語法，完成了第一個(gè)Vue3應(yīng)用和綜合實(shí)戰(zhàn)應(yīng)用——基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)。開發(fā)者可以在學(xué)完本書后進(jìn)一步選擇前端框架的專業(yè)書進(jìn)行學(xué)習(xí)。五、教學(xué)基本內(nèi)容：13.1前端框架簡(jiǎn)介13.1.1什么是前端框架前端框架這一概念最早是在建筑學(xué)領(lǐng)域被提及，它指的是一種可復(fù)用的設(shè)計(jì)構(gòu)建。在Web開發(fā)領(lǐng)域，前端框架指的是一種基于HTML、CSS、JavaScript技術(shù)封裝的工具套件，用于幫助開發(fā)者提高開發(fā)效率，快速搭建出Web頁面和相關(guān)的交互事件。前端框架一般會(huì)事先封裝好一些美觀的UI組件（例如按鈕、圖標(biāo)、下拉菜單等）或交互功能（例如元素隱藏/顯示、動(dòng)畫效果、地址路由等），開發(fā)者無需從零開始編寫繁瑣的代碼，直接通過調(diào)用的方式就可以快速復(fù)用前端框架內(nèi)自帶的組件和功能。掌握好前端框架，不僅可以大幅度降低開發(fā)周期也可以提高頁面美觀性。13.1.2基礎(chǔ)前端框架jQuery和Bootstrap是建議開發(fā)者可以了解和學(xué)習(xí)的輕量級(jí)基礎(chǔ)前端框架，前者是網(wǎng)絡(luò)上使用最廣泛的函數(shù)庫，后者是全球最受歡迎的前端組件庫之一。1.jQueryjQuery這個(gè)名稱來源于JavaScript和Query（查詢）的組合，是一個(gè)輕量級(jí)的跨平臺(tái)JavaScript函數(shù)庫，擁有MIT軟件許可協(xié)議。目前主流瀏覽器基本上都支持jQuery。jQuery秉承“writeless，domore（寫的更少，做的更多）”的核心理念，其語法能用讓用戶更方便地選取和操作HTML元素、處理各類事件、實(shí)現(xiàn)JavaScript特效與動(dòng)畫，并且能為不同類型的瀏覽器提供更便捷的API用于AJAX交互。jQuery也能讓開發(fā)者基于JavaScript函數(shù)庫開發(fā)新的插件。jQuery通用性和可擴(kuò)展性相結(jié)合，它的出現(xiàn)將改變?nèi)藗儗?duì)JavaScript的使用方式?，F(xiàn)如今jQuery仍然是網(wǎng)絡(luò)上使用范圍最廣泛的JavaScript函數(shù)庫之一。根據(jù)Builtwith（注：一款用于統(tǒng)計(jì)流行網(wǎng)站使用的構(gòu)建技術(shù)和編程語言的工具）的最新統(tǒng)計(jì)數(shù)據(jù)得出結(jié)論，目前流量排名最高的百萬個(gè)網(wǎng)頁中超過70%都在使用jQuery，其中國(guó)內(nèi)比較著名的網(wǎng)站有：CCTV、新浪、搜狗、愛奇藝、豆瓣、CSDN、bilibili、支付寶等。2.BootstrapBootstrap是全球最受歡迎的前端組件庫之一，適合用于開發(fā)響應(yīng)式布局的Web項(xiàng)目，在移動(dòng)設(shè)備端能帶來更好的體驗(yàn)。其核心優(yōu)勢(shì)是響應(yīng)式網(wǎng)格系統(tǒng)，在無需刷新頁面的前提下動(dòng)態(tài)變化布局排版以便自適應(yīng)當(dāng)前設(shè)備尺寸的效果。除此之外Bootstrap還封裝了相當(dāng)豐富的UI組件，例如表格、按鈕、徽章、進(jìn)度條、加載效果、分頁、列表、卡片、下拉菜單、折疊、導(dǎo)航、輪播、消息彈窗、提示框、表單等，這些組件風(fēng)格統(tǒng)一、簡(jiǎn)潔優(yōu)雅，能快速提高開發(fā)者的頁面美觀性。13.1.3高級(jí)前端框架如果希望掌握更高級(jí)的前端項(xiàng)目開發(fā)技能，可以進(jìn)階學(xué)習(xí)高級(jí)前端框架技術(shù)。高級(jí)前端框架具備更加豐富的內(nèi)置功能和工具，其組件化和代碼復(fù)用機(jī)制能夠有效提高開發(fā)效率，減少代碼冗余現(xiàn)象和節(jié)約維護(hù)成本。根據(jù)目前國(guó)內(nèi)外的前端開發(fā)流行趨勢(shì)來看，Vue、React和Angular被稱為三大主流前端框架。1.VueVue的發(fā)音類似于英文單詞view，是中國(guó)開發(fā)者尤雨溪在2014年創(chuàng)建的一款用于高效、靈活構(gòu)建用戶界面的JavaScript框架。它基于HTML、CSS和JavaScript標(biāo)準(zhǔn)語法開發(fā)，并提供了一套聲明式的、組件化的編程模型。其特色是可以用于搭建SPA（全稱為SinglePageApplication，單頁面應(yīng)用程序）和復(fù)雜的用戶界面。由于Vue是我國(guó)開發(fā)者創(chuàng)建的，因此在國(guó)內(nèi)比另外這兩個(gè)前端框架更受開發(fā)者青睞，具有更廣泛的國(guó)內(nèi)用戶群體和大量的中文文檔以及中文社區(qū)資源，國(guó)內(nèi)開發(fā)者更夠更有效地學(xué)習(xí)該框架。目前使用Vue開發(fā)的項(xiàng)目有：阿里巴巴、小米、餓了么、嗶哩嗶哩等。2.ReactReact最初是由Facebook公司創(chuàng)建，在UI組件搭建方面具有更高的靈活性。該框架將原先的整體UI拆分為不同的組件，每個(gè)組件都設(shè)置了自己的狀態(tài)和功能方法。就像可自由組合拼接的樂高積木一樣，開發(fā)者可以根據(jù)實(shí)際需要拼接、拆卸UI組件來快速搭建Web應(yīng)用，從而提高前端開發(fā)效率。React使用JSX作為開發(fā)語言，該語言是HTML和JavaScript的混合模式。React在全球范圍內(nèi)占有的市場(chǎng)份額較多，因此也具有龐大的社區(qū)支持，包含很多文檔、教程和工具。目前使用React開發(fā)的項(xiàng)目有：Instagram、Netflix、Uber官網(wǎng)等。3.AngularAngular誕生于2010年，第一版是由Google工程師MiskoHevery創(chuàng)建的，后被Google公司收購，成為其官方的前端開發(fā)框架，并轉(zhuǎn)由Google開發(fā)團(tuán)隊(duì)進(jìn)行維護(hù)和推廣。Angular基于TypeScript語言開發(fā)，具有更好的類型安全性。其內(nèi)部包含豐富的功能和工具，包括模板語法、表單驗(yàn)證、依賴注入等，開發(fā)者可以使用對(duì)應(yīng)的模塊來更高效地構(gòu)建復(fù)雜的Web項(xiàng)目。該框架學(xué)習(xí)成本較高，更適用于大型項(xiàng)目，例如數(shù)據(jù)可視化應(yīng)用、大規(guī)模復(fù)雜的應(yīng)用項(xiàng)目、桌面應(yīng)用程序等。目前使用Angular開發(fā)的項(xiàng)目有：NBA官網(wǎng)、Gmail郵箱、MicrosoftDynamics365等。13.2Vue3入門Vue3指的是Vue的第三版，也是目前的最新版。之前的Vue2已經(jīng)于2023年12月31日停止維護(hù)。本章將以Vue3為例，展示如何使用高級(jí)前端框架進(jìn)行Web項(xiàng)目的入門開發(fā)。13.2.1Vue3的安裝Vue3有兩種安裝方式，開發(fā)者可以根據(jù)自己的實(shí)際情況任選一種。1. 方法一：通過CDN引用開發(fā)者可以在網(wǎng)頁文件中使用<script>標(biāo)簽來引用Vue3的CDN地址。以下是目前測(cè)試可用的CDN地址，開發(fā)者可以從中任選其一：字節(jié)跳動(dòng)CDN：/cdn/expire-1-M/vue/3.2.31/vue.global.min.jsstaticfileCDN：/vue/3.0.5/vue.global.jsunpkgCDN：/vue@3/dist/vue.global.js以u(píng)npkgCDN為例，在網(wǎng)頁文件中的引用示例代碼如下：<scriptsrc="/vue@3/dist/vue.global.js"></script>注：如果擔(dān)心網(wǎng)絡(luò)波動(dòng)等原因，也可以將文件下載到本地后進(jìn)行引用，效果完全一樣。例如本地目錄為js，在網(wǎng)頁文件中的引用示例代碼如下：<scriptsrc="js/vue.global.js"></script>其中vue.global.js文件的名稱可自行修改。2. 方法二：通過npm或yarn安裝目前已經(jīng)支持使用npm或yarn命令安裝官方的vue手腳架，語法如下：#通過npm安裝npmcreatevue@latest#通過yarn安裝yarncreatevue@latest后續(xù)還需要錄入項(xiàng)目名稱，然后選一些配置選項(xiàng)來完成項(xiàng)目創(chuàng)建。由于本章旨在Vue3入門學(xué)習(xí)，這里不推薦初學(xué)者使用命令行工具來創(chuàng)建項(xiàng)目，因此不再開展詳細(xì)描述。下一節(jié)將直接在網(wǎng)頁頁面引入vue.global.js文件來進(jìn)行簡(jiǎn)單的測(cè)試學(xué)習(xí)。13.2.2第一個(gè)基于Vue3的應(yīng)用1. 創(chuàng)建項(xiàng)目結(jié)構(gòu)創(chuàng)建自定義名稱的項(xiàng)目文件夾firstVueDemo，其內(nèi)部創(chuàng)建子目錄js用于存放文件vue.global.js（通過CDN下載到本地），并新建index.html作為入口文件。index.html文件的初始代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>我的第一個(gè)Vue項(xiàng)目</title>6. <scriptsrc="js/vue.global.js"></script>7. </head>8. <body>9. </body>10. </html>其中第5行的標(biāo)題名稱可以自定義；第6行是對(duì)vue.global.js文件的引用聲明。2. 編寫段落文字在index.html的<body>與</body>標(biāo)簽之間聲明一個(gè)<div>組件，并為其定義id屬性，屬性值可自定義，一般可以聲明為id="app"表示Vue3框架開發(fā)的最外層容器。在<div>容器內(nèi)使用段落元素<p>補(bǔ)充一些問候語，參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>我的第一個(gè)Vue項(xiàng)目</title>6. <scriptsrc="js/vue.global.js"></script>7. </head>8. <body>9. <divid="app">10. <p>HelloWorld!</p>11. </div>12. </body>13. </html>在瀏覽器中訪問該網(wǎng)頁文件，此時(shí)就是一個(gè)普通網(wǎng)頁，實(shí)際尚未用到Vue3的相關(guān)功能。下一節(jié)我們將對(duì)該頁面進(jìn)行Vue框架改造，使其成為一個(gè)基于Vue3的應(yīng)用頁面。3. Vue框架應(yīng)用1)創(chuàng)建和掛載應(yīng)用Vue3中使用createApp函數(shù)來創(chuàng)建應(yīng)用，其語法格式如下：constapp=Vue.createApp({/*選項(xiàng)*/})修改index.html文件，追加<script>標(biāo)簽進(jìn)行創(chuàng)建應(yīng)用聲明，代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">…內(nèi)容略…</div>6. <script>7. constapp=Vue.createApp({})8. </script>9. </body>10. </html>Vue3中使用mount函數(shù)來掛載應(yīng)用到頁面模塊上，其語法格式如下：app.mount('#app')其中#app指的是通過ID選擇器找到網(wǎng)頁上id="app"的組件，并將應(yīng)用掛在到其中。修改index.html文件，追加掛載應(yīng)用語句，代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">…內(nèi)容略…</div>6. <script>7. constapp=Vue.createApp({})8. app.mount("#app")9. </script>10. </body>11. </html>此時(shí)應(yīng)用就掛載好了，下一節(jié)將介紹Vue3的模板語法——數(shù)據(jù)動(dòng)態(tài)綁定。2)數(shù)據(jù)動(dòng)態(tài)綁定Vue3使用基于HTML的模板語法將數(shù)據(jù)實(shí)例綁定到組件上，使得用JavaScript操作數(shù)據(jù)時(shí)頁面顯示的內(nèi)容可以動(dòng)態(tài)變化。最基礎(chǔ)的一種數(shù)據(jù)綁定形式叫做文本插值，在HTML文檔中的靜態(tài)文本可以改寫成{{變量名}}的形式表示動(dòng)態(tài)數(shù)據(jù)，例如：<p>{{msg}}</p>此時(shí)頁面上不會(huì)顯示msg這個(gè)詞，而是會(huì)顯示這個(gè)變量對(duì)應(yīng)的值。需要聲明的變量可以繼續(xù)寫到createApp函數(shù)內(nèi)部，放在data()方法中。data()方法中允許包含一個(gè)或多個(gè)動(dòng)態(tài)變量，其語法結(jié)構(gòu)如下：1. constapp=Vue.createApp({2. data(){3. return{4. 變量1:值1,變量2:值2,…變量N:值N5. }6. }7. })將index.html中的段落組件內(nèi)的問候語句換成變量{{msg}}，并在createApp函數(shù)的data()方法中補(bǔ)充對(duì)應(yīng)的變量聲明，修改后的代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <p>{{msg}}</p>7. </div>8. <script>9. constapp=Vue.createApp({10. data(){11. return{12. msg:"HelloVue!"http://取值可自定義13. }14. }15. })16. app.mount("#app") 17. </script>18. </body>19. </html>在瀏覽器中訪問該網(wǎng)頁文件，此時(shí)雖然頁面上看到同樣的文字，但是已經(jīng)變成動(dòng)態(tài)渲染的結(jié)果了。開發(fā)者可以試著修改data()中的msg取值，保存后重新預(yù)覽看頁面是否發(fā)生變化。3)事件處理在Vue3中使用v-on指令來監(jiān)聽DOM事件，該指令也可以縮寫為@符號(hào)。例如監(jiān)聽按鈕的click單擊事件，寫法如下：<buttonv-on:click="methodName">按鈕</button>或<button@click="methodName">按鈕</button>以上兩種寫法均可，其中methodName可以換成需要執(zhí)行的自定義函數(shù)名稱。自定義函數(shù)的具體內(nèi)容可以繼續(xù)寫到createApp()函數(shù)內(nèi)部，放在methods屬性中。methods屬性中允許包含一個(gè)或多個(gè)函數(shù)，其語法結(jié)構(gòu)如下：1. constapp=Vue.createApp({2. data(){…內(nèi)容略…},3. methods:{4. 自定義函數(shù)1(){…內(nèi)容待補(bǔ)充…},5. 自定義函數(shù)2(){…內(nèi)容待補(bǔ)充…},6. …7. 自定義函數(shù)N(){…內(nèi)容待補(bǔ)充…}8. }9. })不妨嘗試修改index.html文件，追加帶有監(jiān)聽click事件的按鈕，當(dāng)單擊按鈕時(shí)讓問候文字發(fā)生變化，參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <p>{{msg}}</p>7. <button@click="greeting">ClickMe</button>8. </div>9. <script>10. constapp=Vue.createApp({11. data(){12. return{13. msg:"HelloVue!"http://初始值14. }15. },16. methods:{17. greeting(){18. this.msg="HelloVue3!"http://變更值19. }20. }21. })22. app.mount("#app")23. </script>24. </body>25. </html>重新預(yù)覽頁面，原先顯示的問候語是“HelloVue！”，單擊按鈕后顯示的問候語就變成了“HelloVue3！”，說明按鈕事件處理成功生效。此時(shí)就完成了一個(gè)最基礎(chǔ)的Vue3項(xiàng)目，這種通過data()方法和methods屬性的聲明方式被稱為Vue的選項(xiàng)式API。4)代碼重構(gòu)在Vue3中還有一種組合式API，這種方式更適合單頁面應(yīng)用。變量與函數(shù)的聲明可以更加靈活。修改后的index.html代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">…內(nèi)容略…</div>6. <script>7. const{createApp,ref}=Vue8. createApp({9. setup(){10. constmsg=ref("HelloVue!");11. constgreeting=()=>{12. msg.value="HelloVue3!";13. }14. return{15. msg,16. greeting17. }18. }19. }).mount("#app")20. </script>21. </body>22. </html>上述代碼修改的內(nèi)容總結(jié)如下：聲明createApp和ref函數(shù)，后續(xù)使用時(shí)不再需要加Vue.前綴；去掉data()和methods屬性，改成統(tǒng)一的setup()函數(shù)，將變量和函數(shù)都在其中聲明；需要在頁面上被調(diào)用的變量/函數(shù)都可以用const來進(jìn)行聲明，并統(tǒng)一在setup()函數(shù)的末尾return中登記；其他內(nèi)部變量/函數(shù)可以用let或var聲明，且無需寫到return內(nèi)。需要渲染在頁面上的變量用ref()聲明取值，用變量名.value修改值。直接用方法鏈把mount函數(shù)掛載到createApp函數(shù)后面。下一節(jié)將進(jìn)入實(shí)戰(zhàn)開發(fā)環(huán)節(jié)，基于Vue3制作一個(gè)簡(jiǎn)易秒表程序。13.3基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)13.3.1創(chuàng)建項(xiàng)目結(jié)構(gòu)創(chuàng)建自定義名稱的項(xiàng)目文件夾stopwatchDemo，其內(nèi)部創(chuàng)建子目錄css和js，分別用于存放樣式文件style.css（自行新建）和vue3文件vue.global.js（通過CDN下載到本地），index.html文件的初始代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)</title>6. <linkrel="stylesheet"href="css/style.css"/>7. <scriptsrc="js/vue.global.js"></script>8. </head>9. <body>10. </body>11. </html>其中第5行的標(biāo)題名稱可以自定義；第6、7行分別是對(duì)樣式文件style.css和vue.global.js文件的引用聲明。13.3.2頁面設(shè)計(jì)1. 整體布局設(shè)計(jì)計(jì)劃制作一個(gè)卡片式的應(yīng)用，卡片內(nèi)分為上下結(jié)構(gòu)：上面是時(shí)間展示區(qū)域，用于顯示當(dāng)前秒表的讀數(shù)文本；下面是按鈕區(qū)域，用于顯示復(fù)位、啟動(dòng)和停止按鈕，其中左側(cè)是復(fù)位按鈕，右側(cè)是啟動(dòng)/停止按鈕彼此切換顯示。修改index.html，聲明根容器<divid="app">，并在其中聲明兩個(gè)<div>子容器，其中class取值分別為timeBox和btnBox用于表示時(shí)間展示區(qū)域和按鈕區(qū)域。參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)</title>6. <linkrel="stylesheet"href="css/style.css"/>7. <scriptsrc="js/vue.global.js"></script>8. </head>9. <body>10. <divid="app">11. <!--時(shí)間展示區(qū)域-->12. <divclass="timeBox"></div>13. <!--按鈕區(qū)域-->14. <divclass="btnBox"></div>15. </div>16. </body>17. </html>然后在style.css文件中聲明容器樣式，參考代碼如下：1. /*根容器樣式*/2. #app{3. width:300px;/*寬*/4. height:300px;/*高*/5. margin:20pxauto;/*外邊距上下20px，水平方向居中*/6. padding:20px;/*內(nèi)邊距四個(gè)邊均為20px*/7. background-color:#333;/*背景顏色*/8. display:flex;/*彈性布局*/9. flex-direction:column;/*垂直布局*/10. justify-content:space-around;/*垂直方向上均勻布局，兩頭的距離是中間的一半*/11. }然后繼續(xù)補(bǔ)充時(shí)間展示區(qū)域和按鈕區(qū)域的樣式，css代碼如下：1. /*時(shí)間展示區(qū)域*/2. .timeBox{3. width:100%;/*寬*/4. height:60px;/*高*/5. border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/6. }7. /*按鈕區(qū)域*/8. .btnBox{9. width:100%;/*寬*/10. height:80px;/*高*/11. border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/12. }為了方便觀看兩個(gè)子區(qū)域所在位置，這里第5、11行均使用border屬性為其臨時(shí)添加了1px粗細(xì)的實(shí)線紅色邊框，全部做完后可以去掉此行代碼。此時(shí)可預(yù)覽頁面。2. 時(shí)間展示區(qū)域設(shè)計(jì)在index.html中臨時(shí)添加秒表數(shù)據(jù)，參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <!--時(shí)間展示區(qū)域-->7. <divclass="timeBox">00:00.00</div>8. <!--按鈕區(qū)域-->9. <divclass="btnBox"></div>10. </div>11. </body>12. </html>這里臨時(shí)用“00:00.00”表示0分0.00秒，小數(shù)點(diǎn)后精確到0.01秒。在style.css中補(bǔ)充時(shí)間展示區(qū)域的樣式，主要是設(shè)置字體大小和顏色，參考代碼如下：1. /*時(shí)間展示區(qū)域*/2. .timeBox{3. width:100%;/*寬*/4. height:60px;/*高*/5. border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/6. color:white;/*文本顏色*/7. font-size:40px;/*字體大小*/8. text-align:center;/*水平方向居中*/9. }此時(shí)可預(yù)覽頁面。3. 按鈕區(qū)域設(shè)計(jì)在index.html中添加按鈕，參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <!--時(shí)間展示區(qū)域-->7. <divclass="timeBox">00:00.00</div>8. <!--按鈕區(qū)域-->9. <divclass="btnBox">10. <!--左邊按鈕-->11. <button>復(fù)位</button>12. <!--右邊按鈕-->13. <buttonclass="greenBtn">啟動(dòng)</button>14. <!--<buttonclass="redBtn">停止</button>-->15. </div>16. </div>17. </body>18. </html>按鈕需要一左一右顯示，左邊是“復(fù)位”按鈕，右邊是“啟動(dòng)”按鈕和“停止”按鈕二選一顯示（頁面初始顯示“啟動(dòng)”按鈕，單擊“啟動(dòng)”按鈕后秒表開始計(jì)時(shí)，此時(shí)顯示“停止”按鈕）。因此暫時(shí)注釋掉“停止”按鈕相關(guān)代碼，先看頁面初始效果。這里為右邊兩個(gè)按鈕設(shè)置class屬性分別為greenBtn和redBtn，后續(xù)將在css代碼中補(bǔ)充為綠色主題和紅色主題按鈕樣式。在style.css的按鈕區(qū)域樣式中補(bǔ)充彈性布局樣式，參考代碼如下：1. /*按鈕區(qū)域*/2. .btnBox{3. width:100%;/*寬*/4. height:80px;/*高*/5. border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/6. display:flex;/*彈性布局（默認(rèn)水平布局）*/7. justify-content:space-between; /*兩端對(duì)齊*/8. }在style.css中補(bǔ)充按鈕的通用樣式，參考代碼如下：1. /*按鈕通用樣式*/2. button{3. width:80px;/*寬*/4. height:80px;/*高*/5. border:none;/*去掉邊框*/6. border-radius:50%;/*圓角邊框*/7. cursor:pointer;/*鼠標(biāo)為手狀指針*/8. font-size:20px;/*字體大小*/9. }在style.css中繼續(xù)補(bǔ)充綠、紅主題顏色按鈕樣式，參考代碼如下：1. /*綠色主題按鈕*/2. .greenBtn{3. background-color:lightgreen;/*背景顏色淺綠*/4. color:darkgreen;/*文本顏色深綠*/5. }6. /*紅色主題按鈕*/7. .redBtn{8. background-color:pink;/*背景顏色粉紅*/9. color:darkred;/*文本顏色深紅*/10. }此時(shí)樣式代碼就已經(jīng)全部完成，可以把時(shí)間展示區(qū)域和按鈕區(qū)域樣式中的border屬性全部去掉了。預(yù)覽頁面效果時(shí)由于需要考慮兩種狀態(tài)，可以分別注釋掉“停止”按鈕和“啟動(dòng)”按鈕的相關(guān)HTML代碼，每次只預(yù)覽其中一個(gè)按鈕的頁面效果。接下來就可以進(jìn)行邏輯實(shí)現(xiàn)了，我們將使用Vue3框架應(yīng)用來快速實(shí)現(xiàn)動(dòng)態(tài)效果。13.3.3邏輯實(shí)現(xiàn)1. 創(chuàng)建和掛載應(yīng)用修改index.html文件，追加<script>標(biāo)簽并在其中創(chuàng)建和掛載Vue3應(yīng)用，代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">…內(nèi)容略…</div>6. <script>7. const{createApp,ref}=Vue8. createApp({9. setup(){10. //待補(bǔ)充11. }12. }).mount("#app")13. </script>14. </body>15. </html>這里我們使用setup()方法使代碼更為簡(jiǎn)潔，等待后續(xù)補(bǔ)充變量和函數(shù)。2. 動(dòng)態(tài)綁定數(shù)據(jù)修改index.html文件，在createApp()函數(shù)中初始化一些變量值，參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">…內(nèi)容略…</div>6. <script>7. const{createApp,ref}=Vue8. createApp({9. setup(){10. //聲明變量11. constformatTime=ref('00:00.00');//初始化時(shí)間展示12. constisStart=ref(false);//秒表是否已啟動(dòng)13. letcount=0;//當(dāng)前時(shí)間統(tǒng)計(jì)（每0.01秒+1）14. lettimer=null;//JavaScript計(jì)時(shí)器15. 16. return{17. //變量18. formatTime,19. isStart20. }21. }22. }).mount("#app")23. </script>24. </body>25. </html>這里只有formatTime和isStart變量需要?jiǎng)討B(tài)綁定到頁面上，因此使用const和ref()來進(jìn)行聲明，并放在了return內(nèi)部；其余兩個(gè)變量count和timer只需在<script>內(nèi)部輔助使用，使用let或者var聲明即可。修改HTML中的時(shí)間展示區(qū)域，將其中的時(shí)間數(shù)據(jù)"00:00.00"換成變量{{formatTime}}；修改按鈕區(qū)域中右側(cè)兩個(gè)按鈕組件，使用v-if和v-else屬性使它們根據(jù)秒表啟動(dòng)狀態(tài)變量isStart的取值只顯示其中一個(gè)。index.html代碼修改如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <!--時(shí)間展示區(qū)域-->7. <divclass="timeBox">{{formatTime}}</div>8. <!--按鈕區(qū)域-->9. <divclass="btnBox">10. <!--左邊按鈕（…內(nèi)容略…）-->11. <!--右邊按鈕-->12. <buttonv-if="!isStart"class="greenBtn">啟動(dòng)</button>13. <buttonv-elseclass="redBtn">停止</button>14. </div>15. </div>16. <script>…內(nèi)容略…</script>17. </body>18. </html>此時(shí)預(yù)覽應(yīng)該還是和原先效果相同，但實(shí)際上數(shù)據(jù)已經(jīng)轉(zhuǎn)化為動(dòng)態(tài)渲染了。3. 啟動(dòng)/停止按鈕事件修改index.html代碼，為右邊的啟動(dòng)/停止按鈕添加click監(jiān)聽事件，分別觸發(fā)自定義函數(shù)start和stop。參考代碼如下：1. <!DOCTYPEhtml>2. <html>3. <head>…內(nèi)容略…</head>4. <body>5. <divid="app">6. <!--時(shí)間展示區(qū)域（…內(nèi)容略…）-->7. <!--按鈕區(qū)域-->8. <divclass="btnBox">9. <!--左邊按鈕（…內(nèi)容略…）-->10. <!--右邊按鈕-->11. <buttonv-if="!isStart"class="greenBtn"@click="start">啟動(dòng)</button>12. <buttonv-elseclass="redBtn"@click="stop">停止</button>13. </div> 14. </div>15. <script>16. const{createApp,ref}=Vue17. createApp({18. setup(){19. //聲明變量（…內(nèi)容略…）20. //啟動(dòng)按鈕事件21. conststart=()=>{22. isStart.value=true;//秒表已啟動(dòng)23. //每隔0.01秒（10毫秒）執(zhí)行一次24. timer=setInterval(()=>{25. count++;//每次計(jì)數(shù)器+126. letm=Math.floor(count/100/60);//計(jì)算分27. lets=Math.floor(count/100-m*60); //計(jì)算秒28. letms=count%100;//計(jì)算秒的2位小數(shù)29. //如果數(shù)字是個(gè)位數(shù)，十位補(bǔ)030. if(m<10)m="0"+m;31. if(s<10)s="0"+s;32. if(ms<10)ms="0"+ms;33. //更新頁面顯示時(shí)間34. format