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

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

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

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

開發(fā)游戲邏輯任務(wù)2101.?能根據(jù)需求定義變量。2.?能定義初始化項(xiàng)目函數(shù)。3.?能隨機(jī)生成游戲初始狀態(tài)。11本任務(wù)主要內(nèi)容是使用JavaScript定義游戲相關(guān)變量，定義初始化游戲函數(shù)，并調(diào)用初始化游戲函數(shù)生成游戲初始狀態(tài)。12在使用CSS選擇器引擎的querySelectorAll()方法時(shí)，可獲取與其參數(shù)匹配的DOM元素。querySelectorAll()方法是querySelector()方法的增強(qiáng)版本，可以接受一個(gè)或多個(gè)CSS選擇器作為參數(shù)，并返回與這些選擇器匹配的所有元素，示例代碼如下。在上述代碼中，querySelectorAll()方法根據(jù).class-name選擇器獲取所有匹配的DOM元素，返回一個(gè)NodeList對(duì)象，并將其存儲(chǔ)在elements變量中。13如果需要將NodeList對(duì)象轉(zhuǎn)換為普通數(shù)組，可以使用Array.from()方法，示例代碼如下。NodeList對(duì)象與普通數(shù)組有所不同，兩者的差異主要體現(xiàn)在以下幾個(gè)方面。（1）構(gòu)造方法不同。NodeList對(duì)象是通過querySelectorAll()方法返回的，而普通數(shù)組是通過Array()構(gòu)造函數(shù)創(chuàng)建的。14（2）元素存儲(chǔ)方式不同。NodeList對(duì)象存儲(chǔ)的是一個(gè)DOM節(jié)點(diǎn)列表，而普通數(shù)組存儲(chǔ)的是一個(gè)數(shù)字或其他類型對(duì)象的列表。（3）方法不同。NodeList對(duì)象和普通數(shù)組都有一些常用的方法，如push()、pop()、shift()等，但NodeList對(duì)象還具有一些與DOM節(jié)點(diǎn)操作相關(guān)的方法，如item()、append()、remove()等。（4）可伸縮性不同。NodeList對(duì)象的大小可以動(dòng)態(tài)改變，而普通數(shù)組的大小是固定不變的。15開發(fā)游戲交互任務(wù)3161.?熟練使用switch分支語句。2.?能監(jiān)聽用戶的鍵盤輸入事件。17本任務(wù)主要內(nèi)容是監(jiān)聽用戶的鍵盤輸入事件，并使用switch語句根據(jù)用戶按下的鍵調(diào)用相應(yīng)的處理函數(shù)。18一、鍵盤事件的類型JavaScript鍵盤事件主要分為以下三類。（1）keydown：表示用戶按下按鍵時(shí)觸發(fā)的事件。（2）keypress：表示用戶按下鍵盤上的某個(gè)鍵并產(chǎn)生一個(gè)字符時(shí)觸發(fā)的事件。注意，某些特殊鍵（如方向鍵、功能鍵等）可能不會(huì)觸發(fā)此事件。（3）keyup：表示用戶按下鍵盤上的某個(gè)鍵而后松開時(shí)觸發(fā)的事件。19二、鍵盤事件的監(jiān)聽當(dāng)用戶按下鍵盤上的某個(gè)鍵時(shí)，window.onkeydown函數(shù)會(huì)被觸發(fā)，這個(gè)函數(shù)可以執(zhí)行需要的操作，示例代碼如下。上述代碼通過event.keyCode獲取到按下的鍵的鍵碼，并將其保存到變量keyCode中，然后判斷keyCode的值，若其值為13（表示Enter鍵的鍵碼），則彈窗顯示“您按下了Enter鍵！”。20三、按鍵信息的獲取獲取按鍵信息可以通過event.key和event.keyCode兩種方法實(shí)現(xiàn)，兩者都表示鍵盤事件的屬性，其不同之處為：event.key描述的是按鍵的文本表示，如字母、數(shù)字、功能鍵等；而event.keyCode描述的是按鍵的鍵碼，如Enter鍵的鍵碼為13，空格鍵的鍵碼為32，以此類推。常用按鍵的keyCode與key對(duì)應(yīng)表見下表。2122常用按鍵的keyCode與key對(duì)應(yīng)表項(xiàng)目六使用Vue框架開發(fā)企業(yè)門戶網(wǎng)站2324任務(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ù)1251.?了解前端框架的概念。2.?了解Vue框架的特點(diǎn)。3.?了解MVVM軟件架構(gòu)設(shè)計(jì)模式。4.?能使用Vue?CLI工具創(chuàng)建Vue項(xiàng)目。26本任務(wù)的內(nèi)容主要是安裝和配置Vue框架開發(fā)和運(yùn)行所需的Node.js環(huán)境，安裝VueCLI工具，為后期創(chuàng)建Vue項(xiàng)目做好準(zhǔn)備。27一、前端框架1.前端框架的特點(diǎn)前端框架是一種為了簡(jiǎn)化和加速前端開發(fā)而創(chuàng)建的工具、庫和軟件系統(tǒng)。它提供了一套結(jié)構(gòu)、規(guī)范和工具，用于組織、管理和展示UI元素，并協(xié)助開發(fā)人員構(gòu)建交互性高、可維護(hù)且具有良好用戶體驗(yàn)的網(wǎng)頁或應(yīng)用程序。28前端框架主要包含以下組成部分。（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）。292.前端框架的種類（1）Vue框架Vue（發(fā)音為/vju:/）框架是一款用于構(gòu)建UI的JavaScript框架。它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，并提供了一套聲明式的、組件化的編程模型，能幫助開發(fā)人員高效地開發(fā)UI。無論是構(gòu)建簡(jiǎn)單還是復(fù)雜的界面，Vue框架都可以勝任。Vue框架的官方網(wǎng)站為/，Vue框架的圖標(biāo)如圖所示。30Vue框架的圖標(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)站為https://react.dev/，其圖標(biāo)如圖所示。31React框架的圖標(biāo)（3）AngularJS框架AngularJS框架誕生于2009年，由MiskoHevery等人創(chuàng)建，是一款構(gòu)建UI的前端框架，后為谷歌（Google）公司所收購(gòu)。AngularJS框架是一個(gè)應(yīng)用設(shè)計(jì)框架與開發(fā)的平臺(tái)，用于創(chuàng)建高效、復(fù)雜、精致的單頁面應(yīng)用，通過新的屬性和表達(dá)式擴(kuò)展HTML，實(shí)現(xiàn)一套框架適用于多種平臺(tái)、移動(dòng)端和桌面端。AngularJS框架有著諸多特性，其中，最為核心的是MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等。Angular框架的圖標(biāo)如圖所示。32Angular框架的圖標(biāo)二、MVVM架構(gòu)設(shè)計(jì)模式MVVM（Model-View-ViewModel）是一種軟件架構(gòu)設(shè)計(jì)模式，也是一種簡(jiǎn)化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ù)與視圖的分離。33在MVVM架構(gòu)設(shè)計(jì)模式下，Model和View之間沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，View數(shù)據(jù)的變化會(huì)同步到ViewModel上，ViewModel對(duì)數(shù)據(jù)的操作也會(huì)立即反映到View上。ViewModel發(fā)起異步請(qǐng)求通知Model對(duì)數(shù)據(jù)進(jìn)行處理，Model就將數(shù)據(jù)的處理結(jié)果回傳給ViewModel。MVVM模式的結(jié)構(gòu)如圖所示。34MVVM模式的結(jié)構(gòu)創(chuàng)建企業(yè)門戶項(xiàng)目任務(wù)2351.?了解單文件組件的特點(diǎn)。2.?了解Vue項(xiàng)目目錄結(jié)構(gòu)。3.?能創(chuàng)建自定義頁面。4.?能配置自定義路由。36本任務(wù)主要內(nèi)容是使用VueCLI工具創(chuàng)建項(xiàng)目，并使用npm命令啟動(dòng)該項(xiàng)目，按項(xiàng)目UI設(shè)計(jì)效果圖的要求創(chuàng)建項(xiàng)目所需頁面，并配置對(duì)應(yīng)的路由。37一、VueRouter的核心概念和功能VueRouter是Vue.js官方提供的路由器，用于在Vue應(yīng)用中實(shí)現(xiàn)單頁面應(yīng)用（SinglePageApplication，SPA）的路由功能，它允許開發(fā)人員通過定義路由規(guī)則和組件映射來管理不同URL路徑的渲染。VueRouter具有以下核心概念和功能。381.路由器的實(shí)例創(chuàng)建一個(gè)VueRouter實(shí)例可初始化路由器。路由器實(shí)例可以與Vue根實(shí)例進(jìn)行關(guān)聯(lián)，并作為Vue應(yīng)用的插件使用。2.路由的規(guī)則路由規(guī)則由路徑和對(duì)應(yīng)的組件組成，使用路由規(guī)則可定義URL路徑與組件之間的關(guān)系。393.路由的視圖在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)航。405.路由的參數(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)，可在父級(jí)路由組件內(nèi)部定義子級(jí)路由規(guī)則和視圖，這種方式可以實(shí)現(xiàn)更復(fù)雜的應(yīng)用程序?qū)Ш胶晚撁娼Y(jié)構(gòu)。41二、VueRouter的模式VueRouter在創(chuàng)建路由器實(shí)例時(shí)，有Hash（音譯為哈希）模式和歷史模式兩種模式。1.Hash模式在Hash模式下，URL看起來類似于“/#/route”，其中，哈希標(biāo)記“#”后面的部分被視為路由器的狀態(tài)，“#/route”部分被稱為哈希路徑。瀏覽器不會(huì)將哈希路徑發(fā)送到服務(wù)器，因此可以在前端應(yīng)用中進(jìn)行路由狀態(tài)管理，而不會(huì)引起頁面刷新。它適用于單頁面應(yīng)用程序、需要兼容性和簡(jiǎn)單部署的場(chǎng)景。然而，它的URL友好性和對(duì)搜索引擎優(yōu)化（SearchEngineOptimization，SEO）的影響在正式使用時(shí)是需要被考慮的，并且它無法直接定位到頁面的特定狀態(tài)。422.歷史模式在歷史模式下，URL中不包含“#”符號(hào)。該模式使用瀏覽器的HistoryAPI來管理路由狀態(tài)，這意味著URL看起來更加友好和清晰，類似于常規(guī)網(wǎng)站的URL結(jié)構(gòu)，支持SEO和服務(wù)端渲染。在使用歷史模式時(shí)，需要服務(wù)器配置來正確處理針對(duì)路由的請(qǐng)求，以便在服務(wù)器端正確地重定向到相應(yīng)的頁面。43三、單文件組件Vue組件是Vue.js框架中的核心概念之一，它允許將頁面拆分成各個(gè)獨(dú)立的、可復(fù)用的模塊，每個(gè)模塊都有自己的模板、樣式和邏輯。Vue組件由三部分組成，分別為模板（Template）、腳本（Script）和樣式（Style）。單文件組件（SingleFileComponent，SFC）

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

