項(xiàng)目五制作“2048”小游戲163164任務(wù)1開發(fā)游戲界面布局

任務(wù)2開發(fā)游戲邏輯任務(wù)3開發(fā)游戲交互開發(fā)游戲界面布局任務(wù)11651.?能定義并使用CSS變量。2.?能根據(jù)UI效果圖編寫布局和樣式代碼。166本任務(wù)主要內(nèi)容是使用HTML、CSS技術(shù)根據(jù)UI效果圖樣式創(chuàng)建布局文件和樣式文件，并編寫相應(yīng)的代碼，實(shí)現(xiàn)游戲場景的靜態(tài)布局效果，為后續(xù)JavaScript動(dòng)態(tài)交互開發(fā)打下基礎(chǔ)。167一、變量的定義在CSS代碼中可定義變量，并為其分配相應(yīng)的值，示例代碼如下。上述代碼定義了兩個(gè)變量，--primary-color和

--font-size，并分別指定了對應(yīng)的值。168二、變量的使用在樣式代碼中使用var()函數(shù)可引用變量，示例代碼如下。上述代碼將變量--primary-color和--font-size應(yīng)用于.button元素的背景顏色和字號大小。169三、變量的修改可以使用CSS的:root偽類或:var()偽類修改變量的值，示例代碼如下。上述代碼使用:root偽類將變量

--primary-color的值從#007bff更改為#ff3b3b。170四、變量的繼承使用inherit關(guān)鍵字可將變量繼承到子元素中，示例代碼如下。在上述代碼中，.child元素從其父元素.parent中繼承font-size變量的值。171

