第13章前端框架實(shí)戰(zhàn)·

基于Vue3.x的秒表程序的設(shè)計(jì)與實(shí)現(xiàn)主講人：XX老師目錄13.1前端框架簡(jiǎn)介13.2Vue3入門13.3基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)13.1前端框架簡(jiǎn)介13.1.1什么是前端框架 13.1.2基礎(chǔ)前端框架 13.1.3高級(jí)前端框架 13.1.1什么是前端框架前端框架這一概念最早是在建筑學(xué)領(lǐng)域被提及，它指的是一種可復(fù)用的設(shè)計(jì)構(gòu)建。在Web開發(fā)領(lǐng)域，前端框架指的是一種基于HTML、CSS、JavaScript技術(shù)封裝的工具套件，用于幫助開發(fā)者提高開發(fā)效率，快速搭建出Web頁面和相關(guān)的交互事件。13.1.1什么是前端框架前端框架一般會(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ù)庫，后者是全球最受歡迎的前端組件庫之一。13.1.2基礎(chǔ)前端框架 1jQueryjQuery這個(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的使用方式。13.1.2基礎(chǔ)前端框架 2BootstrapBootstrap是全球最受歡迎的前端組件庫之一，適合用于開發(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被稱為三大主流前端框架。13.1.3高級(jí)前端框架 1VueVue的發(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)目有：阿里巴巴、小米、餓了么、嗶哩嗶哩等。13.1.3高級(jí)前端框架 2ReactReact最初是由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)等。13.1.3高級(jí)前端框架 3AngularAngular誕生于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入門 13.2.1Vue3的安裝 13.2.2第一個(gè)基于Vue3的應(yīng)用13.2.1Vue3的安裝Vue3有兩種安裝方式，開發(fā)者可以根據(jù)自己的實(shí)際情況任選一種。13.2.1Vue3的安裝方法一：通過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.js13.2.1Vue3的安裝方法一：通過CDN引用cont.以u(píng)npkgCDN為例，在網(wǎng)頁文件中的引用示例代碼如下：注：如果擔(dān)心網(wǎng)絡(luò)波動(dòng)等原因，也可以將文件下載到本地后進(jìn)行引用，效果完全一樣。<scriptsrc="/vue@3/dist/vue.global.js"></script>13.2.1Vue3的安裝方法一：通過CDN引用cont.例如本地目錄為js，在網(wǎng)頁文件中的引用示例代碼如下：其中vue.global.js文件的名稱可自行修改。<scriptsrc="js/vue.global.js"></script>13.2.1Vue3的安裝方法二：通過npm或yarn安裝目前已經(jīng)支持使用npm或yarn命令安裝官方的vue手腳架，語法如下：后續(xù)還需要錄入項(xiàng)目名稱，然后選一些配置選項(xiàng)來完成項(xiàng)目創(chuàng)建。#通過npm安裝npmcreatevue@latest#通過yarn安裝yarncreatevue@latest由于本章旨在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)用 創(chuàng)建項(xiàng)目結(jié)構(gòu)編寫段落文字Vue框架應(yīng)用13.2.2第一個(gè)基于Vue3的應(yīng)用 創(chuàng)建項(xiàng)目結(jié)構(gòu)創(chuàng)建自定義名稱的項(xiàng)目文件夾firstVueDemo，其內(nèi)部創(chuàng)建子目錄js用于存放文件vue.global.js（通過CDN下載到本地），并新建index.html作為入口文件。項(xiàng)目的目錄結(jié)構(gòu)如下：13.2.2第一個(gè)基于Vue3的應(yīng)用 創(chuàng)建項(xiàng)目結(jié)構(gòu)cont.index.html文件的初始代碼如下：其中第5行的標(biāo)題名稱可以自定義；第6行是對(duì)vue.global.js文件的引用聲明。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的第一個(gè)Vue項(xiàng)目</title><scriptsrc="js/vue.global.js"></script></head><body></body></html>13.2.2第一個(gè)基于Vue3的應(yīng)用 2.編寫段落文字在index.html的<body>與</body>標(biāo)簽之間聲明一個(gè)<div>組件，并為其定義id屬性，屬性值可自定義，一般可以聲明為id="app"表示Vue3框架開發(fā)的最外層容器。在<div>容器內(nèi)使用段落元素<p>補(bǔ)充一些問候語，參考代碼如下：…<body> <divid="app"> <p>HelloWorld!</p> </div></body>…13.2.2第一個(gè)基于Vue3的應(yīng)用 2.編寫段落文字cont.在瀏覽器中訪問該網(wǎng)頁文件，運(yùn)行效果如下圖所示。此時(shí)就是一個(gè)普通網(wǎng)頁，實(shí)際尚未用到Vue3的相關(guān)功能。下一節(jié)我們將對(duì)該頁面進(jìn)行Vue框架改造，使其成為一個(gè)基于Vue3的應(yīng)用頁面。13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-1)創(chuàng)建和掛載應(yīng)用Vue3中使用createApp函數(shù)來創(chuàng)建應(yīng)用，其語法格式如下：修改index.html，追加<script>標(biāo)簽進(jìn)行創(chuàng)建應(yīng)用聲明，代碼如下：constapp=Vue.createApp({/*選項(xiàng)*/}) …<body> <divid="app">…內(nèi)容略…</div> <script>

constapp=Vue.createApp({}) </script> </body>…13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-1)創(chuàng)建和掛載應(yīng)用cont.Vue3中使用mount函數(shù)來掛載應(yīng)用到頁面模塊上，其語法格式如下：其中#app指的是通過ID選擇器找到網(wǎng)頁上id="app"的組件，并將應(yīng)用掛在到其中。app.mount('#app')13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-1)創(chuàng)建和掛載應(yīng)用cont.修改index.html文件，追加掛載應(yīng)用語句，代碼如下： …<body> <divid="app">…內(nèi)容略…</div> <script> constapp=Vue.createApp({}) app.mount("#app") </script> </body>…此時(shí)應(yīng)用就掛載好了，下一節(jié)將介紹Vue3的模板語法——數(shù)據(jù)動(dòng)態(tài)綁定。13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-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ù)，例如：此時(shí)頁面上不會(huì)顯示msg這個(gè)詞，而是會(huì)顯示這個(gè)變量對(duì)應(yīng)的值。<p>{{msg}}</p>13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-2)數(shù)據(jù)動(dòng)態(tài)綁定cont.需要聲明的變量可以繼續(xù)寫到createApp函數(shù)內(nèi)部，放在data()方法中。data()方法中允許包含一個(gè)或多個(gè)動(dòng)態(tài)變量，其語法結(jié)構(gòu)如下：constapp=Vue.createApp({ data(){return{