是一種特別的屬性，可以在子組件上聲明注冊(cè)。父組件在調(diào)用子組件時(shí)，可以通過Props屬性將需要的值傳遞給子組件。1.Props的聲明需要組件顯式聲明它所接受的Props，Vue才能確定在外部傳入的參數(shù)中，哪些是Props，哪些是透?jìng)鲗傩裕ㄈ鏲lass、style或id）。66在使用<scriptsetup>標(biāo)簽的單文件組件中，Props可以使用defineProps()宏來進(jìn)行聲明，具體代碼如下。67除了使用字符串?dāng)?shù)組來聲明Props外，還可以使用對(duì)象的形式來聲明，具體代碼如下。在以對(duì)象形式聲明的Props中，key是Prop的名稱，而值則是該P(yáng)rop預(yù)期類型的構(gòu)造函數(shù)。以對(duì)象形式聲明的Props不僅可以在一定程度上作為組件的文檔，如果其他開發(fā)人員在使用組件時(shí)傳遞了錯(cuò)誤的類型，它還會(huì)在瀏覽器控制臺(tái)中拋出警告信息。682.值的傳遞任何類型的值都可以作為Props的值被傳遞，包括Number、Boolean、Array和Object等。3.單向數(shù)據(jù)流所有的Props都遵循單向綁定原則，Props因父組件的更新而變化，自然地將新的狀態(tài)傳遞至子組件，而不會(huì)逆向傳遞。在每次父組件更新后，所有的子組件中的Props都會(huì)被更新到最新值，這意味著不應(yīng)在子組件中去更改一個(gè)Prop，如果這么做，Vue會(huì)在控制臺(tái)上拋出警告信息。69二、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)式的界面。701.指令的語法由于v-bind指令可以綁定元素的各種屬性，它在Vue項(xiàng)目中較為常用，Vue官方為v-bind:attribute提供了特定的簡(jiǎn)寫語法“: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必須在子組件中已被正確聲明。71開發(fā)“產(chǎn)品介紹”頁面任務(wù)5721.?能使用v-for指令進(jìn)行列表渲染。2.?能熟練在腳本<script>中定義對(duì)象數(shù)組。73本任務(wù)主要內(nèi)容是按照?qǐng)D所示的“產(chǎn)品介紹”頁面設(shè)計(jì)效果進(jìn)行開發(fā)，定義一個(gè)產(chǎn)品案例數(shù)組，并使用v-for指令實(shí)現(xiàn)動(dòng)態(tài)列表渲染。74“產(chǎn)品介紹”頁面的設(shè)計(jì)效果v-for指令是Vue框架的內(nèi)置指令之一，它的作用是基于原始數(shù)據(jù)多次渲染元素或模板塊。在Vue項(xiàng)目中，常常使用v-for指令基于一個(gè)數(shù)組來渲染一個(gè)列表或遍歷一個(gè)對(duì)象的所有屬性。75一、v-for指令的語法v-for指令的值需要使用iteminitems形式的特殊語法，其中，items是源數(shù)據(jù)的數(shù)組，而item是正在迭代的元素別名。使用v-for指令的示例代碼如下。76運(yùn)行以上代碼，頁面顯示的運(yùn)行結(jié)果如圖所示。v-for指令的默認(rèn)運(yùn)行方式是嘗試就地更新元素而不移動(dòng)它們。若要強(qiáng)制其重新排列元素，則需要用特殊屬性key來提供一個(gè)排序提示，具體代碼如下。77運(yùn)行結(jié)果二、v-for指令的作用域在v-for指令中，可以完整地訪問父作用域內(nèi)的屬性和變量。v-for指令也支持使用可選的第二個(gè)參數(shù)來表示當(dāng)前項(xiàng)的位置索引。若在上述代碼示例中，在腳本<script>標(biāo)簽中再定義一個(gè)變量parentMessage，則具體代碼如下。78運(yùn)行以上代碼，頁面顯示的運(yùn)行結(jié)果如圖所示。79運(yùn)行結(jié)果三、使用v-for指令遍歷對(duì)象可以使用v-for指令來遍歷一個(gè)對(duì)象的所有屬性，遍歷的順序會(huì)基于對(duì)該對(duì)象調(diào)用Object.keys()函數(shù)的返回值來決定。使用v-for指令遍歷對(duì)象的具體代碼如下。8081

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