開發(fā)游戲邏輯任務(wù)21721.?能根據(jù)需求定義變量。2.?能定義初始化項(xiàng)目函數(shù)。3.?能隨機(jī)生成游戲初始狀態(tài)。173本任務(wù)主要內(nèi)容是使用JavaScript定義游戲相關(guān)變量，定義初始化游戲函數(shù)，并調(diào)用初始化游戲函數(shù)生成游戲初始狀態(tài)。174在使用CSS選擇器引擎的querySelectorAll()方法時(shí)，可獲取與其參數(shù)匹配的DOM元素。querySelectorAll()方法是querySelector()方法的增強(qiáng)版本，可以接受一個(gè)或多個(gè)CSS選擇器作為參數(shù)，并返回與這些選擇器匹配的所有元素，示例代碼如下。在上述代碼中，querySelectorAll()方法根據(jù).class-name選擇器獲取所有匹配的DOM元素，返回一個(gè)NodeList對象，并將其存儲在elements變量中。175如果需要將NodeList對象轉(zhuǎn)換為普通數(shù)組，可以使用Array.from()方法，示例代碼如下。NodeList對象與普通數(shù)組有所不同，兩者的差異主要體現(xiàn)在以下幾個(gè)方面。（1）構(gòu)造方法不同。NodeList對象是通過querySelectorAll()方法返回的，而普通數(shù)組是通過Array()構(gòu)造函數(shù)創(chuàng)建的。176（2）元素存儲方式不同。NodeList對象存儲的是一個(gè)DOM節(jié)點(diǎn)列表，而普通數(shù)組存儲的是一個(gè)數(shù)字或其他類型對象的列表。（3）方法不同。NodeList對象和普通數(shù)組都有一些常用的方法，如push()、pop()、shift()等，但NodeList對象還具有一些與DOM節(jié)點(diǎn)操作相關(guān)的方法，如item()、append()、remove()等。（4）可伸縮性不同。NodeList對象的大小可以動(dòng)態(tài)改變，而普通數(shù)組的大小是固定不變的。177開發(fā)游戲交互任務(wù)31781.?熟練使用switch分支語句。2.?能監(jiān)聽用戶的鍵盤輸入事件。179本任務(wù)主要內(nèi)容是監(jiān)聽用戶的鍵盤輸入事件，并使用switch語句根據(jù)用戶按下的鍵調(diào)用相應(yīng)的處理函數(shù)。180一、鍵盤事件的類型JavaScript鍵盤事件主要分為以下三類。（1）keydown：表示用戶按下按鍵時(shí)觸發(fā)的事件。（2）keypress：表示用戶按下鍵盤上的某個(gè)鍵并產(chǎn)生一個(gè)字符時(shí)觸發(fā)的事件。注意，某些特殊鍵（如方向鍵、功能鍵等）可能不會(huì)觸發(fā)此事件。（3）keyup：表示用戶按下鍵盤上的某個(gè)鍵而后松開時(shí)觸發(fā)的事件。181二、鍵盤事件的監(jiān)聽當(dāng)用戶按下鍵盤上的某個(gè)鍵時(shí)，window.onkeydown函數(shù)會(huì)被觸發(fā)，這個(gè)函數(shù)可以執(zhí)行需要的操作，示例代碼如下。上述代碼通過event.keyCode獲取到按下的鍵的鍵碼，并將其保存到變量keyCode中，然后判斷keyCode的值，若其值為13（表示Enter鍵的鍵碼），則彈窗顯示“您按下了Enter鍵！”。182三、按鍵信息的獲取獲取按鍵信息可以通過event.key和event.keyCode兩種方法實(shí)現(xiàn)，兩者都表示鍵盤事件的屬性，其不同之處為：event.key描述的是按鍵的文本表示，如字母、數(shù)字、功能鍵等；而event.keyCode描述的是按鍵的鍵碼，如Enter鍵的鍵碼為13，空格鍵的鍵碼為32，以此類推。常用按鍵的keyCode與key對應(yīng)表見下表。183184常用按鍵的keyCode與key對應(yīng)表項(xiàng)目六使用Vue框架開發(fā)企業(yè)門戶網(wǎng)站185186任務(wù)1搭建Vue開發(fā)環(huán)境任務(wù)2創(chuàng)建企業(yè)門戶項(xiàng)目任務(wù)3定義與使用Vue組件任務(wù)4開發(fā)首頁頁面任務(wù)5開發(fā)“產(chǎn)品介紹”頁面任務(wù)6開發(fā)“聯(lián)系我們”頁面搭建Vue開發(fā)環(huán)境任務(wù)11871.?了解前端框架的概念。2.?了解Vue框架的特點(diǎn)。3.?了解MVVM軟件架構(gòu)設(shè)計(jì)模式。4.?能使用Vue?CLI工具創(chuàng)建Vue項(xiàng)目。188本任務(wù)的內(nèi)容主要是安裝和配置Vue框架開發(fā)和運(yùn)行所需的Node.js環(huán)境，安裝VueCLI工具，為后期創(chuàng)建Vue項(xiàng)目做好準(zhǔn)備。189一、前端框架1.前端框架的特點(diǎn)前端框架是一種為了簡化和加速前端開發(fā)而創(chuàng)建的工具、庫和軟件系統(tǒng)。它提供了一套結(jié)構(gòu)、規(guī)范和工具，用于組織、管理和展示UI元素，并協(xié)助開發(fā)人員構(gòu)建交互性高、可維護(hù)且具有良好用戶體驗(yàn)的網(wǎng)頁或應(yīng)用程序。190前端框架主要包含以下組成部分。（1）模板引擎（TemplateEngine）模板引擎用于定義和渲染UI的布局和內(nèi)容，它可以將數(shù)據(jù)動(dòng)態(tài)地綁定到界面上，實(shí)現(xiàn)數(shù)據(jù)與視圖的同步更新。（2）組件系統(tǒng)（ComponentSystem）組件系統(tǒng)提供了一種組織、復(fù)用和分割UI的方法。將界面拆分成獨(dú)立的組件，可以更好地管理代碼，提高代碼的可維護(hù)性和重用性。組件系統(tǒng)包括路由管理（RoutingManagement）、狀態(tài)管理（StateManagement）、構(gòu)建工具（BuildTools）和響應(yīng)式設(shè)計(jì)（ResponsiveDesign）。1912.前端框架的種類（1）Vue框架Vue（發(fā)音為/vju:/）框架是一款用于構(gòu)建UI的JavaScript框架。它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，能幫助開發(fā)人員高效地開發(fā)UI。無論是構(gòu)建簡單還是復(fù)雜的界面，Vue框架都可以勝任。Vue框架的官方網(wǎng)站，Vue框架的圖標(biāo)如圖所示。192Vue框架的圖標(biāo)（2）React框架React框架是用于構(gòu)建UI的JavaScript庫，其核心理念是將UI分解成一系列可復(fù)用的組件，每個(gè)組件負(fù)責(zé)渲染頁面上的某一部分，且各個(gè)組件可以獨(dú)立更新而不影響其他部分。這種模塊化的結(jié)構(gòu)使代碼更易于理解和維護(hù)。React框架使用JSX（一種JavaScript的語法擴(kuò)展）來編寫組件，允許在同一個(gè)文件中混合HTML標(biāo)簽和JavaScript代碼，從而用更直觀的方式來描述頁面布局及其行為。React框架的官方網(wǎng)站，其圖標(biāo)如圖所示。193React框架的圖標(biāo)（3）AngularJS框架AngularJS框架誕生于2009年，由MiskoHevery等人創(chuàng)建，是一款構(gòu)建UI的前端框架，后為谷歌（Google）公司所收購。AngularJS框架是一個(gè)應(yīng)用設(shè)計(jì)框架與開發(fā)的平臺，用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用，通過新的屬性和表達(dá)式擴(kuò)展HTML，實(shí)現(xiàn)一套框架適用于多種平臺、移動(dòng)端和桌面端。AngularJS框架有著諸多特性，其中，最為核心的是MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等。Angular框架的圖標(biāo)如圖所示。194Angular框架的圖標(biāo)二、MVVM架構(gòu)設(shè)計(jì)模式MVVM（Model-View-ViewModel）是一種軟件架構(gòu)設(shè)計(jì)模式，也是一種簡化UI的事件驅(qū)動(dòng)編程方式。其中，Model為數(shù)據(jù)層，是各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控的部分，包含POJO結(jié)構(gòu)；View為視圖層，指前端UI，主要由HTML和CSS構(gòu)成；ViewModel