變量1:值1,變量2:值2,…變量N:值N}}})13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-2)數(shù)據(jù)動(dòng)態(tài)綁定cont.將index.html中的段落組件內(nèi)的問候語句換成變量{{msg}}，并在createApp函數(shù)的data()方法中補(bǔ)充對(duì)應(yīng)的變量聲明。 <body> <divid="app"> <p>{{msg}}</p> </div> <script> constapp=Vue.createApp({ data(){ return{ msg:"HelloVue!"http://取值可自定義 } } }) app.mount("#app") </script> </body>13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-2)數(shù)據(jù)動(dòng)態(tài)綁定cont.在瀏覽器中訪問該網(wǎng)頁文件，運(yùn)行效果如下圖所示。此時(shí)雖然頁面上看到同樣的文字，但是已經(jīng)變成動(dòng)態(tài)渲染的結(jié)果了。開發(fā)者可以試著修改data()中的msg取值，保存后重新預(yù)覽看頁面是否發(fā)生變化。13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-3)事件處理在Vue3中使用v-on指令來監(jiān)聽DOM事件，該指令也可以縮寫為@符號(hào)。例如監(jiān)聽按鈕的click單擊事件，寫法如下：以上兩種寫法均可，其中methodName可以換成需要執(zhí)行的自定義函數(shù)名稱。<buttonv-on:click="methodName">按鈕</button>或<button@click="methodName">按鈕</button>13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-3)事件處理cont.自定義函數(shù)的具體內(nèi)容可以繼續(xù)寫到createApp()函數(shù)內(nèi)部，放在methods屬性中。methods屬性中允許包含一個(gè)或多個(gè)函數(shù)，其語法結(jié)構(gòu)如下：constapp=Vue.createApp({ data(){…內(nèi)容略…}, methods:{

自定義函數(shù)1(){…內(nèi)容待補(bǔ)充…},

自定義函數(shù)2(){…內(nèi)容待補(bǔ)充…},…

自定義函數(shù)N(){…內(nèi)容待補(bǔ)充…} }})13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-3)事件處理cont.不妨嘗試修改index.html文件，追加帶有監(jiān)聽click事件的按鈕，當(dāng)單擊按鈕時(shí)讓問候文字發(fā)生變化，參考代碼如下：<body> <divid="app"> <p>{{msg}}</p> <button@click="greeting">ClickMe</button> </div> <script> constapp=Vue.createApp({ data(){ return{ msg:"HelloVue!"http://初始值 } }, methods:{ greeting(){ this.msg="HelloVue3!"http://變更值 } } }) app.mount("#app") </script></body>13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-3)事件處理cont.重新預(yù)覽頁面效果如下圖所示。由圖可見，原先顯示的問候語是“HelloVue！”，單擊按鈕后顯示的問候語就變成了“HelloVue3！”，說明按鈕事件處理成功生效。此時(shí)就完成了一個(gè)最基礎(chǔ)的Vue3項(xiàng)目，這種通過data()方法和methods屬性的聲明方式被稱為Vue的選項(xiàng)式API。13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-4)代碼重構(gòu)在Vue3中還有一種組合式API，這種方式更適合單頁面應(yīng)用。變量與函數(shù)的聲明可以更加靈活。修改后的index.html代碼如下： <body> <divid="app">…內(nèi)容略…</div> <script> const{createApp,ref}=Vue createApp({ setup(){ constmsg=ref("HelloVue!"); constgreeting=()=>{ msg.value="HelloVue3!"; } return{ msg, greeting } } }).mount("#app") </script> </body>13.2.2第一個(gè)基于Vue3的應(yīng)用 3.Vue框架應(yīng)用-4)代碼重構(gòu)cont.

上述代碼修改的內(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) 13.3.2頁面設(shè)計(jì) 13.3.3邏輯實(shí)現(xiàn) 13.3.4完整代碼展示（略，見書） 13.3.1創(chuàng)建項(xiàng)目結(jié)構(gòu) 首先進(jìn)行項(xiàng)目結(jié)構(gòu)的創(chuàng)建。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下載到本地）目錄結(jié)構(gòu)如下：13.3.1創(chuàng)建項(xiàng)目結(jié)構(gòu) index.html文件的初始代碼如下：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>基于Vue3的簡(jiǎn)易秒表的設(shè)計(jì)與實(shí)現(xiàn)</title> <linkrel="stylesheet"href="css/style.css"/> <scriptsrc="js/vue.global.js"></script> </head> <body> </body></html>其中第5行的標(biāo)題名稱可以自定義；第6、7行分別是對(duì)樣式文件style.css和vue.global.js文件的引用聲明。13.3.2頁面設(shè)計(jì) 整體布局設(shè)計(jì)時(shí)間展示區(qū)域設(shè)計(jì)按鈕區(qū)域設(shè)計(jì)13.3.2頁面設(shè)計(jì) 整體布局設(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)/停止按鈕彼此切換顯示。13.3.2頁面設(shè)計(jì) 整體布局設(shè)計(jì)cont.修改index.html，聲明根容器<divid="app">，并在其中聲明兩個(gè)<div>子容器，其中class取值分別為timeBox和btnBox用于表示時(shí)間展示區(qū)域和按鈕區(qū)域。參考代碼如下： <body> <divid="app"> <!--時(shí)間展示區(qū)域--> <divclass="timeBox"></div> <!--按鈕區(qū)域--> <divclass="btnBox"></div> </div> </body>13.3.2頁面設(shè)計(jì) 整體布局設(shè)計(jì)cont.然后在style.css文件中聲明容器樣式，參考代碼如下：/*根容器樣式*/#app{ width:300px;/*寬*/ height:300px;/*高*/ margin:20pxauto;/*外邊距上下20px，水平方向居中*/ padding:20px;/*內(nèi)邊距四個(gè)邊均為20px*/ background-color:#333;/*背景顏色*/ display:flex;/*彈性布局*/ flex-direction:column;/*垂直布局*/ justify-content:space-around;/*垂直方向上均勻布局，兩頭的距離是中間的一半*/}13.3.2頁面設(shè)計(jì) 整體布局設(shè)計(jì)cont.然后繼續(xù)補(bǔ)充時(shí)間展示區(qū)域和按鈕區(qū)域的樣式，css代碼如下：/*時(shí)間展示區(qū)域*/.timeBox{ width:100%;/*寬*/ height:60px;/*高*/ border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/}/*按鈕區(qū)域*/.btnBox{ width:100%;/*寬*/ height:80px;/*高*/ border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/}為了方便觀看兩個(gè)子區(qū)域所在位置，這里第5、11行均使用border屬性為其臨時(shí)添加了1px粗細(xì)的實(shí)線紅色邊框，全部做完后可以去掉此行代碼。13.3.2頁面設(shè)計(jì) 整體布局設(shè)計(jì)cont.此時(shí)預(yù)覽效果如圖所示。13.3.2頁面設(shè)計(jì) 2.時(shí)間展示區(qū)域設(shè)計(jì)在index.html中臨時(shí)添加秒表數(shù)據(jù)，參考代碼如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app"> <!--時(shí)間展示區(qū)域--> <divclass="timeBox">00:00.00</div> <!--按鈕區(qū)域--> <divclass="btnBox"></div> </div> </body></html>這里臨時(shí)用“00:00.00”表示0分0.00秒，小數(shù)點(diǎn)后精確到0.01秒。13.3.2頁面設(shè)計(jì) 2.時(shí)間展示區(qū)域設(shè)計(jì)cont.在style.css中補(bǔ)充時(shí)間展示區(qū)域的樣式，主要是設(shè)置字體大小和顏色，參考代碼如下：/*時(shí)間展示區(qū)域*/.timeBox{ width:100%;/*寬*/ height:60px;/*高*/ border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/ color:white;/*文本顏色*/ font-size:40px;/*字體大小*/ text-align:center;/*水平方向居中*/}13.3.2頁面設(shè)計(jì) 2.時(shí)間展示區(qū)域設(shè)計(jì)cont.預(yù)覽效果如圖所示。13.3.2頁面設(shè)計(jì) 3.按鈕區(qū)域設(shè)計(jì)在index.html中添加按鈕，參考代碼如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app"> <!--時(shí)間展示區(qū)域--> <divclass="timeBox">00:00.00</div> <!--按鈕區(qū)域--> <divclass="btnBox"> <!--左邊按鈕--> <button>復(fù)位</button> <!--右邊按鈕--> <buttonclass="greenBtn">啟動(dòng)</button> <!--<buttonclass="redBtn">停止</button>--> </div> </div> </body></html>按鈕需要一左一右顯示，左邊是“復(fù)位”按鈕，右邊是“啟動(dòng)”按鈕和“停止”按鈕二選一顯示（頁面初始顯示“啟動(dòng)”按鈕，單擊“啟動(dòng)”按鈕后秒表開始計(jì)時(shí)，此時(shí)顯示“停止”按鈕）。因此暫時(shí)注釋掉“停止”按鈕相關(guān)代碼，先看頁面初始效果。這里為右邊兩個(gè)按鈕設(shè)置class屬性分別為greenBtn和redBtn，后續(xù)將在css代碼中補(bǔ)充為綠色主題和紅色主題按鈕樣式。13.3.2頁面設(shè)計(jì) 3.按鈕區(qū)域設(shè)計(jì)cont.在style.css的按鈕區(qū)域樣式中補(bǔ)充彈性布局樣式，參考代碼如下：/*按鈕區(qū)域*/.btnBox{ width:100%;/*寬*/ height:80px;/*高*/ border:1pxsolidred;/*臨時(shí)：1px紅色邊框*/ display:flex;/*彈性布局（默認(rèn)水平布局）*/ justify-content:space-between; /*兩端對(duì)齊*/}13.3.2頁面設(shè)計(jì) 3.按鈕區(qū)域設(shè)計(jì)cont.在style.css中補(bǔ)充按鈕的通用樣式，參考代碼如下：/*按鈕通用樣式*/button{ width:80px;/*寬*/ height:80px;/*高*/ border:none;/*去掉邊框*/ border-radius:50%;/*圓角邊框*/ cursor:pointer;/*鼠標(biāo)為手狀指針*/ font-size:20px;/*字體大小*/}13.3.2頁面設(shè)計(jì) 3.按鈕區(qū)域設(shè)計(jì)cont.在style.css中繼續(xù)補(bǔ)充綠、紅主題顏色按鈕樣式，參考代碼如下：/*綠色主題按鈕*/.greenBtn{ background-color:lightgreen;/*背景顏色淺綠*/ color:darkgreen;/*文本顏色深綠*/}/*紅色主題按鈕*/.redBtn{ background-color:pink;/*背景顏色粉紅*/ color:darkred;/*文本顏色深紅*/}此時(shí)樣式代碼就已經(jīng)全部完成，可以把時(shí)間展示區(qū)域和按鈕區(qū)域樣式中的border屬性全部去掉了。13.3.2頁面設(shè)計(jì) 3.按鈕區(qū)域設(shè)計(jì)cont.預(yù)覽頁面效果時(shí)由于需要考慮兩種狀態(tài)，可以分別注釋掉“停止”按鈕和“啟動(dòng)”按鈕的相關(guān)HTML代碼，每次只預(yù)覽其中一個(gè)按鈕的頁面效果，最終預(yù)覽效果如圖所示。接下來就可以進(jìn)行邏輯實(shí)現(xiàn)了，我們將使用Vue3框架應(yīng)用來快速實(shí)現(xiàn)動(dòng)態(tài)效果。13.3.3邏輯實(shí)現(xiàn) 創(chuàng)建和掛載應(yīng)用動(dòng)態(tài)綁定數(shù)據(jù)啟動(dòng)/停止按鈕事件復(fù)位按鈕事件13.3.3邏輯實(shí)現(xiàn) 創(chuàng)建和掛載應(yīng)用修改index.html文件，追加<script>標(biāo)簽并在其中創(chuàng)建和掛載Vue3應(yīng)用，代碼如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app">…內(nèi)容略…</div> <script> const{createApp,ref}=Vue createApp({ setup(){ //待補(bǔ)充 } }).mount("#app") </script> </body></html>這里我們使用setup()方法使代碼更為簡(jiǎn)潔，等待后續(xù)補(bǔ)充變量和函數(shù)。13.3.3邏輯實(shí)現(xiàn) 動(dòng)態(tài)綁定數(shù)據(jù)修改index.html文件，在createApp()函數(shù)中初始化一些變量值，參考代碼如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app">…內(nèi)容略…</div> <script> const{createApp,ref}=Vue createApp({ setup(){ //聲明變量constformatTime=ref('00:00.00');//初始化時(shí)間展示 constisStart=ref(false);//秒表是否已啟動(dòng) letcount=0;//當(dāng)前時(shí)間統(tǒng)計(jì)（每0.01秒+1） lettimer=null;//JavaScript計(jì)時(shí)器

return{ //變量 formatTime, isStart } } }).mount("#app") </script> </body></html>這里只有formatTime和isStart變量需要?jiǎng)討B(tài)綁定到頁面上，因此使用const和ref()來進(jìn)行聲明，并放在了return內(nèi)部；其余兩個(gè)變量count和timer只需在<script>內(nèi)部輔助使用，使用let或者var聲明即可。13.3.3邏輯實(shí)現(xiàn) 動(dòng)態(tài)綁定數(shù)據(jù)cont.修改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代碼修改如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app"> <!--時(shí)間展示區(qū)域--> <divclass="timeBox">{{formatTime}}

</div> <!--按鈕區(qū)域--> <divclass="btnBox"> <!--左邊按鈕（…內(nèi)容略…）--> <!--右邊按鈕--> <buttonv-if="!isStart"

class="greenBtn">啟動(dòng)</button> <buttonv-else

class="redBtn">停止</button> </div> </div> <script>…內(nèi)容略…</script> </body></html>此時(shí)預(yù)覽應(yīng)該還是和原先效果相同，但實(shí)際上數(shù)據(jù)已經(jīng)轉(zhuǎn)化為動(dòng)態(tài)渲染了。13.3.3邏輯實(shí)現(xiàn) 3.啟動(dòng)/停止按鈕事件修改index.html代碼，為右邊的啟動(dòng)/停止按鈕添加click監(jiān)聽事件，分別觸發(fā)自定義函數(shù)start和stop。參考代碼如下：<!DOCTYPEhtml><html> <head>…內(nèi)容略…</head> <body> <divid="app"> <!--時(shí)間展示區(qū)域（…內(nèi)容略…）--> <!--按鈕區(qū)域--> <divclass="btnBox"> <!--左邊按鈕（…內(nèi)容略…）--> <!--右邊按鈕--> <buttonv-if="!isStart"class="greenBtn"@click="start">啟動(dòng)</button> <buttonv-elseclass="redBtn"@click="stop">停止</button> </div> </div>見下頁13.3.3邏輯實(shí)現(xiàn) 3.啟動(dòng)/停止按鈕事件cont. <script> const{createApp,ref}=Vue createApp({ setup(){ //聲明變量（…內(nèi)容略…） //啟動(dòng)按鈕事件 conststart=()=>{ isStart.value=true;//秒表已啟動(dòng) //每隔0.01秒（10毫秒）執(zhí)行一次 timer=setInterval(()=>{ count++;//每次計(jì)數(shù)器+1 letm=Math.floor(count/100/60);//計(jì)算分 lets=Math.floor(count/100-m*60); //計(jì)算秒 letms=count%100;//計(jì)算秒的2位小數(shù) //如果數(shù)字是個(gè)位數(shù)，十位補(bǔ)0 if(m<10)m="0"+m; if(s<10)s="0"+s; if(ms<10)ms="0"+ms; //更新頁面顯示時(shí)間