的JavaScript對(duì)象組成的，當(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這樣的值的容器。851.ref()函數(shù)ref()函數(shù)接受一個(gè)內(nèi)部值，返回一個(gè)響應(yīng)式的、可更改的ref對(duì)象，此對(duì)象只有一個(gè)指向其內(nèi)部值的屬性.value。在組合式API中，推薦使用ref()函數(shù)來聲明響應(yīng)式狀態(tài)。ref對(duì)象是可更改的，即可以為.value賦予新的值，它也是響應(yīng)式的，即所有對(duì).value的操作都將被追蹤，且寫操作會(huì)觸發(fā)與之相關(guān)的響應(yīng)。862.響應(yīng)式示例代碼響應(yīng)式系統(tǒng)的工作過程為：在腳本<script>中先使用import導(dǎo)入ref()函數(shù)，然后分別定義兩個(gè)變量count（數(shù)值型）和str（字符串型），變量通過ref()接收參數(shù)，并將其包裹在一個(gè)帶有.value屬性的ref對(duì)象中返回，具體代碼如下。87若是在模板<template>中，可以直接使用變量的值，具體代碼如下。測(cè)試并運(yùn)行上述代碼，兩種類型的變量均可被正常調(diào)用和顯示，顯示內(nèi)容如圖所示。88顯示內(nèi)容若想在腳本<script>中引用ref變量的值，則需要使用.value來返回變量的值，否則會(huì)直接返回ref對(duì)象本身。在腳本<script>中添加輸出語句代碼，測(cè)試并調(diào)用兩種類型的變量，具體代碼如下。89運(yùn)行以上代碼，在瀏覽器控制臺(tái)中輸出的內(nèi)容如圖所示由上圖可以看出，若直接輸出count或str，其類型為對(duì)象（Object），且都有一個(gè)value屬性，分別為數(shù)值88與字符串“Hello”；若輸出count.value或str.value，則可直接獲得其value屬性的值。90在瀏覽器控制臺(tái)中輸出的內(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è)被同步改變。91假設(shè)頁面表單中需要用戶提交用戶名（userName）字段，示例代碼如下。在上述代碼中，當(dāng)用戶在input輸入框中輸入內(nèi)容時(shí)，響應(yīng)式變量userName的.value屬性值也會(huì)隨之改變，同樣，當(dāng)使用腳本改變userName的.value屬性值時(shí)，頁面中對(duì)應(yīng)的input元素的顯示值也會(huì)實(shí)時(shí)更新為最新的.value屬性值。922.v-model指令的類型支持v-model指令還可以用于各種不同類型的輸入。它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的DOM屬性和事件組合，具體形式如下。（1）文本類型的<input>標(biāo)簽和<textarea>標(biāo)簽元素會(huì)綁定value屬性并偵聽input事件。（2）<inputtype="checkbox">和<inputtype="radio">會(huì)綁定checked屬性并偵聽change事件。（3）<select>標(biāo)簽會(huì)綁定valueproperty并偵聽change事件。v-model指令會(huì)忽略任何表單元素上初始的value、checked或selected等，它始終將當(dāng)前綁定的響應(yīng)式變量視為數(shù)據(jù)的正確來源，所以應(yīng)該在腳本<script>標(biāo)簽中定義該初始值。93三、v-on指令v-on指令是Vue框架的內(nèi)置指令之一，它的作用是為元素綁定事件監(jiān)聽器。一般情況下，v-on指令被用來監(jiān)聽DOM事件，并在事件觸發(fā)時(shí)執(zhí)行對(duì)應(yīng)的事件處理器（handler）。事件處理器包括內(nèi)聯(lián)事件處理器和方法事件處理器。1.v-on指令的語法v-on指令的語法為v-on:click="handler"，可以將指令中的“v-on”去掉，直接簡(jiǎn)寫為@click="handler"。94（1）內(nèi)聯(lián)事件處理器內(nèi)聯(lián)事件處理器在事件被觸發(fā)時(shí)執(zhí)行內(nèi)聯(lián)JavaScript語句（與onclick類似），示例代碼如下。95上述代碼在腳本<script>中定義了一個(gè)響應(yīng)式變量count，在模板<template>中包含一個(gè)段落（用于顯示count變量的值），以及一個(gè)按鈕。按鈕使用@click綁定了內(nèi)聯(lián)JavaScript語句“count++”，當(dāng)按鈕被單擊時(shí)，會(huì)將響應(yīng)式變量count的值加1，頁面自動(dòng)刷新顯示count最新的值。96（2）方法事件處理器在上述代碼中，也可將按鈕單擊事件修改為一個(gè)指向組件上定義的方法，修改后的具體代碼如下。97也可以向方法中傳入自定義參數(shù)，具體代碼如下。982.事件修飾符Vue為v-on指令提供了用“.”表示的指令后綴作為事件修飾符，主要包含以下修飾符。993.按鍵修飾符在監(jiān)聽鍵盤事件時(shí)，經(jīng)常需要檢查特定的按鍵，Vue允許在v-on（@）指令監(jiān)聽按鍵事件時(shí)添加按鍵修飾符。僅在key為enter時(shí)才調(diào)用submit事件處理的示例代碼如下。1004.系統(tǒng)按鍵修飾符使用系統(tǒng)按鍵修飾符可以觸發(fā)鼠標(biāo)或鍵盤事件監(jiān)聽器，只有當(dāng)按鍵被按下時(shí)才會(huì)觸發(fā)。系統(tǒng)按鍵修飾符包括.ctrl、.alt、.shift和.meta。5.鼠標(biāo)按鍵修飾符鼠標(biāo)按鍵修飾符包括.left、.right和.middle，它們將處理程序限定為由特定鼠標(biāo)按鍵觸發(fā)的事件。101項(xiàng)目七使用Vue框架開發(fā)電商網(wǎng)站102103任務(wù)1搭建后臺(tái)接口環(huán)境任務(wù)2創(chuàng)建Vue項(xiàng)目與公共組件任務(wù)3開發(fā)首頁頁面任務(wù)4開發(fā)“商品列表”頁面任務(wù)5開發(fā)“商品詳情”頁面任務(wù)6開發(fā)“購(gòu)物車”頁面搭建后臺(tái)接口環(huán)境

任務(wù)11041.?了解PHP和MySQL的基礎(chǔ)知識(shí)。2.?了解常用HTTP請(qǐng)求方法。3.?能搭建PHP+MySQL開發(fā)環(huán)境。4.?能進(jìn)行后臺(tái)接口測(cè)試。105本任務(wù)主要內(nèi)容是使用后臺(tái)測(cè)試接口PHP代碼與MySQL數(shù)據(jù)庫腳本文件，在開發(fā)環(huán)境中搭建后臺(tái)接口環(huán)境，為電商網(wǎng)站提供后臺(tái)數(shù)據(jù)接口。106一、頁面超文本預(yù)處理器（PHP）頁面超文本預(yù)處理器（PageHypertextPreprocessor，PHP）是在服務(wù)器端執(zhí)行的腳本語言，適用于Web開發(fā)并可嵌入HTML。PHP語法學(xué)習(xí)了C語言，吸納了Java和Perl等多種語言的特色，發(fā)展出自己的特色語法，并根據(jù)其他語言的長(zhǎng)項(xiàng)持續(xù)改進(jìn)和提升自己。隨著PHP-CLI相關(guān)組件的快速發(fā)展和完善，PHP已經(jīng)可以應(yīng)用于TCP/UDP服務(wù)、高性能Web、WebSocket服務(wù)、物聯(lián)網(wǎng)、實(shí)時(shí)通信、游戲和微服務(wù)等非Web領(lǐng)域的系統(tǒng)研發(fā)。1071.PHP文件PHP文件的默認(rèn)文件擴(kuò)展名是“.php”，文件內(nèi)容包含文本、HTML、JavaScript代碼和PHP代碼。PHP代碼在服務(wù)器上執(zhí)行，其結(jié)果以純HTML形式返回給瀏覽器。2.PHP的功能PHP可以生成動(dòng)態(tài)頁面內(nèi)容，且不局限于輸出HTML，還可以輸出圖像、PDF文件，以及XHTML和XML等文本內(nèi)容。在數(shù)據(jù)交互方面，PHP可以加密數(shù)據(jù)、根據(jù)規(guī)則限制用戶訪問網(wǎng)站頁面、收集表單數(shù)據(jù)，以及發(fā)送和接收Cookies；在文件操作方面，PHP可以創(chuàng)建、打開、讀取、寫入和關(guān)閉服務(wù)器上的文件；在數(shù)據(jù)庫操作方面，PHP可以對(duì)數(shù)據(jù)庫進(jìn)行查詢、添加、刪除和修改等一系列操作。1083.PHP的優(yōu)點(diǎn)PHP是免費(fèi)的、開源的，且跨平臺(tái)性強(qiáng)。它是運(yùn)行在服務(wù)器端的腳本語言，可以在不同的平臺(tái)上運(yùn)行，且PHP與目前絕大部分市面上的服務(wù)器相兼容。同時(shí)，相對(duì)其他的后端語言，PHP消耗的系統(tǒng)資源明顯較少。109二、Apache軟件PHP作為服務(wù)器端腳本語言，需要在服務(wù)器環(huán)境中運(yùn)行。ApacheHTTPServer（簡(jiǎn)稱Apache）是一個(gè)開源Web服務(wù)器，它支持多種操作系統(tǒng)，并且以其跨平臺(tái)兼容性和安全性而聞名，快速、可靠，可通過簡(jiǎn)單的API擴(kuò)展將多種解釋器編譯進(jìn)去。110三、MySQL數(shù)據(jù)庫管理系統(tǒng)MySQL

是最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，屬于Oracle旗下產(chǎn)品。它將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個(gè)大倉庫內(nèi)，處理速度快、靈活性強(qiáng)。MySQL所使用的SQL是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。111四、超文本傳輸協(xié)議（HTTP）請(qǐng)求超文本傳輸協(xié)議（HyperTextTransferProtocol，HTTP）是一套計(jì)算機(jī)通過網(wǎng)絡(luò)進(jìn)行通信的規(guī)則?？蛻舳耍ㄈ鏦eb瀏覽器）向服務(wù)器提交HTTP請(qǐng)求，服務(wù)器向客戶端返回響應(yīng)，這就構(gòu)成了一套包含請(qǐng)求和應(yīng)答的HTTP連接。112HTTP中的8種常用HTTP請(qǐng)求方法見下表。1138種常用HTTP請(qǐng)求方法創(chuàng)建Vue項(xiàng)目與公共組件任務(wù)21141.?了解Vuex狀態(tài)管理。2.?能根據(jù)項(xiàng)目需求配置Vue?CLI插件。3.?能熟練創(chuàng)建并使用組件。115本任務(wù)主要內(nèi)容是按照項(xiàng)目設(shè)計(jì)需求創(chuàng)建Vue項(xiàng)目，使用VueRouter進(jìn)行頁面路由管理，并使用Vuex進(jìn)行頁面間數(shù)據(jù)交互狀態(tài)管理。116一、Vuex簡(jiǎn)介Vuex

是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式和庫。它采用集中式存儲(chǔ)的方式管理應(yīng)用的所有組件狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)變化的可預(yù)測(cè)性。當(dāng)應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，易破壞單向數(shù)據(jù)流的簡(jiǎn)潔性。因此，Vuex將組件的共享狀態(tài)抽取出來，以一個(gè)全局單例模式進(jìn)行管理，在此模式下，任何組件都能獲取狀態(tài)或觸發(fā)行為。它通過定義和隔離狀態(tài)管理中的各種概念并以強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性實(shí)現(xiàn)代碼的結(jié)構(gòu)化，讓應(yīng)用更易維護(hù)。117二、Vuex核心概念1.StateState