為視圖數(shù)據(jù)層，是數(shù)據(jù)層與視圖層的橋梁，實(shí)現(xiàn)了數(shù)據(jù)與視圖的分離。195在MVVM架構(gòu)設(shè)計(jì)模式下，Model和View之間沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，View數(shù)據(jù)的變化會(huì)同步到ViewModel上，ViewModel對數(shù)據(jù)的操作也會(huì)立即反映到View上。ViewModel發(fā)起異步請求通知Model對數(shù)據(jù)進(jìn)行處理，Model就將數(shù)據(jù)的處理結(jié)果回傳給ViewModel。MVVM模式的結(jié)構(gòu)如圖所示。196MVVM模式的結(jié)構(gòu)創(chuàng)建企業(yè)門戶項(xiàng)目任務(wù)21971.?了解單文件組件的特點(diǎn)。2.?了解Vue項(xiàng)目目錄結(jié)構(gòu)。3.?能創(chuàng)建自定義頁面。4.?能配置自定義路由。198本任務(wù)主要內(nèi)容是使用VueCLI工具創(chuàng)建項(xiàng)目，并使用npm命令啟動(dòng)該項(xiàng)目，按項(xiàng)目UI設(shè)計(jì)效果圖的要求創(chuàng)建項(xiàng)目所需頁面，并配置對應(yīng)的路由。199一、VueRouter的核心概念和功能VueRouter是Vue.js官方提供的路由器，用于在Vue應(yīng)用中實(shí)現(xiàn)單頁面應(yīng)用（SinglePageApplication，SPA）的路由功能，它允許開發(fā)人員通過定義路由規(guī)則和組件映射來管理不同URL路徑的渲染。VueRouter具有以下核心概念和功能。2001.路由器的實(shí)例創(chuàng)建一個(gè)VueRouter實(shí)例可初始化路由器。路由器實(shí)例可以與Vue根實(shí)例進(jìn)行關(guān)聯(lián)，并作為Vue應(yīng)用的插件使用。2.路由的規(guī)則路由規(guī)則由路徑和對應(yīng)的組件組成，使用路由規(guī)則可定義URL路徑與組件之間的關(guān)系。2013.路由的視圖在Vue組件中定義路由視圖的區(qū)域，可渲染與當(dāng)前URL路徑匹配的組件，可使用標(biāo)簽來展示匹配到的組件。4.路由的導(dǎo)航通過路由鏈接或編程式導(dǎo)航，可以在應(yīng)用程序中的不同頁面之間進(jìn)行導(dǎo)航?？梢允褂脴?biāo)簽創(chuàng)建帶有路由鏈接的導(dǎo)航菜單，也可以使用編程式導(dǎo)航函數(shù)進(jìn)行導(dǎo)航。2025.路由的參數(shù)在路由規(guī)則中定義動(dòng)態(tài)參數(shù)，可以根據(jù)不同參數(shù)的值加載相應(yīng)的組件。參數(shù)可以通過路由URL的占位符來進(jìn)行定義，其中“:id”為動(dòng)態(tài)參數(shù)。6.路由的嵌套創(chuàng)建嵌套的路由結(jié)構(gòu)，可在父級路由組件內(nèi)部定義子級路由規(guī)則和視圖，這種方式可以實(shí)現(xiàn)更復(fù)雜的應(yīng)用程序?qū)Ш胶晚撁娼Y(jié)構(gòu)。203二、VueRouter的模式VueRouter在創(chuàng)建路由器實(shí)例時(shí)，有Hash（音譯為哈希）模式和歷史模式兩種模式。1.Hash模式在Hash模式下，URL哈希標(biāo)記“#”后面的部分被視為路由器的狀態(tài)，“#/route”部分被稱為哈希路徑。瀏覽器不會(huì)將哈希路徑發(fā)送到服務(wù)器，因此可以在前端應(yīng)用中進(jìn)行路由狀態(tài)管理，而不會(huì)引起頁面刷新。它適用于單頁面應(yīng)用程序、需要兼容性和簡單部署的場景。然而，它的URL友好性和對搜索引擎優(yōu)化（SearchEngineOptimization，SEO）的影響在正式使用時(shí)是需要被考慮的，并且它無法直接定位到頁面的特定狀態(tài)。2042.歷史模式在歷史模式下，URL中不包含“#”符號。該模式使用瀏覽器的HistoryAPI來管理路由狀態(tài)，這意味著URL看起來更加友好和清晰，類似于常規(guī)網(wǎng)站的URL結(jié)構(gòu)，支持SEO和服務(wù)端渲染。在使用歷史模式時(shí)，需要服務(wù)器配置來正確處理針對路由的請求，以便在服務(wù)器端正確地重定向到相應(yīng)的頁面。205三、單文件組件Vue組件是Vue.js框架中的核心概念之一，它允許將頁面拆分成各個(gè)獨(dú)立的、可復(fù)用的模塊，每個(gè)模塊都有自己的模板、樣式和邏輯。Vue組件由三部分組成，分別為模板（Template）、腳本（Script）和樣式（Style）。單文件組件（SingleFileComponent，SFC）

