Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級(jí)：授課學(xué)期：教師姓名：年月日課程名稱第1章 Vue.js簡(jiǎn)介計(jì)劃學(xué)時(shí)2內(nèi)容分析隨著前端技術(shù)的發(fā)展，網(wǎng)頁(yè)依賴于JavaScript技術(shù)的網(wǎng)頁(yè)交互能力得到長(zhǎng)足的發(fā)展，JavaScript使網(wǎng)頁(yè)的用戶提要更為具象化。網(wǎng)頁(yè)動(dòng)態(tài)化的增強(qiáng)必然要求復(fù)雜JavaScript邏輯代碼的支持，成千上萬(wàn)行的JavaScript代碼連接著HTML和CSS文件，但是傳統(tǒng)的解決方案都不夠靈活和可定制，于是Vue.js框架應(yīng)運(yùn)而生。Vue.js框架是一個(gè)依賴于JavaScript的輕量級(jí)框架，可將HTML、CSS和JS組合到一個(gè)組件中進(jìn)行組件化開發(fā)，實(shí)現(xiàn)數(shù)據(jù)與結(jié)構(gòu)分離，減少代碼量，提升開發(fā)效率。在使用Vue.js3.0創(chuàng)建項(xiàng)目前，應(yīng)先了解基本的Web前端技術(shù)與Vue.js的相關(guān)知識(shí)。本章將重點(diǎn)介紹Web前端的發(fā)展歷程、MV*模式、Vue.js的相關(guān)知識(shí)和Vue.js3.0的新變化，帶領(lǐng)讀者開啟Vue.js前端開發(fā)之旅。教學(xué)目標(biāo)與教學(xué)要求【知識(shí)目標(biāo)】了解Web前端的發(fā)展歷程了解MV*模式的異同理解Vue.js的相關(guān)知識(shí)掌握Vue.js3.0的新變化【技能目標(biāo)】能夠描述MV*模式的異同能夠歸納Vue.js3.0的新變化【育人目標(biāo)】通過引導(dǎo)學(xué)生發(fā)現(xiàn)問題、提出問題和解決問題的過程，培養(yǎng)學(xué)生的求知欲，激發(fā)學(xué)生的創(chuàng)新思維。引導(dǎo)學(xué)生編寫高質(zhì)量、可靠、安全的代碼，培養(yǎng)學(xué)生遵守編程方面的相關(guān)法律和道德準(zhǔn)則。教學(xué)重點(diǎn)MV*模式漸進(jìn)式框架響應(yīng)式系統(tǒng)前端框架對(duì)比Vue.js3.0的新變化教學(xué)難點(diǎn)無教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一課時(shí)（Web前端發(fā)展歷程、MV*模式、Vue的發(fā)展歷程、Vue的生態(tài)系統(tǒng)）提出需求，導(dǎo)入學(xué)習(xí)任務(wù)通過情景導(dǎo)入的方式引出本節(jié)內(nèi)容老師通過講解Web前端發(fā)展歷史引出要講解的Web前端發(fā)展歷程、MV*模式、Vue的發(fā)展歷程、Vue的生態(tài)系統(tǒng)。明確學(xué)習(xí)目標(biāo)了解Web前端發(fā)展歷程理解MV*模式的異同了解Vue的發(fā)展歷程了解Vue的生態(tài)系統(tǒng)知識(shí)講解知識(shí)點(diǎn)1-Web前端發(fā)展歷程在近30年的前端發(fā)展進(jìn)程中，各種前端技術(shù)層出不窮，根據(jù)主流技術(shù)的更迭可將前端發(fā)展進(jìn)程劃分為7個(gè)時(shí)期，接下來將詳細(xì)介紹這七大時(shí)期。靜態(tài)頁(yè)面階段JavaScript誕生AJAX開啟Web2.0時(shí)代前端兼容性框架的出現(xiàn)HTML5的出現(xiàn)前端三大主流框架ECMAScript6.0的發(fā)布知識(shí)點(diǎn)2-MV*模式本節(jié)將圍繞MVC模式、MVP模式和MVVM模式進(jìn)行介紹。MVC模式MVC（ModelViewController）是軟件工程中的一種軟件架構(gòu)模式，它把軟件系統(tǒng)分為模型（Model，簡(jiǎn)稱M）、視圖（View，簡(jiǎn)稱V）和控制器（Controller，簡(jiǎn)稱C）三個(gè)基本部分。MVC模式的示意圖如下圖所示。MVP模式在MVP模式中，模型（Model）提供數(shù)據(jù)、視圖（View）負(fù)責(zé)顯示、表示器（Presenter）負(fù)責(zé)處理業(yè)務(wù)邏輯。MVP模式的示意圖如下圖所示。MVVM模式MVVM（Model-View-ViewModel）模式由模型（Model，簡(jiǎn)稱M）、視圖（View，簡(jiǎn)稱V）和視圖模型（ViewModel，簡(jiǎn)稱VM）三部分組成，它本質(zhì)上仍是MVC的改進(jìn)版。MVVM模式的示意圖如下圖所示。知識(shí)點(diǎn)3-Vue的發(fā)展歷程時(shí)至今日Vue已歷經(jīng)多次更新，其發(fā)展過程如下所示。2013年12月7日，Vue的0.6.0版在GitHub上發(fā)布。2015年10月26日，正式發(fā)布了1.0.0版本，Vue被越來越多的開發(fā)者所接納。2016年10月1日，正式發(fā)布了2.0.0版本。2017年發(fā)布了多個(gè)Vue版本，該年度發(fā)布的第一個(gè)Vue版本是v2.1.9，該年度發(fā)布的最后一個(gè)版本為v2.5.13。2019年正式發(fā)布Vue的穩(wěn)定版本v2.5.13。2020年9月18日，Vue.js3.0正式發(fā)布，代號(hào)OnePiece。本書將基于新發(fā)布的Vue.js3.0版本進(jìn)行知識(shí)講解。知識(shí)點(diǎn)4-Vue的生態(tài)系統(tǒng)Vue的生態(tài)系統(tǒng)結(jié)構(gòu)圖如下圖所示。Vue不僅能夠滿足小型的前端項(xiàng)目開發(fā)，還能夠支持大型前端項(xiàng)目的開發(fā)，Vue踐行前后端分離式開發(fā)，可實(shí)現(xiàn)項(xiàng)目的快速開發(fā)。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第二課時(shí)（漸進(jìn)式框架、響應(yīng)式系統(tǒng)、前端框架對(duì)比、Vue.js3.0的新變化）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的漸進(jìn)式框架、響應(yīng)式系統(tǒng)、前端框架對(duì)比、Vue.js3.0的新變化等內(nèi)容。明確學(xué)習(xí)目標(biāo)理解漸進(jìn)式框架理解響應(yīng)式系統(tǒng)理解前端框架對(duì)比掌握Vue.js3.0的新變化知識(shí)講解知識(shí)點(diǎn)1-漸進(jìn)式框架“漸進(jìn)式”就是將框架進(jìn)行分層規(guī)劃，框架的每層功能都是獨(dú)立可自選的，不同層可被替換為開發(fā)者所熟悉的其他方案。Vue漸進(jìn)式框架分層結(jié)構(gòu)如下圖所示。知識(shí)點(diǎn)2-響應(yīng)式系統(tǒng)Vue的MVVM模式實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定，為Vue構(gòu)建了一套響應(yīng)式系統(tǒng)。響應(yīng)式系統(tǒng)可在數(shù)據(jù)變化時(shí)自動(dòng)渲染視圖，接下來分別介紹Vue2與Vue3的響應(yīng)式原理。Vue2使用ES5的Object.defineProperty()方法，重新定義對(duì)象獲取屬性值的方法get()和設(shè)置屬性值的方法set()，實(shí)現(xiàn)了Vue的“雙向數(shù)據(jù)綁定”操作。Vue的作者重構(gòu)了Vue3響應(yīng)式系統(tǒng)，使用ES6中的Proxy替換Object.defineProperty()方法。Proxy被稱為代理器，可實(shí)現(xiàn)對(duì)其他對(duì)象的代理，外界對(duì)被代理對(duì)象進(jìn)行的所有操作，均會(huì)被Proxy攔截、過濾、代理操作。知識(shí)點(diǎn)3-前端框架對(duì)比接下來將介紹Vue與Angular、React這兩個(gè)前端主流框架的比較。ue與AngularAngular是強(qiáng)主張的，開發(fā)者使用Angular時(shí)，必須接受它的使用規(guī)則，如模塊機(jī)制、必須依賴注入、特殊形式定義組件等。Vue與ReactReact與Vue存在很多相同之處，如React和Vue均支持?jǐn)?shù)據(jù)驅(qū)動(dòng)視圖、組件化、虛擬DOM和Diff算法。當(dāng)開發(fā)者想要一個(gè)輕量級(jí)，更快速，更現(xiàn)代的框架來制作單頁(yè)面應(yīng)用程序時(shí)，推薦選擇Vue，開發(fā)大規(guī)模應(yīng)用程序和移動(dòng)應(yīng)用程序時(shí)推薦選擇React。知識(shí)點(diǎn)4-Vue.js3.0的新變化接下來將簡(jiǎn)要介紹Vue3的新變化。響應(yīng)式系統(tǒng)性能優(yōu)化組合API（CompositionAPI）碎片（Fragment）Tree-shaking支持Teleport懸念（Suspense）更好的TypeScript支持知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。習(xí)題教材第1章習(xí)題教學(xué)后記Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級(jí)：授課學(xué)期：教師姓名：年月日課程名稱第2章 Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建計(jì)劃學(xué)時(shí)3內(nèi)容分析在開發(fā)Vue前端頁(yè)面之前，需要搭建好開發(fā)和測(cè)試環(huán)境，良好的開發(fā)環(huán)境對(duì)于穩(wěn)定開發(fā)者以及提高生產(chǎn)效率都有著不可忽視的作用。在創(chuàng)建Vue項(xiàng)目之前，需要先搭建良好的Vue.js開發(fā)環(huán)境，包括安裝Vue.js，理解Vue.js多種安裝方式的不同之處，選擇并安裝合適的開發(fā)工具，進(jìn)而提高開發(fā)效率，安裝為調(diào)試項(xiàng)目服務(wù)的調(diào)試工具vue-devtools等，使開發(fā)者在完成環(huán)境搭建的基礎(chǔ)上掌握Vue項(xiàng)目創(chuàng)建的方法，帶領(lǐng)讀者開啟Vue前端開發(fā)之旅。教學(xué)目標(biāo)與教學(xué)要求【知識(shí)目標(biāo)】了解Vue.js的多種安裝方法掌握Vue.js開發(fā)工具的安裝熟悉Vue.js調(diào)試工具的安裝掌握Vue.js項(xiàng)目創(chuàng)建的技巧【技能目標(biāo)】能夠正確安裝Vue.js開發(fā)工具能夠正確安裝Vue.js調(diào)試工具能夠創(chuàng)建Vue.js項(xiàng)目【育人目標(biāo)】鼓勵(lì)學(xué)生動(dòng)手實(shí)踐，培養(yǎng)學(xué)生的創(chuàng)新思維，促進(jìn)學(xué)生的個(gè)性發(fā)展。培養(yǎng)學(xué)生網(wǎng)絡(luò)的倫理道德和法律法規(guī)，促進(jìn)學(xué)生養(yǎng)成良好的習(xí)慣。教學(xué)重點(diǎn)安裝Vue.js安裝VSCode安裝vue-devtools實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序教學(xué)難點(diǎn)實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一課時(shí)（安裝Vue.js、Web前端開發(fā)工具）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的安裝Vue.js、Web前端開發(fā)工具等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握Vue.js的安裝方式理解Web前端開發(fā)工具VisualStudioCode知識(shí)講解知識(shí)點(diǎn)1-安裝Vue.jsVue.js的常用安裝方式主要有4種，包括CDN方式、NPM方式、VueCLI方式、Vite方式。CDN方式安裝Vue.jsCDN方式安裝Vue.js的語(yǔ)法格式開發(fā)者可借助script標(biāo)簽實(shí)現(xiàn)CDN方式安裝Vue.js，語(yǔ)法格式如下所示。<scriptsrc="/vue@next"></script>CDN方式安裝Vue.js的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：不需要下載和安裝Vue.js，可以直接使用CDN文件，減少了本地文件占用和維護(hù)的成本。缺點(diǎn)：依賴于CDN服務(wù)商，可能會(huì)出現(xiàn)CDN服務(wù)不穩(wěn)定或者CDN文件更新不及時(shí)的情況。NPM方式安裝Vue.jsNPM方式安裝Vue.js的命令代碼NPM方式安裝Vue.js的命令代碼如下所示。#安裝最新穩(wěn)定版$npminstallvue@next安裝CNPM的命令代碼如下所示。npminstall-gcnpm--registry=完成CNPM安裝后，開發(fā)者可使用cnpm命令安裝項(xiàng)目所需模塊，具體命令代碼如下所示。cnpminstall模塊名稱NPM方式安裝Vue.js的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：可以自由選擇Vue的版本和更新方式；可以使用Vue的腳手架工具VueCLI，方便快捷地創(chuàng)建和管理Vue項(xiàng)目；可以和其他NPM包管理器配合使用。缺點(diǎn)：需要下載和安裝Node.js和NPM環(huán)境，增加了本地文件占用和維護(hù)成本。安裝速度可能會(huì)受到網(wǎng)絡(luò)環(huán)境的影響。VueCLI安裝Vue提供了一個(gè)官方的腳手架VueCLI，它可以快速搭建一個(gè)應(yīng)用，它為現(xiàn)代前端提供了batteries-included的構(gòu)建設(shè)置。若讀者是初學(xué)者，建議讀者先熟悉Vue本身之后再使用VueCLI。本書將在第9章將詳細(xì)介紹腳手架的安裝及使用。Vite安裝Vite是Vue的作者開發(fā)的一個(gè)面向現(xiàn)代瀏覽器的，更加輕量、快捷的前端構(gòu)建工具，Vite可為前端工作者提供良好的開發(fā)體驗(yàn)。本書將在第9章詳細(xì)介紹Vite的安裝與使用。知識(shí)點(diǎn)2-Web前端開發(fā)工具目前市場(chǎng)上主流的Web前端開發(fā)工具有WebStorm、VisualStudioCode、SublimeText、HBuilderX、Dreamweaver等，本書選用的開發(fā)工具是VisualStudioCode。VisualStudioCode（簡(jiǎn)稱VSCode）是微軟開發(fā)的一個(gè)輕量級(jí)代碼編輯器，支持常見的語(yǔ)法提示、代碼高亮、Git等功能，具有開源、免費(fèi)、跨平臺(tái)、插件擴(kuò)展豐富、運(yùn)行速度快、占用內(nèi)存少，開發(fā)效率高等特點(diǎn)，網(wǎng)頁(yè)開發(fā)中經(jīng)常會(huì)使用到該軟件，非常靈活方便。讀者可進(jìn)入VSCode官方頁(yè)面，下載VSCode的安裝包進(jìn)行安裝，官方頁(yè)面如下圖所示。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第二課時(shí)（安裝VSCode、安裝vue-devtools、實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的安裝VSCode、安裝vue-devtools、實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握VSCode的安裝方式掌握vue-devtools的安裝方式掌握創(chuàng)建第一個(gè)Vue.js程序的方式知識(shí)講解知識(shí)點(diǎn)1-安裝VSCode本節(jié)將對(duì)VSCode的安裝和VSCode插件的安裝進(jìn)行介紹。VSCode的安裝首先打開VSCode的官方網(wǎng)站，選擇Windows選項(xiàng)中的UserInstaller下載VSCode。下載完成后的文件名為VSCodeUserSetup-x64-1.67.0.exe，運(yùn)行該文件進(jìn)入VSCode的安裝界面，根據(jù)向?qū)Ы缑娴奶崾?，連續(xù)單擊“下一步”按鈕即可完成VSCode的安裝。VSCode插件的安裝接下來將詳細(xì)介紹Vue開發(fā)中常用的4個(gè)插件。Chinese中文Vetur代碼高亮ESLint代碼檢測(cè)校驗(yàn)CodeRunner快捷運(yùn)行知識(shí)點(diǎn)2-安裝vue-devtoolsvue-devtools是一款基于GoogleChrome瀏覽器、用于調(diào)試Vue應(yīng)用的瀏覽器擴(kuò)展。接下來介紹vue-devtools的安裝步驟。下載壓縮包解壓安裝包下載第三方依賴執(zhí)行npminstall-gyarn命令安裝yarn。執(zhí)行yarninstall命令下載第三方依賴。vue-devtools源碼編譯完成后，可查看devtools-main文件夾的目錄結(jié)構(gòu)。Google瀏覽器的開發(fā)者模式打開Google瀏覽器，選擇擴(kuò)展程序選項(xiàng)。進(jìn)入擴(kuò)展程序管理頁(yè)面，單擊開發(fā)者模式右側(cè)的單選按鈕開啟開發(fā)者模式。安裝vue-devtools開啟Google瀏覽器的開發(fā)者模式后，單擊“加載已解壓的擴(kuò)展程序”按鈕并選擇devtools-main文件夾下的packages\shell-chrome文件夾，即可安裝vue-devtools擴(kuò)展。知識(shí)點(diǎn)3-實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序本節(jié)將以八大菜系為主題，構(gòu)建一個(gè)“菜系介紹”頁(yè)面。菜系介紹頁(yè)面結(jié)構(gòu)簡(jiǎn)圖菜系介紹頁(yè)面的結(jié)構(gòu)簡(jiǎn)圖如下圖所示。實(shí)現(xiàn)菜系介紹頁(yè)面效果使用Vue創(chuàng)建程序非常簡(jiǎn)單，具體步驟如下所示。第1步，安裝Vue.js庫(kù)并使用Vue.createApp()方法創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗?。?步，在data()函數(shù)中定義頁(yè)面中需要渲染的數(shù)據(jù)，將data()中的數(shù)據(jù)通過{{}}插值語(yǔ)法展示在頁(yè)面中。第3步，調(diào)用mount()方法在指定的DOM元素上掛載應(yīng)用程序?qū)嵗母M件，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，具體代碼可參考教學(xué)PPT或教材。讀者可使用瀏覽器控制臺(tái)或vue-devtools調(diào)試工具來驗(yàn)證其數(shù)據(jù)的響應(yīng)性。Console選項(xiàng)在瀏覽器中運(yùn)行上述代碼，按下F12鍵打開控制臺(tái)，切換至Console選項(xiàng)，并輸入vm.detail="豆腐為補(bǔ)益、清熱養(yǎng)生食品"，按下Enter鍵，可以發(fā)現(xiàn)頁(yè)面中的詳情介紹內(nèi)容同步發(fā)生了變化，顯示效果如下圖所示。Vue選項(xiàng)使用vue-devtools進(jìn)行調(diào)試，按下F12鍵打開控制臺(tái)，切換至Vue選項(xiàng)，并修改detail="此菜夏天食用能生津止渴"，單擊“保存”按鈕，可以發(fā)現(xiàn)頁(yè)面中的內(nèi)容同步發(fā)生了變化，顯示效果如下圖所示。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。上機(jī)：（考察知識(shí)點(diǎn)為安裝Vue.js、安裝VSCode、安裝vue-devtools、實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序）形式：?jiǎn)为?dú)完成題目：請(qǐng)按照以下要求完成操作，要求如下：完成Vue.js、VSCode、vue-devtools的安裝；完成創(chuàng)建第一個(gè)Vue.js程序。習(xí)題教材第2章習(xí)題教學(xué)后記Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級(jí)：授課學(xué)期：教師姓名：年月日課程名稱第3章 ECMAScript6語(yǔ)法計(jì)劃學(xué)時(shí)8內(nèi)容分析ECMAScript6（簡(jiǎn)稱ES6）是ECMAScript5（簡(jiǎn)稱ES5）之后發(fā)布的JavaScript語(yǔ)言的新一代標(biāo)準(zhǔn)，其中包含了很多新的特性和語(yǔ)法。以Chrome和Firefox為首的現(xiàn)代瀏覽器對(duì)ES6的支持相當(dāng)迅速，不僅支持了ES6的絕大多數(shù)特性，還使ES6的普及速度遠(yuǎn)超ES5。ES6的目標(biāo)是使JavaScript語(yǔ)言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)的開發(fā)語(yǔ)言。在Vue項(xiàng)目中經(jīng)常使用ES6語(yǔ)法，本章將帶領(lǐng)讀者學(xué)習(xí)ES6新標(biāo)準(zhǔn)中的一些特性與常用語(yǔ)法。教學(xué)目標(biāo)與教學(xué)要求【知識(shí)目標(biāo)】了解ECMAScript6基本知識(shí)掌握塊作用域構(gòu)造與模板字符串的使用掌握ECMAScript6默認(rèn)參數(shù)與rest參數(shù)的使用掌握展開運(yùn)算符、解構(gòu)賦值、箭頭函數(shù)的使用掌握Symbol、Promise、Class的基本語(yǔ)法掌握Module模塊與async函數(shù)的基本語(yǔ)法【技能目標(biāo)】能夠正確使用塊作用域構(gòu)造與模板字符串能夠正確使用ECMAScript6默認(rèn)參數(shù)與rest參數(shù)能夠正確使用展開運(yùn)算符、解構(gòu)賦值、箭頭函數(shù)能夠正確使用Symbol、Promise、Class的基本語(yǔ)法能夠正確使用Module模塊與async函數(shù)的基本語(yǔ)法【育人目標(biāo)】鼓勵(lì)學(xué)生動(dòng)手實(shí)踐，培養(yǎng)學(xué)生的創(chuàng)新思維，促進(jìn)學(xué)生的個(gè)性發(fā)展。培養(yǎng)學(xué)生網(wǎng)絡(luò)的倫理道德和法律法規(guī)，促進(jìn)學(xué)生養(yǎng)成良好的習(xí)慣。教學(xué)重點(diǎn)let聲明const聲明模板字面量默認(rèn)參數(shù)rest參數(shù)展開運(yùn)算符解構(gòu)的必要性對(duì)象解構(gòu)數(shù)組解構(gòu)箭頭函數(shù)的基本語(yǔ)法箭頭函數(shù)與this指向?qū)嶒?yàn)：用戶信息頁(yè)Symbol的基本語(yǔ)法作為屬性名的Symbol共享的SymbolPromise的基本語(yǔ)法Promise的生命周期Promise的原型方法ClassModule模塊async函數(shù)實(shí)訓(xùn)：商品訂單頁(yè)面教學(xué)難點(diǎn)實(shí)驗(yàn)：用戶信息頁(yè)實(shí)訓(xùn)：商品訂單頁(yè)面教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一、二課時(shí)（ECMAScript6介紹、let聲、const聲明、模板字面量、默認(rèn)參數(shù)、rest參數(shù)、展開運(yùn)算符）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的ECMAScript6介紹、let聲、const聲明、模板字面量、默認(rèn)參數(shù)、rest參數(shù)、展開運(yùn)算符等內(nèi)容。明確學(xué)習(xí)目標(biāo)了解ECMAScript6的簡(jiǎn)介掌握l(shuí)et聲、const聲明、模板字面量的使用掌握默認(rèn)參數(shù)和rest參數(shù)的使用掌握展開運(yùn)算符的使用知識(shí)講解知識(shí)點(diǎn)1-ECMAScript6介紹Navigator在瀏覽器市場(chǎng)上落于下風(fēng)，于是網(wǎng)景通信公司將JavaScript提交到歐洲計(jì)算機(jī)制造商協(xié)會(huì)(EuropeanComputerManufacturersAssociation，ECMA)，推動(dòng)制定了ECMAScript標(biāo)準(zhǔn)，這也是ECMAScript6的由來。隨著JavaScript的一次次更新，ECMAScript也發(fā)布了多個(gè)版本，ECMAScript的版本更新具體參考教學(xué)PPT或教材。知識(shí)點(diǎn)2-let聲ES6新增了let命令用于聲明變量，其用法與var命令類似。但let命令聲明的變量具有塊級(jí)作用域，不存在變量提升機(jī)制，可產(chǎn)生暫時(shí)性死區(qū)效果，不可在同一作用域下重復(fù)聲明同名變量。塊級(jí)作用域let命令所聲明的變量只在let命令所在的代碼塊內(nèi)有效。暫時(shí)性死區(qū)JavaScript的變量提升機(jī)制使var命令聲明的變量，無論在何處聲明均會(huì)被視為在當(dāng)前作用域頂部聲明的變量。但let命令聲明的變量不存在變量提升機(jī)制，在變量聲明之前使用該變量，該變量不可訪問且會(huì)形成暫時(shí)性死區(qū)。不可重復(fù)聲明var命令可以重復(fù)聲明同名變量，后定義的變量將覆蓋先聲明的變量。在ES6中，let命令可用于避免變量的重復(fù)聲明。知識(shí)點(diǎn)3-const聲明ES6新增了const命令用于聲明常量，其用法與let命令類似，同樣具有塊級(jí)作用域，不存在變量提升機(jī)制，可產(chǎn)生暫時(shí)性死區(qū)效果，不可重復(fù)聲明。const命令聲明的常量不可改變，且必須在聲明的同時(shí)對(duì)常量進(jìn)行初始化。下面對(duì)const常量的初始化、一次賦值、對(duì)象常量、全局塊作用域綁定進(jìn)行介紹。const常量初始化每個(gè)使用const命令聲明的常量都必須在聲明的同時(shí)進(jìn)行初始化賦值。consta=10;//正確constb;//報(bào)錯(cuò):'const'declarationsmustbeinitializedb=100;const常量的一次賦值當(dāng)const命令聲明的常量是基礎(chǔ)數(shù)據(jù)類型時(shí)，不可修改該常量的值。const常量的一次賦值與多次賦值效果，示例代碼如下。consta="hello";a="你好";//報(bào)錯(cuò):"Assignmenttoconstantvariable."const對(duì)象常量當(dāng)const命令聲明的常量是引用數(shù)據(jù)類型的時(shí)候，其棧內(nèi)存的引用地址不可更改，其堆內(nèi)存中保存的值可以被更改。const命令聲明的對(duì)象常量的屬性修改，示例代碼如下。constobj={prices:'100'};obj.prices="200";//可修改對(duì)象的屬性值console.log(obj);//輸出：{prices:'200'}//不可修改對(duì)象的引用地址，拋出錯(cuò)誤提示"Assignmenttoconstantvariable."obj={prices="300"};全局塊作用域綁定var命令與let、const命令的另一個(gè)區(qū)別是它們?cè)谌肿饔糜蛑械男袨椋谌肿饔糜蛑惺褂胿ar命令會(huì)創(chuàng)建一個(gè)新的全局變量作為全局對(duì)象（window）的屬性，這意味著var命令聲明的變量可能會(huì)覆蓋一個(gè)已經(jīng)存在的全局屬性。知識(shí)點(diǎn)4-模板字面量ES6引入了模板字面量（TemplateLiterals），以模板字面量的方式對(duì)ES5的字符串操作進(jìn)行了增強(qiáng)，如新增了多行字符串、字符串占位符等。模板字面量的基礎(chǔ)用法模板字面量的基礎(chǔ)用法，示例代碼如下。letmessage=`HelloWorld`;console.log(message);//輸出結(jié)果:"HelloWorld"對(duì)模板字面量?jī)?nèi)的反引號(hào)進(jìn)行轉(zhuǎn)義，示例代碼如下。letmessage2=`\`Hello\`World`;console.log(message2);//輸出結(jié)果:"`Hello`World"多行字符串多行字符串可以提升代碼的可讀性和可維護(hù)性，下面介紹ES5與ES6中多行字符串的創(chuàng)建方法。ES5的多行字符串創(chuàng)建方法ES6的多行字符串創(chuàng)建方法字符串占位符在ES6新增的模板字面量中，可將JavaScript變量或合法的JavaScript表達(dá)式嵌入字符串占位符并將其作為字符串的組成部分輸出到頁(yè)面中。模板字面量的嵌套示例事實(shí)上，模板字面量也是JavaScript表達(dá)式，讀者可在一個(gè)模板字面量?jī)?nèi)嵌套另一個(gè)模板字面量。知識(shí)點(diǎn)5-默認(rèn)參數(shù)下面對(duì)ES5中的模擬默認(rèn)參數(shù)和ES6中的默認(rèn)參數(shù)進(jìn)行介紹。ES5中模擬默認(rèn)參數(shù)在ES5中，沒有直接在函數(shù)參數(shù)列表中設(shè)置默認(rèn)值的語(yǔ)法，如果想為函數(shù)參數(shù)設(shè)置默認(rèn)值，需要使用短路運(yùn)算符來模擬。2.ES6中的默認(rèn)參數(shù)ES6簡(jiǎn)化了為形參設(shè)置默認(rèn)值的過程，可直接在參數(shù)列表中為形參指定默認(rèn)值。知識(shí)點(diǎn)6-rest參數(shù)下面對(duì)arguments對(duì)象、rest參數(shù)的語(yǔ)法格式及示例進(jìn)行介紹。arguments對(duì)象JavaScript允許開發(fā)者聲明任意數(shù)量的形參，可以傳入任意數(shù)量的實(shí)參，并提供了arguments對(duì)象接收傳入的所有實(shí)參。rest參數(shù)的語(yǔ)法格式ES6為彌補(bǔ)arguments對(duì)象的不足引入了不定參數(shù)（RestParameters，簡(jiǎn)稱rest參數(shù)）。在函數(shù)的命名參數(shù)前添加3個(gè)點(diǎn)（···）即可定義一個(gè)rest參數(shù)，該參數(shù)是一個(gè)數(shù)組，包含自它之后傳入的所有參數(shù)，使用該命名參數(shù)即可逐一訪問里面的參數(shù)。與arguments不同，rest參數(shù)可調(diào)用JavaScript的數(shù)組方法。rest參數(shù)的語(yǔ)法格式如下所示。function(op,...data){}rest參數(shù)示例使用rest參數(shù)設(shè)計(jì)一個(gè)一則運(yùn)算函數(shù)，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)7-展開運(yùn)算符展開運(yùn)算符可將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列，即“展開”一個(gè)數(shù)組使其變?yōu)槎鄠€(gè)元素，也可取出對(duì)象的所有可遍歷屬性，而rest參數(shù)則會(huì)收集多個(gè)各自獨(dú)立的元素并將其“壓縮”成一個(gè)偽數(shù)組。函數(shù)調(diào)用與展開運(yùn)算符在函數(shù)調(diào)用中使用展開運(yùn)算符，可將數(shù)組中的全部數(shù)據(jù)作為實(shí)參傳入函數(shù)中。數(shù)組與展開運(yùn)算符（1）復(fù)制數(shù)組在數(shù)組中使用展開運(yùn)算符可實(shí)現(xiàn)數(shù)組的深拷貝。（2）合并數(shù)組展開運(yùn)算符可實(shí)現(xiàn)數(shù)組的快速合并，接下來使用展開運(yùn)算符演示合并數(shù)組。對(duì)象與展開運(yùn)算符展開運(yùn)算符還可用于取出對(duì)象的所有可遍歷屬性，并將其復(fù)制于當(dāng)前對(duì)象中。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三、四課時(shí)（解構(gòu)的必要性、對(duì)象解構(gòu)、數(shù)組解構(gòu)、箭頭函數(shù)的基本語(yǔ)法、箭頭函數(shù)與this指向、實(shí)驗(yàn)：用戶信息頁(yè)、Symbol的基本語(yǔ)法、作為屬性名的Symbol、共享的Symbol）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的解構(gòu)的必要性、對(duì)象解構(gòu)、數(shù)組解構(gòu)、箭頭函數(shù)的基本語(yǔ)法、箭頭函數(shù)與this指向、實(shí)驗(yàn)：用戶信息頁(yè)、Symbol的基本語(yǔ)法、作為屬性名的Symbol、共享的Symbol等內(nèi)容。明確學(xué)習(xí)目標(biāo)理解解構(gòu)的必要性掌握對(duì)象解構(gòu)和數(shù)組解構(gòu)的使用方式掌握箭頭函數(shù)的基本語(yǔ)法、箭頭函數(shù)與this指向掌握用戶信息頁(yè)的實(shí)現(xiàn)掌握Symbol的基本語(yǔ)法、作為屬性名的Symbol、共享的Symbol的使用方式知識(shí)講解知識(shí)點(diǎn)1-解構(gòu)的必要性在ES5中，從數(shù)組或?qū)ο笾刑崛≈付〝?shù)據(jù)并賦值給變量需要大量的同質(zhì)化代碼。接下來以用戶信息為主題來演示獲取對(duì)象中的數(shù)據(jù)并賦值給新變量，具體代碼如下所示。identify.htmlletuser={username:'張明明',identify:'vip',favorable:'99%'};letname=user.username;letid=user.identify;console.log(name,id);//輸出結(jié)果：張明明vip上述代碼中，從對(duì)象user中提取了username和identify的值并分別將其存儲(chǔ)為變量name和變量id，高度同質(zhì)化的數(shù)據(jù)提取，造成了代碼的冗余。當(dāng)目標(biāo)對(duì)象的數(shù)據(jù)結(jié)構(gòu)復(fù)雜，提取的數(shù)據(jù)量較大時(shí)，不建議使用該方法。知識(shí)點(diǎn)2-對(duì)象解構(gòu)對(duì)象解構(gòu)的語(yǔ)法形式是在一個(gè)賦值操作符的左側(cè)放置一個(gè)對(duì)象字面量。下面對(duì)對(duì)象解構(gòu)基本用法、對(duì)象解構(gòu)賦值和默認(rèn)值進(jìn)行介紹。對(duì)象解構(gòu)的基本用法在解構(gòu)對(duì)象時(shí)，等號(hào)左側(cè)的變量與其右側(cè)對(duì)象的屬性必須同名，才可取到正確的值。對(duì)象的屬性沒有次序，變量順序與屬性順序無需保持一致。對(duì)象解構(gòu)的基本用法，示例代碼如下。letmsg={foo:'aaa',bar:'bbb'}let{foo,bar}=msg;//對(duì)象解構(gòu)console.log(foo,bar);//輸出結(jié)果:"aaa,bbb"當(dāng)?shù)忍?hào)左側(cè)的變量沒有對(duì)應(yīng)的同名屬性時(shí)，對(duì)象解構(gòu)失敗，變量獲取不到值，則變量的值為undefined，示例代碼如下。letmsg={foo:'aaa',bar:'bbb'}let{baz}=msg;console.log(baz);//輸出結(jié)果:undefined對(duì)象解構(gòu)賦值在已聲明變量的前提下，使用解構(gòu)賦值語(yǔ)法修改變量值，需要使用圓括號(hào)包裹整個(gè)解構(gòu)賦值語(yǔ)句，語(yǔ)法格式如下所示。({變量1,變量2}=對(duì)象1);對(duì)象解構(gòu)的默認(rèn)值在對(duì)象解構(gòu)中，當(dāng)指定的本地變量名稱在對(duì)象中不存在時(shí)，則該本地變量的值會(huì)被賦值為undefined，具體案例可參考對(duì)象解構(gòu)的基本語(yǔ)法中對(duì)象解構(gòu)失敗演示。在此類情況下，讀者可考慮為該本地變量定義一個(gè)默認(rèn)值，即在變量后添加一個(gè)等號(hào)（=）和相應(yīng)的默認(rèn)值。接下來將演示對(duì)象解構(gòu)的默認(rèn)值設(shè)置，示例代碼如下。letmsg={foo:'aaa',bar:'bbb'};let{baz='hello'}=msg;console.log(baz);//輸出結(jié)果:'hello'知識(shí)點(diǎn)3-數(shù)組解構(gòu)下面對(duì)數(shù)組解構(gòu)基本用法、數(shù)組的不完全解構(gòu)、數(shù)組解構(gòu)賦值和默認(rèn)值進(jìn)行介紹。數(shù)組解構(gòu)的基本語(yǔ)法數(shù)組解構(gòu)依賴于數(shù)組字面量（[]），解構(gòu)操作在數(shù)組內(nèi)進(jìn)行。在解構(gòu)數(shù)組時(shí)，變量值是根據(jù)數(shù)組中元素的順序進(jìn)行獲取的。數(shù)組解構(gòu)的語(yǔ)法格式如下所示。let對(duì)象=[元素1,元素2,元素3];let[變量1,變量2,變量3]=對(duì)象;console.log(變量1,變量2,變量3);//輸出結(jié)果:"元素1,元素2,元素3"數(shù)組的不完全解構(gòu)數(shù)組的不完全解構(gòu)即忽略數(shù)組中的部分元素，只為部分元素提供變量名。數(shù)組解構(gòu)賦值數(shù)組解構(gòu)語(yǔ)法同樣支持解構(gòu)賦值，讀者可借助數(shù)組解構(gòu)賦值語(yǔ)句修改已聲明變量的值。與對(duì)象解構(gòu)賦值不同，數(shù)組解構(gòu)賦值無需使用圓括號(hào)。數(shù)組解構(gòu)的默認(rèn)值數(shù)組解構(gòu)賦值表達(dá)式同樣支持為本地變量添加默認(rèn)值，當(dāng)數(shù)組中指定位置的元素不存在或元素值為undefined時(shí)，該默認(rèn)值生效。本質(zhì)上，對(duì)象解構(gòu)與數(shù)組解構(gòu)均屬于“模式匹配”，當(dāng)?shù)忍?hào)兩邊的模式相同時(shí)，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。知識(shí)點(diǎn)4-箭頭函數(shù)的基本語(yǔ)法箭頭函數(shù)的語(yǔ)法多變，但均由函數(shù)參數(shù)、箭頭和函數(shù)體組成，讀者可根據(jù)具體的實(shí)際情況采取指定寫法。下面對(duì)函數(shù)參數(shù)和函數(shù)體的多種情況進(jìn)行介紹。函數(shù)參數(shù)的多種情況（1）單一參數(shù)、函數(shù)體僅一條語(yǔ)句的箭頭函數(shù)，其語(yǔ)法格式如下所示。lethello=mag=>msg;將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functionhello(msg){returnmsg;};（2）多個(gè)參數(shù)、函數(shù)體僅一條語(yǔ)句的箭頭函數(shù)，其語(yǔ)法格式如下所示。letsum=(num1,num)=>num1+num2;將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functionsum(num1,num){returnb=num1+num2;};（3）無參數(shù)、函數(shù)體僅一條語(yǔ)句的箭頭函數(shù)，其語(yǔ)法格式如下所示。letalertMsg=()=>"Noparameters";將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functionalertMsg(){return"Noparameters";};函數(shù)體的多種情況（1）函數(shù)體內(nèi)有多條語(yǔ)句的箭頭函數(shù)，其語(yǔ)法格式如下所示。letsum=(num1,num2)=>{letnum3=num1+num2;returnnum3;};將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functionsum(num1,num2){letnum3=num1+num2;returnnum3;};對(duì)比上述兩種函數(shù)形式，可知當(dāng)函數(shù)體內(nèi)有多條函數(shù)時(shí)，需要使用一對(duì)花括號(hào)包裹函數(shù)體。（2）無參數(shù)、函數(shù)體內(nèi)無語(yǔ)句的空箭頭函數(shù)，其語(yǔ)法格式如下所示。letemptyBox=()=>{};將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functionemptyBox(){};（3）返回值是一個(gè)對(duì)象字面量的箭頭函數(shù)，其語(yǔ)法格式如下所示。letgetName=(id,username)=>({id:id,name:username});將上述箭頭函數(shù)解釋為傳統(tǒng)JavaScript函數(shù)形式，其函數(shù)結(jié)構(gòu)如下所示。functiongetName(id,username){return{id:id;name:username;};};知識(shí)點(diǎn)5-箭頭函數(shù)與this指向ES6箭頭函數(shù)中無this綁定，必須通過查找作用域鏈來決定其指向。若箭頭函數(shù)被非箭頭函數(shù)包含，則箭頭函數(shù)的this與其外圍最近一層的非箭頭函數(shù)的this指向保持一致，否則，箭頭函數(shù)的this指向會(huì)被設(shè)置為全局對(duì)象。使用箭頭函數(shù)時(shí)需要注意箭頭函數(shù)與傳統(tǒng)的JavaScript函數(shù)的不同之處，主要有以下5個(gè)方面。（1）箭頭函數(shù)沒有this、super、arguments和new.target綁定。（2）不可使用new關(guān)鍵字調(diào)用箭頭函數(shù)。（3）箭頭函數(shù)無原型。（4）不可改變this指向。（5）不支持arguments對(duì)象。知識(shí)點(diǎn)6-實(shí)驗(yàn)：用戶信息頁(yè)實(shí)驗(yàn)描述用戶信息頁(yè)結(jié)構(gòu)簡(jiǎn)圖如下圖所示。代碼實(shí)現(xiàn)新建一個(gè)名為userInformationDisplayPage的文件夾，并在其中新建一個(gè)JS文件，命名為data.js。在data.js文件中定義用戶信息頁(yè)所需的全部數(shù)據(jù)源，并使用Modele模塊化語(yǔ)法將數(shù)據(jù)源allList與pageMessage拋出，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)7-Symbol的基本語(yǔ)法下面對(duì)創(chuàng)建Symbol的語(yǔ)法格式和Symbol的可選字符串參數(shù)進(jìn)行介紹。創(chuàng)建Symbol的語(yǔ)法格式一個(gè)Symbol數(shù)據(jù)類型的值被稱為“符號(hào)類型值”，在JavaScript中符號(hào)類型值是使用Symbol()函數(shù)創(chuàng)建的，該函數(shù)可動(dòng)態(tài)生成一個(gè)匿名的、唯一的值。創(chuàng)建Symbol的語(yǔ)法格式如下所示。letfristSn=Symbol();console.log(typeoffristSn);//輸出結(jié)果:'symbol';Symbol的可選字符串參數(shù)Symbol()函數(shù)可接收一個(gè)可選的字符串參數(shù)，字符串參數(shù)可用于描述新創(chuàng)建的Symbol實(shí)例。該描述性信息不可用于對(duì)象的屬性訪問，主要為開發(fā)者調(diào)試程序服務(wù)，提升代碼的閱讀性。Symbol()函數(shù)接收字符串參數(shù)的語(yǔ)法格式如下所示。letsecondSn=Symbol("Descriptiveinformation");console.log(secondSn);//輸出結(jié)果:'Symbol(Descriptiveinformation)';知識(shí)點(diǎn)8-作為屬性名的Symbol將Symbol用作屬性名的語(yǔ)法格式如下所示。letthirdSn=Symbol("thirdSn");//方式一:letobj={};obj[thirdSn]=”Method1”;console.log(obj);//輸出結(jié)果:{Symbol(thirdSn):'Method1'};//方式二:letobj2={[thirdSn]:"Method2"};console.log(obj2);//輸出結(jié)果:{Symbol(thirdSn):'Method2'}//方式三：letobj3={};Object.defineProperty(obj3,thirdSn,{value:"Method3"});console.log(obj3);//輸出結(jié)果:{Symbol(thirdSn):'Method3'}知識(shí)點(diǎn)9-共享的Symbol下面對(duì)Symbol.for()方法和Symbol.keyFor()方法進(jìn)行介紹。Symbol.for()Symbol.for()方法用于創(chuàng)建可共享的Symbol，該方法接受一個(gè)字符串參數(shù)，此參數(shù)一方面是Symbol的標(biāo)識(shí)key，另一方面還被視為Symbol的描述性文字。Symbol.for()方法創(chuàng)建可共享的Symbol的語(yǔ)法格式如下所示。letfirstName=Symbol.for("key");調(diào)用Symbol.for()方法創(chuàng)建多個(gè)同標(biāo)識(shí)Symbol，具體代碼可參考教學(xué)PPT或教材。Symbol.keyFor()ES6還提供了一個(gè)與Symbol共享體系有關(guān)的Symbol.keyFor()方法，該方法可在全局Symbol注冊(cè)表中檢索已注冊(cè)的Symbol。調(diào)用Symbol.keyFor()方法檢索Symbol，具體代碼可參考教學(xué)PPT或教材。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第五、六課時(shí)（Promise的基本語(yǔ)法、Promise的生命周期、Promise的原型方法、Class、Module模塊、async函數(shù)、實(shí)訓(xùn)：商品訂單頁(yè)面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的Promise的基本語(yǔ)法、Promise的生命周期、Promise的原型方法、Class、Module模塊、async函數(shù)、實(shí)訓(xùn)：商品訂單頁(yè)面等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握Promise基本語(yǔ)法的使用理解Promise的生命周期與原型方法掌握Class、Module模塊和async函數(shù)的使用掌握商品訂單頁(yè)面的實(shí)現(xiàn)知識(shí)講解知識(shí)點(diǎn)1-Promise的基本語(yǔ)法ES6規(guī)定，Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，可生成Promise實(shí)例。Promise的構(gòu)造函數(shù)僅接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)是包含初始化Promise代碼的執(zhí)行器（executor）函數(shù)，其內(nèi)部包含需要異步執(zhí)行的代碼。執(zhí)行器函數(shù)的兩個(gè)參數(shù)是resolve()和reject()，這兩個(gè)函數(shù)均由JavaScript引擎提供，無需開發(fā)者手動(dòng)部署。當(dāng)異步操作成功時(shí)，自動(dòng)調(diào)用resolve()函數(shù)，并將異步操作的結(jié)果，作為參數(shù)傳遞出去。當(dāng)異步操作失敗時(shí)，自動(dòng)調(diào)用reject()函數(shù)，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。創(chuàng)建一個(gè)Promise實(shí)例，實(shí)現(xiàn)數(shù)據(jù)異步相加，演示Promise實(shí)例的創(chuàng)建語(yǔ)法，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)2-Promise的生命周期每個(gè)Promise都必然經(jīng)歷一個(gè)短暫的生命周期，在這個(gè)生命周期中Promise有三種狀態(tài)，包括pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。．惒讲僮鹘Y(jié)束后，根據(jù)其異步操作結(jié)果的成功與否，Promise可分別進(jìn)入以下兩種狀態(tài)。（1）fullfilled狀態(tài)：Promise異步操作成功。（2）rejected狀態(tài)：由于程序錯(cuò)誤或其他原因，Promise異步操作未能成功完成，即已失敗。Promise的狀態(tài)一旦改變，就不會(huì)再發(fā)生任何改變。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled或從pending變?yōu)閞ejected。知識(shí)點(diǎn)3-Promise的原型方法下面對(duì)Promise的then()方法、catch()方法和鏈?zhǔn)秸{(diào)用進(jìn)行介紹。promise.then()promise.then()方法的語(yǔ)法格式如下所示。promise.then(onFulfilled,onRejected);promise.catch()promise.catch()方法的語(yǔ)法形式如下所示。promise.catch(function(error){console.log(error)});promise.then()與promise.catch()的組合使用語(yǔ)法形式如下所示。promise.then(value=>console.log(value)).catch(error=>console.log(error));promise的鏈?zhǔn)秸{(diào)用promise每次調(diào)用then()方法或catch()方法時(shí)，均返回一個(gè)新的Promise實(shí)例，因此可將promise串聯(lián)調(diào)用，實(shí)現(xiàn)promise的鏈?zhǔn)秸{(diào)用，即在第一個(gè)then()方法后面再調(diào)用另一個(gè)then()方法。只有第一個(gè)promise完成或失敗時(shí)，第二個(gè)promise才會(huì)被解決。使用promise的鏈?zhǔn)秸Z(yǔ)法實(shí)現(xiàn)數(shù)值的遞增運(yùn)算，具體代碼可參考教學(xué)PPT或教材。Promise的鏈?zhǔn)秸{(diào)用主要有以下2點(diǎn)需要注意。（1）Promise執(zhí)行器函數(shù)內(nèi)的代碼是同步的，Promise的then()方法與catch()方法的回調(diào)函數(shù)則是異步的。（2）Promise鏈?zhǔn)秸{(diào)用的另外一個(gè)特性是上游的Promise可為下游的Promise傳遞數(shù)據(jù)，借助onFulfilled指定一個(gè)返回值，該返回值可沿Promise鏈繼續(xù)傳遞。知識(shí)點(diǎn)4-ClassES6新增了class（類）特性，class寫法與面向?qū)ο缶幊陶Z(yǔ)言十分相似，使得對(duì)象上的原型方法結(jié)構(gòu)更加清晰。ES5中的近類結(jié)構(gòu)JavaScript語(yǔ)言中，生成實(shí)例對(duì)象的傳統(tǒng)方法是使用構(gòu)造函數(shù)與原型混合的方法模擬類的定義，即ES5的近類結(jié)構(gòu)。ES6的class聲明ES6引入了class關(guān)鍵字，使得類的定義與Java、C等面向?qū)ο笳Z(yǔ)言中類的定義更加相似，類聲明是ES6中最簡(jiǎn)單的類形式。類聲明的語(yǔ)法格式如下所示。class類名{constructor(){}方法名(){}}以系統(tǒng)歡迎信息為主題，基于ES6的類聲明語(yǔ)法對(duì)前面例子進(jìn)行重構(gòu)，示例代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)5-Module模塊ES6在語(yǔ)言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，該功能可取代CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。下面對(duì)export命令、import命令和export與import命令的組合示例進(jìn)行介紹。export命令export關(guān)鍵字導(dǎo)出數(shù)據(jù)export關(guān)鍵字導(dǎo)出方法export關(guān)鍵字導(dǎo)出類export默認(rèn)值與尾部導(dǎo)出export重命名與批量導(dǎo)出import命令import語(yǔ)句import關(guān)鍵字導(dǎo)入單個(gè)綁定與多個(gè)綁定import關(guān)鍵字的默認(rèn)值與重命名import關(guān)鍵字導(dǎo)入整個(gè)模塊export與import命令的組合示例甘蔗是我國(guó)制糖產(chǎn)業(yè)中不可或缺的重要組成部分，其生長(zhǎng)地域遼闊，產(chǎn)量巨大，是制糖業(yè)的重要原料。接下來將以甘蔗為主題設(shè)計(jì)一個(gè)數(shù)據(jù)導(dǎo)出與導(dǎo)入案例，依托export與import命令實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)出與導(dǎo)入。具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)6-async函數(shù)async函數(shù)的簡(jiǎn)介async和await是在ES2017標(biāo)準(zhǔn)中引入的新關(guān)鍵字，async關(guān)鍵字用于聲明async函數(shù)，在async函數(shù)內(nèi)部可使用await關(guān)鍵字。async表示函數(shù)內(nèi)存在異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果。async與await目的是徹底解決回調(diào)地獄，即以一種更加簡(jiǎn)潔的方式寫出基于Promise的異步行為，不再刻意通過鏈?zhǔn)秸{(diào)用Promise。async函數(shù)的基本語(yǔ)法（1）async函數(shù)async函數(shù)的返回值是Promise對(duì)象，若async函數(shù)的返回值不是Promise，則該返回值會(huì)被隱式地包裝至一個(gè)Promise中。聲明async函數(shù)時(shí)，只需要在普通的函數(shù)前加上async關(guān)鍵字即可。聲明async函數(shù)的語(yǔ)法格式如下所示。asyncfunction函數(shù)名(){return返回值;}以和田大棗為主題演示async函數(shù)的基本用法，使用async關(guān)鍵字聲明一個(gè)async函數(shù)，具體代碼可參考教學(xué)PPT或教材。（2）async函數(shù)與await關(guān)鍵字async函數(shù)中包含await關(guān)鍵字，await關(guān)鍵字必須在async函數(shù)中使用且不可單獨(dú)使用。當(dāng)async函數(shù)執(zhí)行時(shí)，一旦遇到await表達(dá)式就會(huì)暫停執(zhí)行，等待所觸發(fā)的異步操作完成后，會(huì)繼續(xù)執(zhí)行async函數(shù)并返回解析值。await關(guān)鍵字可用于獲取Promise對(duì)象的返回值，即Promise函數(shù)中resolve或者reject的值。使用async關(guān)鍵字聲明一個(gè)async函數(shù)，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)7-實(shí)訓(xùn)：商品訂單頁(yè)面本節(jié)將以“年貨采購(gòu)”為主題設(shè)計(jì)一個(gè)商品訂單頁(yè)面，依托變量聲明、模板字符串、rest參數(shù)、展開運(yùn)算符、解構(gòu)賦值、箭頭函數(shù)和module模塊實(shí)現(xiàn)一個(gè)展示商品訂單信息的頁(yè)面。商品訂單頁(yè)面結(jié)構(gòu)簡(jiǎn)圖商品訂單頁(yè)包含商品訂單號(hào)、商品名稱、訂單狀態(tài)、價(jià)格、交易時(shí)間等，商品訂單頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如下圖所示。實(shí)現(xiàn)商品訂單頁(yè)面效果實(shí)現(xiàn)商品訂單頁(yè)面，需要?jiǎng)?chuàng)建數(shù)據(jù)源使數(shù)據(jù)模塊化，具體步驟如下所示。第1步，新建一個(gè)名為orderStatus的文件夾，并在該文件夾中新建一個(gè)JS文件，將其命名為module.js。第2步，在module.js文件中定義一個(gè)已完成訂單數(shù)組finishList、一個(gè)進(jìn)行中訂單數(shù)組unfinishedList。第3步，通過export語(yǔ)句將數(shù)據(jù)源導(dǎo)出，且導(dǎo)出時(shí)將unfinishedList重命名為goingList，具體代碼可參考教學(xué)PPT或教材。完成數(shù)據(jù)準(zhǔn)備后，需要將數(shù)據(jù)在頁(yè)面中渲染出來，具體步驟如下所示。第1步，在orderStatus文件夾中，新建一個(gè)HTML文件，命名為index.html。第2步，在該文件中導(dǎo)入module.js文件中導(dǎo)出的數(shù)據(jù)源finishList與goingList，且在導(dǎo)入時(shí)將finishList重命名為completeList。第3步，定義一個(gè)render()函數(shù)，用于渲染已完成訂單、未完成訂單及全部訂單，render()函數(shù)會(huì)根據(jù)當(dāng)前單擊的tab選項(xiàng)在tab數(shù)組中的順序，渲染對(duì)應(yīng)訂單信息，具體代碼可參考教學(xué)PPT或教材。在編輯欄中右擊選中openwithliveserver選項(xiàng)運(yùn)行index.html頁(yè)面。單擊“未完成訂單”按鈕時(shí)，該按鈕在tab數(shù)組中的索引下標(biāo)為1，則執(zhí)行render(goingList)函數(shù)并渲染goingList數(shù)組中的數(shù)據(jù)于未完成訂單頁(yè)，其頁(yè)面顯示效果如下圖所示。單擊“全部訂單”按鈕時(shí)，該按鈕在tab數(shù)組中的索引下標(biāo)為2，立即執(zhí)行render(completeList,goingList)函數(shù)。全部訂單頁(yè)頁(yè)面顯示效果如下圖所示。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第七、八課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。上機(jī)一：（考察知識(shí)點(diǎn)為let聲明、const聲明、模板字面量、默認(rèn)參數(shù)、rest參數(shù)、展開運(yùn)算符、解構(gòu)的必要性、對(duì)象解構(gòu)、數(shù)組解構(gòu)、箭頭函數(shù)的基本語(yǔ)法、箭頭函數(shù)與this指向、實(shí)驗(yàn)：用戶信息頁(yè)）形式：?jiǎn)为?dú)完成題目：請(qǐng)按照以下要求完成操作，要求如下：完成let聲明、const聲明、模板字面量、默認(rèn)參數(shù)、rest參數(shù)、展開運(yùn)算符等知識(shí)點(diǎn)對(duì)應(yīng)的示例或案例；完成解構(gòu)的必要性、對(duì)象解構(gòu)、數(shù)組解構(gòu)、箭頭函數(shù)的基本語(yǔ)法、箭頭函數(shù)與this指向等知識(shí)點(diǎn)對(duì)應(yīng)的示例或案例；實(shí)現(xiàn)用戶信息頁(yè)案例。上機(jī)二：（考察知識(shí)點(diǎn)為Symbol的基本語(yǔ)法、作為屬性名的Symbol、共享的Symbol、Promise的基本語(yǔ)法、Promise的原型方法、Class、Module模塊、async函數(shù)、實(shí)訓(xùn)：商品訂單頁(yè)面）形式：?jiǎn)为?dú)完成題目：請(qǐng)按照以下要求完成操作，要求如下：完成Symbol的基本語(yǔ)法、作為屬性名的Symbol、共享的Symbol、Promise的基本語(yǔ)法等知識(shí)點(diǎn)對(duì)應(yīng)的示例或案例；完成Promise的原型方法、Class、Module模塊、async函數(shù)等知識(shí)點(diǎn)對(duì)應(yīng)的示例或案例；實(shí)現(xiàn)商品訂單頁(yè)面案例。習(xí)題教材第3章習(xí)題教學(xué)后記Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級(jí)：授課學(xué)期：教師姓名：年月日課程名稱第4章 Vue的基本語(yǔ)法計(jì)劃學(xué)時(shí)8內(nèi)容分析本章重點(diǎn)學(xué)習(xí)如何使用Vue的基本語(yǔ)法?；菊Z(yǔ)法是一個(gè)框架的基礎(chǔ)，而正確使用基本語(yǔ)法則是學(xué)習(xí)Vue的重中之重。Vue基本語(yǔ)法包括創(chuàng)建應(yīng)用程序?qū)嵗?、插值語(yǔ)法、指令、計(jì)算屬性、偵聽器、Class與Style綁定、生命周期鉤子等。插值語(yǔ)法用于實(shí)現(xiàn)頁(yè)面的數(shù)據(jù)綁定，指令則是Vue為HTML標(biāo)簽新增的一些屬性，每一個(gè)指令都可實(shí)現(xiàn)一個(gè)強(qiáng)大的功能。計(jì)算屬性主要用于處理插值并返回一個(gè)新數(shù)據(jù)，偵聽器主要用于觀察和響應(yīng)Vue組件實(shí)例上的數(shù)據(jù)變動(dòng)。Class與Style綁定用于操縱元素的CSS樣式和內(nèi)聯(lián)樣式，生命周期則是每一個(gè)Vue組件實(shí)例從創(chuàng)建到銷毀的過程。教學(xué)目標(biāo)與教學(xué)要求【知識(shí)目標(biāo)】掌握Vue應(yīng)用程序?qū)嵗膭?chuàng)建掌握插值語(yǔ)法、方法選項(xiàng)與指令的使用掌握計(jì)算屬性與偵聽器的使用掌握Class與Style綁定的使用理解Vue的生命周期鉤子的執(zhí)行原理【技能目標(biāo)】能夠創(chuàng)建Vue應(yīng)用程序?qū)嵗軌蛘_使用插值語(yǔ)法、方法選項(xiàng)與指令能夠正確使用計(jì)算屬性與偵聽器能夠正確使用Class與Style綁定【育人目標(biāo)】鼓勵(lì)學(xué)生動(dòng)手實(shí)踐，培養(yǎng)學(xué)生的創(chuàng)新思維，促進(jìn)學(xué)生的個(gè)性發(fā)展。培養(yǎng)學(xué)生網(wǎng)絡(luò)的倫理道德和法律法規(guī)，促進(jìn)學(xué)生養(yǎng)成良好的習(xí)慣。教學(xué)重點(diǎn)創(chuàng)建應(yīng)用程序?qū)嵗谋静逯翟糎TML插值表達(dá)式實(shí)驗(yàn)：商品價(jià)格計(jì)算頁(yè)面方法選項(xiàng)指令參數(shù)內(nèi)置指令自定義指令實(shí)驗(yàn)：商品信息管理表格計(jì)算屬性的定義計(jì)算屬性的緩存計(jì)算屬性選擇性地渲染列表實(shí)驗(yàn)：購(gòu)物車頁(yè)面?zhèn)陕犉鹘壎℉TML樣式（Class）綁定內(nèi)聯(lián)樣式（Style）實(shí)驗(yàn)：斑馬紋商品表生命周期鉤子實(shí)訓(xùn)：農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)教學(xué)難點(diǎn)實(shí)驗(yàn)：商品價(jià)格計(jì)算頁(yè)面實(shí)驗(yàn)：商品信息管理表格實(shí)驗(yàn)：購(gòu)物車頁(yè)面實(shí)驗(yàn)：斑馬紋商品表實(shí)訓(xùn)：農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一、二課時(shí)（創(chuàng)建應(yīng)用程序?qū)嵗?、文本插值、原始HTML、插值表達(dá)式、實(shí)驗(yàn)：商品價(jià)格計(jì)算頁(yè)面、方法選項(xiàng)、指令參數(shù)）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的創(chuàng)建應(yīng)用程序?qū)嵗?、文本插值、原始HTML、插值表達(dá)式、實(shí)驗(yàn)：商品價(jià)格計(jì)算頁(yè)面、方法選項(xiàng)、指令參數(shù)等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握應(yīng)用程序?qū)嵗膭?chuàng)建掌握文本插值、原始HTML與插值表達(dá)式的使用掌握商品價(jià)格計(jì)算頁(yè)面的實(shí)現(xiàn)掌握方法選項(xiàng)與指令參數(shù)的使用知識(shí)講解知識(shí)點(diǎn)1-創(chuàng)建應(yīng)用程序?qū)嵗旅鎸?duì)應(yīng)用程序?qū)嵗膭?chuàng)建語(yǔ)法、掛載語(yǔ)法和示例進(jìn)行介紹。應(yīng)用程序?qū)嵗膭?chuàng)建語(yǔ)法應(yīng)用程序?qū)嵗膭?chuàng)建語(yǔ)法如下所示。Vue.createAPP(App)應(yīng)用程序?qū)嵗膾燧d語(yǔ)法應(yīng)用程序?qū)嵗仨氃谡{(diào)用mount()方法后才會(huì)渲染出來，應(yīng)用程序?qū)嵗膾燧d語(yǔ)法如下所示。Vue.createAPP(App).mount('#app')創(chuàng)建應(yīng)用程序?qū)嵗纠陆ㄒ粋€(gè)HTML文件，以CDN的方式在HTML文件中引入Vue文件，并使用createAPP()全局API創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗唧w代碼可參考教學(xué)PPT或教材。創(chuàng)建應(yīng)用程序?qū)嵗娘@示效果如下圖所示。知識(shí)點(diǎn)2-文本插值文本插值的語(yǔ)法格式文本插值的語(yǔ)法格式如下所示。<h1>{{message}}</h1>文本插值示例以《長(zhǎng)歌行》為主題設(shè)計(jì)示例。新建一個(gè)HTML文件，演示文本插值的數(shù)據(jù)同步，具體代碼可參考教學(xué)PPT或教材。Mustache標(biāo)簽處的內(nèi)容已經(jīng)被替換為“少壯不努力”，顯示效果如下圖所示。在控制臺(tái)中，將頁(yè)面切換至Console選項(xiàng)，并輸入vm.message="老大徒傷悲"，按下Enter鍵，實(shí)現(xiàn)message屬性值的同步更改，顯示效果如下圖所示。知識(shí)點(diǎn)3-原始HTML下面對(duì)原始HTML的語(yǔ)法格式和示例進(jìn)行介紹。原始HTML的語(yǔ)法格式在Mustache標(biāo)簽中輸出原始HTML的語(yǔ)法格式如下所示。<h1v-html="message"></h1>原始HTML示例實(shí)現(xiàn)一個(gè)包含VSCode的官網(wǎng)鏈接的頁(yè)面。首先在data()函數(shù)中定義一個(gè)message屬性，用于保存<a>，然后根據(jù)需要設(shè)置<a>的屬性值及標(biāo)簽內(nèi)容，最后使用v-html指令將message屬性綁定到對(duì)應(yīng)元素上，具體代碼可參考教學(xué)PPT或教材。原始HTML渲染的顯示效果如下圖所示。知識(shí)點(diǎn)4-插值表達(dá)式在插值語(yǔ)法中使用JavaScript表達(dá)式，語(yǔ)法格式如下所示。{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<div:id="`list-${id}`"></div>需要注意的是，在Vue模板內(nèi)，每個(gè)綁定僅支持單一表達(dá)式，即一段能夠被求值的JavaScript代碼，不滿足上述條件，則綁定不生效，示例代碼如下。<!--這是一個(gè)語(yǔ)句，而非表達(dá)式-->{{vara=1}}<!--條件控制也不支持，請(qǐng)使用三元表達(dá)式-->{{if(ok){returnmessage}}}知識(shí)點(diǎn)5-實(shí)驗(yàn)：商品價(jià)格計(jì)算頁(yè)面實(shí)驗(yàn)描述本實(shí)驗(yàn)是實(shí)現(xiàn)一個(gè)計(jì)算商品價(jià)格的頁(yè)面。商品價(jià)格計(jì)算頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如下圖所示。代碼實(shí)現(xiàn)新建一個(gè)HTML文件，以CDN的方式在該文件中引入Vue文件。在data()函數(shù)中定義一個(gè)商品信息數(shù)組及歡迎語(yǔ)字符串，并在Mustache標(biāo)簽中使用JavaScript表達(dá)式實(shí)現(xiàn)商品價(jià)格計(jì)算與歡迎語(yǔ)展示，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)6-方法選項(xiàng)方法選項(xiàng)的語(yǔ)法格式在methods選項(xiàng)中定義方法的語(yǔ)法格式如下所示。constvm=Vue.createApp({methods:{方法名（空/參數(shù)）{}}}).mount('#app')方法選項(xiàng)示例methods選項(xiàng)內(nèi)的方法主要有2種使用方式，即插值語(yǔ)法{{}}方式和事件調(diào)用方式。“實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)”，接下來在案例中帶領(lǐng)讀者練習(xí)methods選項(xiàng)內(nèi)方法的使用。設(shè)計(jì)一個(gè)商品價(jià)格控制頁(yè)面，使用插值語(yǔ)法{{}}直接顯示商品數(shù)量，設(shè)計(jì)按鈕事件控制商品的漲價(jià)和降價(jià)，具體代碼可參考教學(xué)PPT或教材。在瀏覽器中運(yùn)行上述代碼，單擊“商品漲價(jià)10元”按鈕后，頁(yè)面的顯示效果如下圖所示。知識(shí)點(diǎn)7-指令參數(shù)下面對(duì)指令的靜態(tài)參數(shù)和動(dòng)態(tài)參數(shù)進(jìn)行介紹。靜態(tài)參數(shù)以v-on指令和v-bind指令為例，演示指令接收靜態(tài)參數(shù)的效果，具體代碼如下所示。<av-bind:href="url">百度</a><pv-on:click="sayHello">hello</p>動(dòng)態(tài)參數(shù)從Vue2.6.0開始，可將[]括起來的JavaScript表達(dá)式作為一個(gè)指令參數(shù)。因此，上述指令接收的靜態(tài)參數(shù)均可使用[]轉(zhuǎn)換為動(dòng)態(tài)參數(shù)，具體代碼如下所示。<av-bind:[attributeName屬性名]="url">百度</a><pv-on:[eventName事件名]="sayHello">hello</p>data(){return{attributeName:'href',eventName:'click'}}知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三、四課時(shí)（內(nèi)置指令、自定義指令、實(shí)驗(yàn)：商品信息管理表格、計(jì)算屬性的定義、計(jì)算屬性的緩存、計(jì)算屬性選擇性地渲染列表、實(shí)驗(yàn)：購(gòu)物車頁(yè)面）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的內(nèi)置指令、自定義指令、實(shí)驗(yàn)：商品信息管理表格、計(jì)算屬性的定義、計(jì)算屬性的緩存、計(jì)算屬性選擇性地渲染列表、實(shí)驗(yàn)：購(gòu)物車頁(yè)面等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握內(nèi)置指令與自定義指令的使用掌握商品信息管理表格的實(shí)現(xiàn)方式掌握計(jì)算屬性的定義、計(jì)算屬性的緩存掌握計(jì)算屬性選擇性地渲染列表掌握購(gòu)物車頁(yè)面的實(shí)現(xiàn)方式知識(shí)講解知識(shí)點(diǎn)1-內(nèi)置指令1. 條件渲染指令Vue的條件渲染指令主要用于輔助開發(fā)者按需控制DOM元素的顯示或隱藏。Vue的條件渲染指令如下表所示。指令名說明v-showv-show指令原理是動(dòng)態(tài)添加或移除元素的CSS樣式屬性display:none實(shí)現(xiàn)的。v-show指令一般用于需頻繁切換顯示或隱藏狀態(tài)的元素v-ifv-if指令原理是動(dòng)態(tài)創(chuàng)建或移除DOM元素，一般用于在默認(rèn)情況下不展示或展示較少的元素v-else-if/v-elsev-else-if與v-else指令需配合v-if指令共同使用，并緊跟在v-if或v-else-if后面，反之將不被識(shí)別。v-else-if/v-else指令與v-if指令配合可實(shí)現(xiàn)互斥的條件判斷，當(dāng)有一個(gè)條件滿足時(shí)，后續(xù)的條件將不再進(jìn)行判斷（1）v-show與v-if的異同（2）條件渲染指令的語(yǔ)法格式（3）條件渲染指令示例商品等級(jí)判斷的顯示效果如下圖所示。2.列表渲染指令Vue中內(nèi)置了一個(gè)列表渲染指令，即v-for指令。v-for指令以循環(huán)的方式渲染一個(gè)列表，循環(huán)的對(duì)象可以是數(shù)組、整數(shù)或?qū)ο蟮?。?）v-for指令遍歷數(shù)組（2）v-for指令遍歷對(duì)象（3）v-for指令遍歷整數(shù)（4）v-for指令與<template>（5）數(shù)組更新檢測(cè)（6）key屬性接下來在一個(gè)未使用key屬性的v-for列表渲染案例展示key屬性的重要性。具體代碼可參考教學(xué)PPT或教材。準(zhǔn)備添加新的商品的顯示效果如下圖所示。添加商品完成的顯示效果如下圖所示。添加key屬性后的顯示效果如下圖所示。（7）v-for與v-if的組合使用（8）v-for列表渲染示例使用v-for指令分別遍歷數(shù)組、對(duì)象與整數(shù)，具體代碼可參考教學(xué)PPT或教材。列表渲染的顯示效果如下圖所示。屬性綁定指令雙向綁定指令（1）v-model指令（2）專屬修飾符事件綁定指令內(nèi)容渲染指令（1）v-text指令（2）v-html指令不需要表達(dá)式的指令（1）v-once指令（2）v-cloak指令（3）v-pre指令內(nèi)置指令示例通過一個(gè)案例依次使用上述內(nèi)置指令，使讀者進(jìn)一步掌握Vue的內(nèi)置指令，具體代碼可參考教學(xué)PPT或教材。信息修改前的顯示效果如下圖所示。信息修改中的顯示效果如下圖所示。信息修改后的顯示效果如下圖所示。知識(shí)點(diǎn)2-自定義指令自定義指令注冊(cè)方式（1）全局注冊(cè)自定義指令（2）局部注冊(cè)自定義指令指令鉤子函數(shù)指令鉤子函數(shù)函數(shù)名說明created在綁定元素的屬性前或事件監(jiān)聽器應(yīng)用前調(diào)用beforeMount在元素被插入到DOM前調(diào)用mounted在綁定元素的父組件及其所有子節(jié)點(diǎn)都掛載完成后調(diào)用beforeUpdate在綁定元素的父組件更新前調(diào)用updated在綁定元素的父組件及其所有子節(jié)點(diǎn)都更新后調(diào)用beforeUnmount在綁定元素的父組件卸載前調(diào)用unmounted在綁定元素的父組件卸載后調(diào)用讀者可根據(jù)需要自定義指令的功能需求，自行選擇相應(yīng)的指令鉤子函數(shù)。指令鉤子函數(shù)的參數(shù)自定義指令示例通過局部注冊(cè)自定義指令來實(shí)現(xiàn)功能復(fù)用，具體代碼可參考教學(xué)PPT或教材。用戶身份的顯示效果如下圖所示。指令鉤子函數(shù)簡(jiǎn)寫直接用一個(gè)函數(shù)來定義指令，具體代碼如下所示。<divv-color="color"></div>app.directive('color',(el,binding)=>{//此函數(shù)會(huì)在mounted和updated時(shí)都調(diào)用el.style.color=binding.value})知識(shí)點(diǎn)3-實(shí)驗(yàn)：商品信息管理表格實(shí)驗(yàn)描述在后臺(tái)管理系統(tǒng)中最重要的組成元素便是表格，本案例將以地方特產(chǎn)為主題，綜合使用Vue的內(nèi)置指令實(shí)現(xiàn)一個(gè)商品信息管理表格。頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如下圖所示。代碼實(shí)現(xiàn)頁(yè)面右側(cè)的商品信息編輯表單顯現(xiàn)，具體代碼可參考教學(xué)PPT或教材。知識(shí)點(diǎn)4-計(jì)算屬性的定義計(jì)算屬性的語(yǔ)法格式計(jì)算屬性的語(yǔ)法格式如下所示。computed:{attribute：{get(){}set(newValue){}}}在默認(rèn)情況下可對(duì)計(jì)算屬性進(jìn)行簡(jiǎn)寫，簡(jiǎn)寫的語(yǔ)法格式如下所示。//簡(jiǎn)寫形式computed:{attribute(){return{}//必須有返回值}}計(jì)算屬性的示例（1）計(jì)算屬性簡(jiǎn)寫示例接下來將以字符串翻轉(zhuǎn)為主題演示計(jì)算屬性的簡(jiǎn)寫，具體代碼可參考教學(xué)PPT或教材。字符串翻轉(zhuǎn)效果如下圖所示。計(jì)算屬性自動(dòng)更新的顯示效果如下圖所示。（2）計(jì)算屬性的get()方法與set()方法以物流狀態(tài)為主題演示計(jì)算屬性的get()方法與set()方法的使用，具體代碼可參考教學(xué)PPT或教材。計(jì)算屬性初始化狀態(tài)的顯示效果如下圖所示。修改計(jì)算屬性值的顯示效果如下圖所示。知識(shí)點(diǎn)5-計(jì)算屬性的緩存計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，僅在相關(guān)響應(yīng)式依賴發(fā)生變化時(shí)才會(huì)重新求值。響應(yīng)式依賴沒有發(fā)生改變時(shí)，多次訪問計(jì)算屬性，計(jì)算屬性仍返回之前的計(jì)算結(jié)果。計(jì)算屬性與methods方法在寫法與功能上十分類似，以前面例子為例，可輕易地將其改寫為methods形式。methods:{reversedStr(){returnthis.str.split('').reverse().join('');}}知識(shí)點(diǎn)6-計(jì)算屬性選擇性地渲染列表在Vue3中，v-if的優(yōu)先級(jí)是高于v-for的，v-if獲取不到v-for范圍內(nèi)的變量，因此，不建議同時(shí)使用v-if和v-for。讀者可借助計(jì)算屬性有選擇性地渲染列表，通過計(jì)算屬性對(duì)數(shù)據(jù)進(jìn)行過濾后，再進(jìn)行循環(huán)遍歷，使渲染更加高效。接下來將以商品訂單為主題來演示計(jì)算屬性的選擇性渲染列表，具體代碼可參考教學(xué)PPT或教材。訂單列表渲染的顯示效果如下圖所示。知識(shí)點(diǎn)7-實(shí)驗(yàn)：購(gòu)物車頁(yè)面1.實(shí)驗(yàn)描述本案例將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的購(gòu)物車頁(yè)面，頁(yè)面設(shè)計(jì)依賴于Vue的內(nèi)置指令、methods選項(xiàng)、計(jì)算屬性等。購(gòu)物車頁(yè)面結(jié)構(gòu)簡(jiǎn)圖如下圖所示。2.代碼實(shí)現(xiàn)實(shí)現(xiàn)購(gòu)物車頁(yè)面的具體代碼可參考教學(xué)PPT或教材。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第五、六課時(shí)（偵聽器、綁定HTML樣式（Class）、綁定內(nèi)聯(lián)樣式（Style）、實(shí)驗(yàn)：斑馬紋商品表、生命周期鉤子、實(shí)訓(xùn)：農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的偵聽器、綁定HTML樣式（Class）、綁定內(nèi)聯(lián)樣式（Style）、實(shí)驗(yàn)：斑馬紋商品表、生命周期鉤子、實(shí)訓(xùn)：農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握偵聽器、綁定HTML樣式（Class）的使用掌握綁定內(nèi)聯(lián)樣式（Style）的使用掌握斑馬紋商品表的實(shí)現(xiàn)方式掌握生命周期鉤子的使用掌握農(nóng)產(chǎn)品后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)方式知識(shí)講解知識(shí)點(diǎn)1-偵聽器偵聽器定義偵聽器是定義在組件選項(xiàng)對(duì)象內(nèi)的watch選項(xiàng)中的方法，它本質(zhì)上是一個(gè)函數(shù)，想要監(jiān)視一個(gè)數(shù)據(jù)，就需要將該數(shù)據(jù)作為函數(shù)名。偵聽器的語(yǔ)法格式如下所示。watch:{msg(val,oldval){}}偵聽器示例以單位轉(zhuǎn)換為主題設(shè)計(jì)一個(gè)單位轉(zhuǎn)換器，演示偵聽器的使用，具體代碼可參考教學(xué)PPT或教材。單位轉(zhuǎn)換器的顯示效果如下圖所示。偵聽方法在定義偵聽器時(shí)，除直接在偵聽器后寫一個(gè)函數(shù)外，還可以以字符串的形式定義一個(gè)methods內(nèi)的方法，具體代碼如下所示。data(){return{msg:’hello’,}},methods:{checkMsg(){}}watch:{msg：’checkMsg’}深度偵聽器偵聽器不僅可以監(jiān)聽方法，還可以監(jiān)聽對(duì)象。受JavaScript的限制，Vue無法檢測(cè)到對(duì)象屬性的變化，默認(rèn)情況下偵聽器只監(jiān)聽該對(duì)象引用的變化。深度監(jiān)聽器的具體代碼如下所示。data(){return{product:{name:’banana’,price:20},}},watch:{product:{handler(val,oldVal){},deep:true}}偵聽器的立即執(zhí)行在初始渲染時(shí)，偵聽器不會(huì)被立刻調(diào)用。開發(fā)者可通過添加handler()方法和immediate屬性來實(shí)現(xiàn)偵聽器的立即執(zhí)行，即將immediate屬性值設(shè)置為true，具體代碼如下所示。data(){return{msg:’hello’,}},watch:{msg:{handler(val,oldVal){},immediate：true}}知識(shí)點(diǎn)2-綁定HTML樣式（Class）對(duì)象語(yǔ)法（1）為v-bind:class或:class傳遞一個(gè)對(duì)象來動(dòng)態(tài)切換元素的class樣式，語(yǔ)法格式如下所示。<style>.active{color:red}</style>