提供全局唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)統(tǒng)一在VuexStore的State中存儲(chǔ)。Vuex通過Vue的插件系統(tǒng)將Store實(shí)例從根組件中“注入”到所有的子組件中。1182.GetterVuex允許開發(fā)人員在Store中定義Getter（Store的計(jì)算屬性）。Getter會(huì)被暴露為store.getters對(duì)象，可使用屬性的形式訪問這些值。3.Mutation更改Vuex中Store狀態(tài)的唯一方法是提交

Mutation（Mutation須是同步函數(shù)）。開發(fā)人員不能直接調(diào)用Mutation處理函數(shù)。若要喚醒Mutation處理函數(shù)，需要以相應(yīng)的類型調(diào)用mit()方法。1194.ActionAction類似于Mutation，不同之處在于Action可以包含異步操作。5.Module由于使用單一狀態(tài)樹時(shí)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象中，所以當(dāng)應(yīng)用較為復(fù)雜時(shí)，Store對(duì)象可能變得較為“臃腫”。為了解決此問題，Vuex允許將Store分割成模塊（Module）。

每個(gè)模塊擁有自己的State、Getter、Mutation和Action，

甚至是嵌套子模塊。120開發(fā)首頁頁面任務(wù)31211.?了解Vue組件生命周期。2.?能使用Axios請(qǐng)求服務(wù)器數(shù)據(jù)。3.?能使用Proxy解決跨域問題。4.?能使用Props向子組件傳值。122本任務(wù)主要內(nèi)容是按照如圖所示的首頁設(shè)計(jì)效果進(jìn)行開發(fā)，首頁內(nèi)容包括上方版塊、“熱門商品”版塊、中部廣告Banner版塊、“資訊”版塊與頁腳版塊。其中，上方版塊的布局包括頁頭組件布局，頁面中的“熱門商品”版塊與“資訊”版塊將根據(jù)后臺(tái)服務(wù)器接口返回的數(shù)據(jù)動(dòng)態(tài)渲染。123首頁的設(shè)計(jì)效果一、Vue組件生命周期1.Vue組件生命周期介紹每個(gè)Vue組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，如設(shè)置數(shù)據(jù)偵聽、編譯模板，將DOM掛載到實(shí)例，在數(shù)據(jù)改變時(shí)更新DOM等。在此過程中，它也會(huì)運(yùn)行被稱為生命周期鉤子的函數(shù)，讓開發(fā)人員有機(jī)會(huì)在特定階段運(yùn)行自己的代碼。Vue組件生命周期的整體過程如圖所示。124125Vue組件生命周期的整體過程2.生命周期鉤子生命周期鉤子屬于組合式API，各生命周期鉤子的說明如下。（1）onMounted()：在組件掛載完成后執(zhí)行。組件在其所有同步子組件都已經(jīng)被掛載后，或其自身的DOM樹已經(jīng)創(chuàng)建完成并插入了父容器后，被視為已掛載。（2）onUpdated()：組件在因?yàn)轫憫?yīng)式狀態(tài)變更而更新其DOM樹之后調(diào)用。父組件的更新鉤子將在其子組件的更新鉤子之后調(diào)用。注意不要在updated鉤子中更改組件的狀態(tài)，否則可能會(huì)導(dǎo)致無限更新循環(huán)。126（3）onUnmounted()：在組件實(shí)例被卸載之后調(diào)用。開發(fā)人員可以在此鉤子中進(jìn)行必要的手動(dòng)清理，如計(jì)時(shí)器、DOM事件監(jiān)聽器或與服務(wù)器的連接等。（4）onBeforeMount()：在組件被掛載之前調(diào)用。（5）onBeforeUpdate()：在組件即將更新之前調(diào)用。（6）onBeforeUnmount()：在組件實(shí)例被卸載之前調(diào)用。127二、Axios網(wǎng)絡(luò)請(qǐng)求1.Axios介紹Axios