是Vue.js框架中的一種組織和編寫Vue組件的方式，它將模板、腳本和樣式組合在一個(gè)單獨(dú)的文件中，以提高組件的可讀性和可維護(hù)性。2061.模板模板定義組件的結(jié)構(gòu)和布局，是HTML5中的一個(gè)元素，用于在文檔中定義可復(fù)用的HTML模板。2.腳本腳本定義組件的行為和邏輯，用于組件的數(shù)據(jù)、計(jì)算屬性、方法等的定義，以及與組件相關(guān)的任何邏輯的定義。2073.樣式樣式定義組件的外觀?？梢栽趩挝募M件中封裝和管理組件的樣式，使樣式與組件的結(jié)構(gòu)和行為緊密相連，提高組件的可維護(hù)性和可復(fù)用性。除了直接編寫CSS規(guī)則，還可以使用預(yù)處理器進(jìn)行樣式的編寫，并在單文件組件中引用預(yù)處理器中的語法和功能。<style>標(biāo)簽中的樣式默認(rèn)為全局樣式，可以使用scoped屬性來限定該樣式僅作用于當(dāng)前組件的模板部分，這個(gè)特性被稱為樣式作用域。208四、Vue項(xiàng)目資源文件目錄在Vue.js項(xiàng)目中，“assets”目錄和“public”目錄為兩個(gè)常用目錄，它們都可用于存放靜態(tài)資源文件，但在使用方式和功能等方面有所區(qū)別，“assets”目錄和“public”目錄的區(qū)別見下表。209“assets”目錄和“public”目錄的區(qū)別210“assets”目錄和“public”目錄的區(qū)別在Vue項(xiàng)目開發(fā)時(shí)，需要使用哪個(gè)目錄取決于靜態(tài)資源是否需要經(jīng)過構(gòu)建處理——若資源需要被打包、壓縮和優(yōu)化，可將其放在“assets”目錄中；若資源不需要被構(gòu)建處理或需要保持原有目錄結(jié)構(gòu)，則可將其放在“public”目錄中。定義與使用Vue組件任務(wù)32111.?熟悉Vue組件。2.?了解Vue?Setup語法糖。3.?能創(chuàng)建和使用自定義組件。212本任務(wù)主要內(nèi)容是根據(jù)項(xiàng)目需求創(chuàng)建所有頁面共用的頁腳組件，并在根組件“App.vue”文件中使用該組件。213一、Vue組件組件（component）是Vue框架最強(qiáng)大的功能之一。組件的作用是封裝可復(fù)用的代碼，它允許人們將界面劃分為獨(dú)立的、可復(fù)用的部分，并且可以對每部分進(jìn)行單獨(dú)的處理。通常一個(gè)組件就是一個(gè)功能體，可以很方便地在多個(gè)地方調(diào)用這個(gè)功能體。Vue組件和嵌套HTML元素的方式類似，開發(fā)人員可以在每個(gè)組件內(nèi)封裝自定義內(nèi)容與邏輯，Vue能很好地配合原生WebComponent。2141.組件的定義一般情況下，Vue組件會(huì)定義在一個(gè)單獨(dú)的“*.vue”文件中，此文件被稱為單文件組件。2.組件的使用若在父組件中導(dǎo)入上述例題中的計(jì)數(shù)器組件，這個(gè)組件將會(huì)以默認(rèn)導(dǎo)出的形式被暴露給外部，具體代碼如下。215216組件可以被復(fù)用任意次，具體代碼如下。在上述代碼中，每當(dāng)單擊不同的按鈕時(shí)，各個(gè)組件都維護(hù)著自己的狀態(tài)，是不同的counter，這是因?yàn)槊渴褂靡粋€(gè)組件就創(chuàng)建了一個(gè)新的實(shí)例。3.Props屬性的傳遞Props是一種特別的屬性，它可以在組件上聲明注冊。若要傳遞給博客文章組件一個(gè)標(biāo)題，則必須在組件的Props列表中聲明它。這里要用到defineProps宏，其具體代碼如下。217defineProps是一個(gè)僅<scriptsetup>語法中可用的編譯宏命令，并不需要被顯式地導(dǎo)入。一個(gè)組件可以有任意多個(gè)Props，在默認(rèn)情況下，Props都接受任意類型的值，聲明的Props會(huì)被自動(dòng)暴露給模板。defineProps宏會(huì)返回一個(gè)對象，其中包含了可以傳遞給組件的所有Props，具體代碼如下。218當(dāng)Props被注冊后，可以按自定義屬性的形式傳遞數(shù)據(jù)給它，具體代碼如下。219二、Setup語法糖Vue框架中的<scriptsetup>語法是在單文件組件中使用組合式API的編譯時(shí)語法糖（Syntacticsugar）。當(dāng)同時(shí)使用單文件組件與組合式API時(shí)，默認(rèn)推薦該語法。相比于普通的<script>語法，<scriptsetup>語法糖具有以下優(yōu)勢。（1）更少的樣板內(nèi)容，更簡潔的代碼。（2）能夠使用純TypeScript聲明Props和自定義事件。（3）更好的運(yùn)行時(shí)性能（其模板會(huì)被編譯成同一作用域內(nèi)的渲染函數(shù)，避免了上下文代理對象的渲染）。（4）良好的IDE類型推導(dǎo)性能（減少服務(wù)器從代碼中抽取類型的工作）。2201.基本語法要啟用該語法，需要在<script>代碼塊上添加setup屬性，具體代碼如下。2212.頂層綁定的使用當(dāng)使用<scriptsetup>語法時(shí)，任何在<scriptsetup>標(biāo)簽內(nèi)聲明的頂層綁定（包括變量、函數(shù)聲明，以及import導(dǎo)入的內(nèi)容）都能在模板中直接被使用，具體代碼如下。2223.響應(yīng)式響應(yīng)式狀態(tài)需要明確使用響應(yīng)式API來創(chuàng)建。與setup()函數(shù)的返回值一樣，在模板中使用ref時(shí)會(huì)自動(dòng)解包，具體代碼如下。2234.組件的使用<scriptsetup>標(biāo)簽內(nèi)的值也能被直接作為自定義組件的標(biāo)簽名使用，具體代碼如下。224開發(fā)首頁頁面任務(wù)42251.?了解組件Props的屬性。2.?了解v-bind指令。3.?能使用Props進(jìn)行組件傳值。226本任務(wù)主要內(nèi)容是按照右圖所示的首頁設(shè)計(jì)效果進(jìn)行開發(fā)，完整的首頁頁面包括頁頭、頁腳、頁面主體上方的Banner、“特色服務(wù)”“最新資訊”和“服務(wù)流程”模塊等部分。227首頁的設(shè)計(jì)效果一、組件的Props屬性Props