是一個(gè)基于Promise異步請(qǐng)求的HTTP庫，它可以用在瀏覽器和“node.js”中。Axios本質(zhì)上是對(duì)原生XMLHTTPRequest（簡(jiǎn)稱XHR）的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。1282.Axios請(qǐng)求（1）GET請(qǐng)求執(zhí)行GET請(qǐng)求的具體代碼如下。129（2）POST請(qǐng)求執(zhí)行POST請(qǐng)求的具體代碼如下。1303.AxiosAPI可以通過向Axios傳遞相關(guān)配置來創(chuàng)建請(qǐng)求，具體代碼如下。131三、跨域請(qǐng)求1.跨域請(qǐng)求介紹同源策略（SameOriginPolicy）是一種約定，它是瀏覽器最核心、最基本的安全功能。出于安全考慮，瀏覽器限制從JavaScript腳本發(fā)起的跨域HTTP請(qǐng)求?？缬蛘?qǐng)求（Cross-OriginRequest）是指當(dāng)前發(fā)起請(qǐng)求的域與該請(qǐng)求指向的資源所在的域不同，包括兩者的協(xié)議、域名和端口號(hào)中任意一個(gè)存在不同，則視為跨域。只有兩者的協(xié)議、域名和端口號(hào)均相同時(shí)才是同域。1322.跨域問題解決方案（1）后端解決跨域方案一：CORS（Cross-OriginResourceSharing，跨域資源共享）是一種由W3C標(biāo)準(zhǔn)化的跨域解決方案，它可以讓服務(wù)器支持跨域請(qǐng)求，并在響應(yīng)頭中添加相關(guān)信息。方案二：JSONP（JSONwithPadding）是一種利用<script>標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求的方法。它在PHP后端中通過動(dòng)態(tài)生成一個(gè)JavaScript函數(shù)調(diào)用，并返回給前端，實(shí)現(xiàn)跨域請(qǐng)求。133（2）前端解決跨域方案：Proxy（代理）是指當(dāng)前端瀏覽器發(fā)出連接請(qǐng)求后，將原本應(yīng)該直接發(fā)送至后臺(tái)服務(wù)器的請(qǐng)求發(fā)送至代理服務(wù)器中，由代理服務(wù)器將請(qǐng)求傳送給后臺(tái)服務(wù)器，并接收后臺(tái)服務(wù)器返回的數(shù)據(jù)，再將數(shù)據(jù)返回給前端瀏覽器，即以代理服務(wù)作為網(wǎng)絡(luò)通信的中轉(zhuǎn)站。134開發(fā)“商品列表”頁面任務(wù)41351.?能進(jìn)行動(dòng)態(tài)樣式綁定。2.?能進(jìn)行條件渲染。3.?能使用Vue?Router編程式導(dǎo)航。136本任務(wù)主要內(nèi)容是按照如圖所示的“商品列表”頁面設(shè)計(jì)效果進(jìn)行開發(fā)，頁面內(nèi)容包括頁頭、頁腳、“商品分類”和“商品列表”等版塊。其中，頁頭組件可直接引入并使用默認(rèn)樣式，頁腳組件已在“App.vue”文件中統(tǒng)一引入?！吧唐贩诸悺卑鎵K中列出3個(gè)不同的商品分類鏈接，并默認(rèn)選中“男式腕表”分類，在選中分類后，將向后臺(tái)服務(wù)器接口請(qǐng)求數(shù)據(jù)，并根據(jù)返回的數(shù)據(jù)動(dòng)態(tài)渲染“商品列表”版塊。137138“商品列表”頁面的設(shè)計(jì)效果一、動(dòng)態(tài)樣式綁定數(shù)據(jù)綁定的一個(gè)常見需求場(chǎng)景是操縱元素的CSSclass列表和內(nèi)聯(lián)樣式。因?yàn)閏lass和style都是元素的屬性，所以可以和其他屬性一樣使用v-bind指令將它們和動(dòng)態(tài)字符串綁定。但是，在處理比較復(fù)雜的綁定時(shí)，通過拼接生成字符串很麻煩且易出錯(cuò)。因此，Vue專門為class和style的v-bind用法提供了特殊的功能增強(qiáng)，相關(guān)表達(dá)式的值除了字符串外，也可以是對(duì)象或數(shù)組。1391.綁定對(duì)象通過向:class（v-bind:class的縮寫）傳遞一個(gè)對(duì)象來動(dòng)態(tài)切換class，示例代碼如下。在上述代碼中，active是否存在取決于數(shù)據(jù)屬性isActive的值的真假。140可以在對(duì)象中寫入多個(gè)字段來操作多個(gè)class。此外，:class指令也可以和一般的class屬性共存。示例代碼如下。141經(jīng)過渲染后，最終的結(jié)果如下。當(dāng)isActive或hasError改變時(shí)，class列表會(huì)隨之更新。綁定的對(duì)象也可以為一個(gè)Object，示例代碼如下。1422.綁定數(shù)組通過為:class綁定一個(gè)數(shù)組來渲染多個(gè)CSSclass，示例代碼如下。143渲染的結(jié)果如下。若需要在數(shù)組中有條件地渲染某個(gè)class，則可以使用三元表達(dá)式，示例代碼如下。errorClass會(huì)一直存在，但activeClass只會(huì)在isActive的值為真時(shí)才存在。然而，在有多個(gè)依賴條件的class的情況下，代碼有些冗長(zhǎng)。因此，可以在數(shù)組中嵌套對(duì)象，示例代碼如下。144二、條件渲染1.v-if指令v-if指令用于有條件性地渲染一塊內(nèi)容，這塊內(nèi)容只會(huì)在指令的表達(dá)式返回真值時(shí)才會(huì)被渲染，示例代碼如下。1452.v-else指令使用v-else指令會(huì)為v-if指令添加一個(gè)else區(qū)塊，示例代碼如下。在上述代碼中，當(dāng)變量awesome為真值時(shí)，顯示第一個(gè)h1的內(nèi)容，否則顯示第二個(gè)h1的內(nèi)容。一個(gè)v-else元素必須跟在一個(gè)v-if元素或v-else-if元素后面，否則它將不會(huì)被識(shí)別。1463.v-else-if指令顧名思義，v-else-if指令是為v-if指令添加一個(gè)else-if區(qū)塊，它可以被連續(xù)多次使用，示例代碼如下。1474.<template>上的v-if指令v-if指令必須依附于某個(gè)元素，在需要切換的元素不止一個(gè)的情況下，可以在一個(gè)<template>元素上使用v-if指令，這是一個(gè)不可見的包裝器元素，最后渲染的結(jié)果并不會(huì)包含這個(gè)<template>元素，示例代碼如下。v-else指令和v-else-if指令也可以在<template>上使用。1485.v-show指令另一個(gè)可以用于按條件顯示一個(gè)元素的是