是一種特別的屬性，可以在子組件上聲明注冊。父組件在調(diào)用子組件時(shí)，可以通過Props屬性將需要的值傳遞給子組件。1.Props的聲明需要組件顯式聲明它所接受的Props，Vue才能確定在外部傳入的參數(shù)中，哪些是Props，哪些是透傳屬性（如class、style或id）。228在使用<scriptsetup>標(biāo)簽的單文件組件中，Props可以使用defineProps()宏來進(jìn)行聲明，具體代碼如下。229除了使用字符串?dāng)?shù)組來聲明Props外，還可以使用對象的形式來聲明，具體代碼如下。在以對象形式聲明的Props中，key是Prop的名稱，而值則是該P(yáng)rop預(yù)期類型的構(gòu)造函數(shù)。以對象形式聲明的Props不僅可以在一定程度上作為組件的文檔，如果其他開發(fā)人員在使用組件時(shí)傳遞了錯(cuò)誤的類型，它還會(huì)在瀏覽器控制臺中拋出警告信息。2302.值的傳遞任何類型的值都可以作為Props的值被傳遞，包括Number、Boolean、Array和Object等。3.單向數(shù)據(jù)流所有的Props都遵循單向綁定原則，Props因父組件的更新而變化，自然地將新的狀態(tài)傳遞至子組件，而不會(huì)逆向傳遞。在每次父組件更新后，所有的子組件中的Props都會(huì)被更新到最新值，這意味著不應(yīng)在子組件中去更改一個(gè)Prop，如果這么做，Vue會(huì)在控制臺上拋出警告信息。231二、v-bind指令v-bind

是Vue框架的內(nèi)置指令之一，它的作用是動(dòng)態(tài)地綁定一個(gè)或多個(gè)屬性，也可以綁定組件的Prop。v-bind指令的常見用法是將Vue實(shí)例中的數(shù)據(jù)或計(jì)算屬性綁定到HTML元素的屬性上。通過這種方式，HTML元素的屬性值可以根據(jù)數(shù)據(jù)的變化而自動(dòng)更新，從而實(shí)現(xiàn)響應(yīng)式的界面。2321.指令的語法由于v-bind指令可以綁定元素的各種屬性，它在Vue項(xiàng)目中較為常用，Vue官方為v-bind:attribute提供了特定的簡寫語法“:attribute”。v-bind指令可以加入修飾符，包括.camel（將短橫線命名的屬性轉(zhuǎn)變?yōu)轳劮迨矫?prop（強(qiáng)制綁定為DOMproperty）、.attr（強(qiáng)制綁定為DOMattribute）等。2.指令的用途當(dāng)v-bind指令被用于綁定class或styleattribute時(shí)，v-bind指令支持額外的類型；當(dāng)v-bind指令被用于組件Props綁定時(shí)，被綁定的Props必須在子組件中已被正確聲明。233開發(fā)“產(chǎn)品介紹”頁面任務(wù)52341.?能使用v-for指令進(jìn)行列表渲染。2.?能熟練在腳本<script>中定義對象數(shù)組。235本任務(wù)主要內(nèi)容是按照圖所示的“產(chǎn)品介紹”頁面設(shè)計(jì)效果進(jìn)行開發(fā)，定義一個(gè)產(chǎn)品案例數(shù)組，并使用v-for指令實(shí)現(xiàn)動(dòng)態(tài)列表渲染。236“產(chǎn)品介紹”頁面的設(shè)計(jì)效果v-for指令是Vue框架的內(nèi)置指令之一，它的作用是基于原始數(shù)據(jù)多次渲染元素或模板塊。在Vue項(xiàng)目中，常常使用v-for指令基于一個(gè)數(shù)組來渲染一個(gè)列表或遍歷一個(gè)對象的所有屬性。237一、v-for指令的語法v-for指令的值需要使用iteminitems形式的特殊語法，其中，items是源數(shù)據(jù)的數(shù)組，而item是正在迭代的元素別名。使用v-for指令的示例代碼如下。238運(yùn)行以上代碼，頁面顯示的運(yùn)行結(jié)果如圖所示。v-for指令的默認(rèn)運(yùn)行方式是嘗試就地更新元素而不移動(dòng)它們。若要強(qiáng)制其重新排列元素，則需要用特殊屬性key來提供一個(gè)排序提示，具體代碼如下。239運(yùn)行結(jié)果二、v-for指令的作用域在v-for指令中，可以完整地訪問父作用域內(nèi)的屬性和變量。v-for指令也支持使用可選的第二個(gè)參數(shù)來表示當(dāng)前項(xiàng)的位置索引。若在上述代碼示例中，在腳本<script>標(biāo)簽中再定義一個(gè)變量parentMessage，則具體代碼如下。240運(yùn)行以上代碼，頁面顯示的運(yùn)行結(jié)果如圖所示。241運(yùn)行結(jié)果三、使用v-for指令遍歷對象可以使用v-for指令來遍歷一個(gè)對象的所有屬性，遍歷的順序會(huì)基于對該對象調(diào)用Object.keys()函數(shù)的返回值來決定。使用v-for指令遍歷對象的具體代碼如下。242243