v-show指令，示例代碼如下。v-show指令與v-if指令的不同之處在于：v-show指令會(huì)在DOM渲染中保留該元素，僅切換該元素上名為display的CSS屬性。v-show指令不支持在<template>元素上使用，也不能和v-else指令搭配使用。1496.v-if指令與v-show指令的區(qū)別v-if指令是“真實(shí)地”按條件渲染，它確保了在切換時(shí)，條件區(qū)塊內(nèi)的事件監(jiān)聽器和子組件都會(huì)被銷毀和重建。v-if指令是惰性的，如果在初次渲染時(shí)條件值為false，則不會(huì)做任何事。條件區(qū)塊只有當(dāng)條件首次變?yōu)閠rue時(shí)才會(huì)被渲染。相比之下，v-show指令簡(jiǎn)單得多，無論元素初始條件如何，它始終會(huì)被渲染，只有CSSdisplay屬性會(huì)被切換?？偟膩碚f，v-if指令有更高的切換開銷，而v-show指令有更高的初始渲染開銷。因此，如果需要頻繁切換，則使用v-show指令較好；如果在運(yùn)行時(shí)綁定條件很少改變，則使用v-if指令會(huì)更合適。150三、VueRouter編程式導(dǎo)航1.導(dǎo)航到指定的URL想要導(dǎo)航到指定的URL，可以使用router.push()方法。該方法會(huì)向history棧添加一個(gè)新記錄，當(dāng)用戶單擊瀏覽器后退按鈕時(shí)，會(huì)回到之前的URL。當(dāng)單擊<router-link>時(shí)，內(nèi)部會(huì)調(diào)用此方法，所以單擊<router-link:to="...">相當(dāng)于調(diào)用router.push()，其對(duì)應(yīng)關(guān)系見下表。151router.push(?)方法的對(duì)應(yīng)關(guān)系router.push()方法的參數(shù)可以是一個(gè)字符串路徑，或一個(gè)描述地址的對(duì)象，示例代碼如下。1522.替換當(dāng)前位置router.replace()方法的作用類似于router.push()方法，唯一不同的是，它在導(dǎo)航時(shí)不會(huì)向history棧添加新記錄，而是取代了當(dāng)前的條目，其對(duì)應(yīng)關(guān)系見下表。153router.replace(?)方法的對(duì)應(yīng)關(guān)系也可以直接在傳遞給router.push()方法的routeLocation中增加屬性replace:true，示例代碼如下。1543.橫跨歷史router.go()方法采用一個(gè)整數(shù)作為參數(shù)，表示在history棧中前進(jìn)或后退多少步，類似于window.history.go(n)，示例代碼如下。155開發(fā)“商品詳情”頁面任務(wù)51561.?能獲取路由對(duì)象Route的屬性。2.?能使用Vuex進(jìn)行狀態(tài)管理。3.?能使用v-if語句進(jìn)行條件渲染。4.?能使用Vue計(jì)算屬性。5.?能使用LocalStorage存取數(shù)據(jù)。157本任務(wù)主要內(nèi)容是按照如圖所示的“商品詳情”頁面設(shè)計(jì)效果進(jìn)行開發(fā)，頁面內(nèi)容包括頁頭、頁腳、“商品參數(shù)”和“商品說明”等版塊。其中，頁頭組件可直接引入并使用默認(rèn)樣式，頁腳組件已在“App.vue”文件中統(tǒng)一引入。158“商品詳情”頁面的設(shè)計(jì)效果頁面需要獲取URL中傳入的商品id參數(shù)，以此向服務(wù)器請(qǐng)求指定id的商品詳細(xì)數(shù)據(jù)，并動(dòng)態(tài)渲染在頁面組件中。當(dāng)用戶單擊“加入購(gòu)物車”按鈕時(shí)，Vuex將更新本地保存的“購(gòu)物車”數(shù)據(jù)，然后跳轉(zhuǎn)到“購(gòu)物車”頁面。159160一、路由對(duì)象（Route）1.Route與Router的區(qū)別Route與Router的區(qū)別如下。（1）路由對(duì)象（Route）表示從當(dāng)前激活的路由中解析得到的信息，包括當(dāng)前的路徑、參數(shù)、query對(duì)象，以及URL匹配到的路由記錄（RouteRecords）等。路由對(duì)象是不可變的，每次成功地導(dǎo)航后都會(huì)產(chǎn)生一個(gè)新的路由對(duì)象。（2）Router是全局路由的實(shí)例，可用來操作路由，包括路由的跳轉(zhuǎn)、替換等。2.Route屬性（1）path：表示當(dāng)前路由的路徑，解析結(jié)果為絕對(duì)路徑，如/about。（2）params：包含動(dòng)態(tài)片段和全匹配片段的對(duì)象，如果沒有路由參數(shù)則是一個(gè)空對(duì)象。（3）query：表示URL查詢參數(shù)的對(duì)象。（4）hash：表示當(dāng)前路由的hash值（帶#），如果沒有hash值則為空字符串。161（5）fullPath：表示完成解析后的URL，包含查詢參數(shù)和hash的完整路徑。（6）matched：包含當(dāng)前路由的所有嵌套路徑片段的路由記錄的數(shù)組。（7）