開發(fā)“聯(lián)系我們”頁面任務(wù)62441.?了解響應(yīng)式系統(tǒng)。2.?能使用v-model指令綁定數(shù)據(jù)。3.?能使用v-on指令監(jiān)聽并處理DOM事件。245本任務(wù)主要內(nèi)容是按照如圖所示的“聯(lián)系我們”頁面設(shè)計(jì)效果進(jìn)行開發(fā)。246“聯(lián)系我們”頁面的設(shè)計(jì)效果一、響應(yīng)式系統(tǒng)Vue最具標(biāo)志性的功能就是其低侵入性的響應(yīng)式系統(tǒng)，組件狀態(tài)都是由響應(yīng)式

的JavaScript對象組成的，當(dāng)更改它們時(shí)，視圖會(huì)隨即自動(dòng)更新。Vue的響應(yīng)式系統(tǒng)基本是基于運(yùn)行時(shí)的，追蹤和觸發(fā)都是在瀏覽器中運(yùn)行時(shí)進(jìn)行的。運(yùn)行時(shí)響應(yīng)的優(yōu)點(diǎn)是它可以在沒有構(gòu)建步驟的情況下工作，且邊界情況較少；缺點(diǎn)是這使它受到了JavaScript語法的制約，需要使用一些如Vueref這樣的值的容器。2471.ref()函數(shù)ref()函數(shù)接受一個(gè)內(nèi)部值，返回一個(gè)響應(yīng)式的、可更改的ref對象，此對象只有一個(gè)指向其內(nèi)部值的屬性.value。在組合式API中，推薦使用ref()函數(shù)來聲明響應(yīng)式狀態(tài)。ref對象是可更改的，即可以為.value賦予新的值，它也是響應(yīng)式的，即所有對.value的操作都將被追蹤，且寫操作會(huì)觸發(fā)與之相關(guān)的響應(yīng)。2482.響應(yīng)式示例代碼響應(yīng)式系統(tǒng)的工作過程為：在腳本<script>中先使用import導(dǎo)入ref()函數(shù)，然后分別定義兩個(gè)變量count（數(shù)值型）和str（字符串型），變量通過ref()接收參數(shù)，并將其包裹在一個(gè)帶有.value屬性的ref對象中返回，具體代碼如下。249若是在模板<template>中，可以直接使用變量的值，具體代碼如下。測試并運(yùn)行上述代碼，兩種類型的變量均可被正常調(diào)用和顯示，顯示內(nèi)容如圖所示。250顯示內(nèi)容若想在腳本<script>中引用ref變量的值，則需要使用.value來返回變量的值，否則會(huì)直接返回ref對象本身。在腳本<script>中添加輸出語句代碼，測試并調(diào)用兩種類型的變量，具體代碼如下。251運(yùn)行以上代碼，在瀏覽器控制臺中輸出的內(nèi)容如圖所示由上圖可以看出，若直接輸出count或str，其類型為對象（Object），且都有一個(gè)value屬性，分別為數(shù)值88與字符串“Hello”；若輸出count.value或str.value，則可直接獲得其value屬性的值。252在瀏覽器控制臺中輸出的內(nèi)容二、v-model指令在前端處理表單時(shí)，常常需要將表單輸入框中的內(nèi)容同步至JavaScript相應(yīng)的變量中。手動(dòng)連接值綁定和更改事件監(jiān)聽器可能會(huì)很麻煩，Vue框架提供了

v-model指令，它可以在組件上使用，以實(shí)現(xiàn)雙向綁定。1.v-model指令的使用在腳本<script>中定義一個(gè)響應(yīng)式變量（如userName），并將其通過v-model指令綁定在元素上，就可以實(shí)現(xiàn)雙向綁定，即無論在模板還是在腳本二者任何一個(gè)上改變響應(yīng)式變量的值，都將導(dǎo)致另一個(gè)被同步改變。253假設(shè)頁面表單中需要用戶提交用戶名（userName）字段，示例代碼如下。在上述代碼中，當(dāng)用戶在input輸入框中輸入內(nèi)容時(shí)，響應(yīng)式變量userName的.value屬性值也會(huì)隨之改變，同樣，當(dāng)使用腳本改變userName的.value屬性值時(shí)，頁面中對應(yīng)的input元素的顯示值也會(huì)實(shí)時(shí)更新為最新的.value屬性值。2542.v-model指令的類型支持v-model指令還可以用于各種不同類型的輸入。它