Vue.js 3前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 教案全套 單元1-11 Vue.js 3入門基礎(chǔ)-教學(xué)設(shè)計(jì) -工程化項(xiàng)目實(shí)戰(zhàn) 圖片素材庫網(wǎng)站

《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元1Vue.js3入門基礎(chǔ)計(jì)劃學(xué)時(shí)2學(xué)時(shí)內(nèi)容分析Vue.js是近幾年比較流行的前端框架之一。它用于構(gòu)建交互式Web應(yīng)用界面，提供了基于MVVM模式的數(shù)據(jù)綁定和可組合的組件系統(tǒng)，具有簡(jiǎn)單靈活的特性。本單元將介紹本單元將介紹前端開發(fā)模式演變的三個(gè)階段、Vue.js的基本概念和主要特性，以及Vue.js應(yīng)用相關(guān)的工具。通過“歷史名城簡(jiǎn)介頁面”任務(wù)，來讓學(xué)習(xí)者體驗(yàn)Vue應(yīng)用程序的構(gòu)建、運(yùn)行和調(diào)試過程。教學(xué)目標(biāo)及基本要求1.了解前端開發(fā)模式的演變歷程2.了解Vue.js的基本概念3.能夠安裝Vue.js的開發(fā)和調(diào)試工具教學(xué)重點(diǎn)了解Vue.js的基本概念教學(xué)難點(diǎn)教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（前端開發(fā)模式的演變歷程，Vue.js特性，Vue.js相關(guān)工具）一、創(chuàng)設(shè)情境，引入Vue.js框架1.教師通過應(yīng)用場(chǎng)景描述，引出前端開發(fā)模式演變歷程。Vue.js（簡(jiǎn)稱Vue）是一個(gè)用于構(gòu)建用戶界面的JavaScript框架。隨著Web項(xiàng)目的規(guī)模和復(fù)雜度的提升，前端開發(fā)模式經(jīng)歷了三個(gè)階段的演變：模板渲染頁面->AJAX前后端分離->MVVM。Vue是基于MVVM模式的前端框架。2.明確學(xué)習(xí)目標(biāo)。了解前端開發(fā)模式演變的三個(gè)階段了解MVVM模式了解Vue的核心思想和主要特性二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹前端開發(fā)模式的三個(gè)階段，以及各自特點(diǎn)。（1）基于模板渲染頁面的開發(fā)模式基于模板渲染頁面的開發(fā)模式主要是利用JSP（JavaServerPages，Java服務(wù)器頁面）、PHP等技術(shù)創(chuàng)建頁面模板，頁面內(nèi)容由后端計(jì)算生成，通過Web服務(wù)器將模板解析成HTML文件，經(jīng)瀏覽器渲染后得到最終頁面效果。（2）基于AJAX前后端分離的開發(fā)模式基于AJAX的開發(fā)模式使得Web應(yīng)用可分為前端和后端，其中前端負(fù)責(zé)頁面的布局與交互，后端負(fù)責(zé)業(yè)務(wù)邏輯的處理，前后端通過接口進(jìn)行數(shù)據(jù)交互。（3）基于MVVM的開發(fā)模式MVVM（Model-View-ViewModel，模型-視圖-視圖模型）模式是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式。

2.教師根據(jù)課件，講解MVVM模式的基本思想。以ViewModel（視圖模型）層為樞紐，向上與View（視圖）層進(jìn)行雙向數(shù)據(jù)綁定，向下與Model（模型）層通過接口交互數(shù)據(jù)，從而實(shí)現(xiàn)View和Model的自動(dòng)同步。3.教師根據(jù)課件，講解Vue的核心思想。（1）數(shù)據(jù)驅(qū)動(dòng)（2）組件化2.教師根據(jù)課件，講解Vue的主要特性。（1）輕量級(jí)（2）數(shù)據(jù)綁定（3）指令豐富（4）插件眾多（5）組件化（6）虛擬DOM3.教師根據(jù)課件，講解Vue應(yīng)用開發(fā)相關(guān)的工具。（1）Vue庫文件（2）VueCLI（3）Node.js、npm和webpack（4）ES6三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括前端開發(fā)模式演變的三個(gè)階段，MVVM模式的基本思想，Vue框架的核心思想和主要特性，以及Vue應(yīng)用開發(fā)相關(guān)的工具（Vue庫文件、VueCLI等）的作用。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（Vue應(yīng)用開發(fā)的環(huán)境搭建，體驗(yàn)Vue應(yīng)用的開發(fā)與調(diào)試）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了前端開發(fā)模式演變的三個(gè)階段、Vue.js的基本概念和主要特性，以及Vue.js應(yīng)用相關(guān)的工具。接下來，本節(jié)課將介紹Vue應(yīng)用開發(fā)環(huán)境的搭建，包括開發(fā)工具安裝配置、代碼調(diào)試工具安裝及使用方法，并結(jié)合“歷史名城簡(jiǎn)介頁面”任務(wù)，體驗(yàn)Vue應(yīng)用程序的構(gòu)建、運(yùn)行和調(diào)試過程。3.明確學(xué)習(xí)目標(biāo)。了解Vue應(yīng)用開發(fā)所需要的開發(fā)和調(diào)試工具掌握開發(fā)和調(diào)試工具的安裝與使用熟悉Vue應(yīng)用的開發(fā)、運(yùn)行和調(diào)試流程二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹Vue應(yīng)用開發(fā)所需的開發(fā)和調(diào)試工具。（1）開發(fā)工具：VSCode。（2）調(diào)試工具：DevTools和VueDevtools。2.教師根據(jù)課件，介紹開發(fā)工具和調(diào)試工具的安裝與使用，并結(jié)合安裝與使用的演示進(jìn)行講解。（1）VSCode工具的安裝與使用。VSCode工具安裝，擴(kuò)展庫安裝。（2）DevTools工具的安裝與使用。DevTools工具的安裝以及常用面板Elements（元素）面板、Console（控制臺(tái)）面板、Sources（源代碼）面板和Network（網(wǎng)絡(luò)）面板的使用方法。（3）VueDevtools工具的安裝與使用。3.教師根據(jù)課件，介紹Vue應(yīng)用的開發(fā)、運(yùn)行和調(diào)試流程，并通過實(shí)戰(zhàn)項(xiàng)目進(jìn)行演示。（1）需求描述歷史名城游網(wǎng)站需要制作一個(gè)HTML頁面，用于介紹某個(gè)歷史名城的基本情況。頁面內(nèi)容包括標(biāo)題、介紹文字、點(diǎn)贊按鈕和點(diǎn)贊數(shù)。（2）實(shí)現(xiàn)思路使用VSCode創(chuàng)建一個(gè)HTML程序，引入Vue庫文件，并編寫相應(yīng)的HTML、CSS和JavaScript代碼。使用Chrome瀏覽器運(yùn)行該程序，并通過調(diào)試工具查看相關(guān)信息。（3）任務(wù)實(shí)施任務(wù)1-1構(gòu)建Vue應(yīng)用程序任務(wù)1-2運(yùn)行并調(diào)試Vue應(yīng)用程序三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的Vue應(yīng)用開發(fā)環(huán)境的搭建，包括開發(fā)工具安裝配置、代碼調(diào)試工具安裝及使用方法，熟悉Vue應(yīng)用的開發(fā)、運(yùn)行和調(diào)試流程。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。思考題和習(xí)題見教材單元1配套的習(xí)題和同步練習(xí)教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元2基礎(chǔ)語法計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析數(shù)據(jù)驅(qū)動(dòng)是Vue的核心思想之一。理解和掌握Vue應(yīng)用中如何通過操作數(shù)據(jù)來同步視圖的更新，是學(xué)習(xí)Vue框架的最基礎(chǔ)，也是非常重要的內(nèi)容。本單元將介紹與實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)相關(guān)的基礎(chǔ)語法，包括模板語法、數(shù)據(jù)綁定、流程控制、事件處理，計(jì)算屬性和數(shù)據(jù)監(jiān)聽器。通過“簡(jiǎn)易計(jì)算器”和“歷史名城典故頁面”任務(wù)，來讓學(xué)習(xí)者進(jìn)一步理解和掌握基礎(chǔ)語法。教學(xué)目標(biāo)及基本要求1.掌握模板語法中插值和常用指令的使用方法2.掌握計(jì)算屬性和數(shù)據(jù)監(jiān)聽器的使用3.能夠?qū)崿F(xiàn)單向綁定和雙向綁定4.能夠?qū)崿F(xiàn)事件處理教學(xué)重點(diǎn)1.掌握模板語法中插值和常用指令的使用方法2.能夠?qū)崿F(xiàn)單向綁定和雙向綁定3.能夠?qū)崿F(xiàn)事件處理教學(xué)難點(diǎn)能夠?qū)崿F(xiàn)單向綁定和雙向綁定教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（剖析Vue應(yīng)用程序，單向數(shù)據(jù)綁定、雙向數(shù)據(jù)綁定）一、創(chuàng)設(shè)情境，引入Vue應(yīng)用的原生HTML開發(fā)方式1.教師通過應(yīng)用場(chǎng)景描述，引出Vue應(yīng)用的原生HTML開發(fā)方式Vue應(yīng)用的開發(fā)方式有原生HTML開發(fā)、以組件嵌入網(wǎng)頁、單頁應(yīng)用（SinglePageApplication，SPA）或服務(wù)器端渲染幾種，為了幫助學(xué)習(xí)者盡快入門，單元2～單元9將結(jié)合原生HTML開發(fā)方式，講解Vue所提供的各個(gè)功能的應(yīng)用。單元10、單元11則采用單頁應(yīng)用方式結(jié)合快速搭建工具構(gòu)建工程化前端項(xiàng)目。2.明確學(xué)習(xí)目標(biāo)。了解Vue應(yīng)用的程序結(jié)構(gòu)了解Vue應(yīng)用程序編寫的相關(guān)概念理解數(shù)據(jù)綁定的基本原理掌握單向和雙向數(shù)據(jù)綁定的用法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹Vue應(yīng)用程序的結(jié)構(gòu)，講解Vue應(yīng)用程序編寫要素，并使用代碼進(jìn)行演示。（1）Vue應(yīng)用程序的典型結(jié)構(gòu)Vue是基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建用戶界面（2）Vue應(yīng)用程序編寫要素導(dǎo)入Vue庫文件選擇掛載點(diǎn)聲明渲染數(shù)據(jù)的HTML代碼結(jié)構(gòu)利用JavaScript定義數(shù)據(jù)和操作數(shù)據(jù)創(chuàng)建Vue應(yīng)用實(shí)例和進(jìn)行掛載處理2.教師根據(jù)課件，講解Vue程序開發(fā)相關(guān)概念。（1）模板語法插值語法{{JavaScript表達(dá)式}}指令語法v-指令:參數(shù)="表達(dá)式"（2）響應(yīng)式數(shù)據(jù)。組件data選項(xiàng)中定義的數(shù)據(jù)均具有響應(yīng)性。（3）掛載點(diǎn)。掛載點(diǎn)用于指定數(shù)據(jù)將被渲染的位置。（4）使用CDN方式導(dǎo)入Vue庫文件使用CDN方式導(dǎo)入Vue庫文件時(shí)，Vue的全局API均暴露在全局Vue對(duì)象上，即需要使用“Vue.函數(shù)名”方式來調(diào)用3.教師根據(jù)課件，講解模板語法中數(shù)據(jù)綁定的原理，單向數(shù)據(jù)和雙向數(shù)據(jù)綁定的用法，并使用代碼進(jìn)行演示。（1）數(shù)據(jù)綁定數(shù)據(jù)綁定分為單向和雙向兩種，其中單向綁定指的是數(shù)據(jù)改變會(huì)帶動(dòng)視圖更新，但視圖改變不會(huì)影響數(shù)據(jù)；雙向綁定則是指數(shù)據(jù)與視圖相互影響。（2）單向數(shù)據(jù)綁定語法和應(yīng)用插值表達(dá)式語法：{{vaScript表達(dá)式}}v-html語法：v-html="JavaScript表達(dá)式"v-text語法：v-text="JavaScript表達(dá)式"v-bind語法：v-bind:屬性名="JavaScript表達(dá)式"（3）雙向數(shù)據(jù)綁定語法和應(yīng)用v-model語法：v-model="JavaScript表達(dá)式"。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括Vue應(yīng)用程序結(jié)構(gòu)，相關(guān)的模板語法、掛載點(diǎn)、響應(yīng)式數(shù)據(jù)等概念，單向數(shù)據(jù)/雙向數(shù)據(jù)綁定的語法規(guī)則和使用方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（條件渲染、列表渲染、事件監(jiān)聽）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Vue應(yīng)用程序結(jié)構(gòu)，模板語法、掛載點(diǎn)、響應(yīng)式數(shù)據(jù)等概念，單向數(shù)據(jù)/雙向數(shù)據(jù)綁定的語法規(guī)則和使用方法。接下來，本節(jié)課將介紹如何利用條件渲染和列表渲染實(shí)現(xiàn)程序的分支和循環(huán)控制，以及事件處理機(jī)制的應(yīng)用。3.明確學(xué)習(xí)目標(biāo)。了解條件渲染語法規(guī)則，掌握其應(yīng)用方法了解列表渲染語法規(guī)則，掌握其應(yīng)用方法了解事件處理機(jī)制，掌握事件處理的實(shí)現(xiàn)二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹條件渲染語法，并使用代碼進(jìn)行演示。（1）v-if/v-else/v-else-if語法和應(yīng)用v-if="JavaScript表達(dá)式"、v-else="JavaScript表達(dá)式"、v-else-if="JavaScript表達(dá)式"。（2）v-show語法和應(yīng)用v-show="JavaScript表達(dá)式"（3）v-if/v-else/v-else-if和v-show比較兩者渲染方式，導(dǎo)致兩者性能上存在差異，如果需要頻繁地進(jìn)行切換，選擇v-show會(huì)比較好，如果渲染條件很少改變，則選擇v-if更佳。2.教師根據(jù)課件，介紹列表渲染的語法，并使用代碼進(jìn)行演示。（1）列表渲染語法v-for="(item,i_key,index)in對(duì)象名"v-bind:key="item.id"（2）列表渲染的應(yīng)用2.教師根據(jù)課件，介紹事件處理機(jī)制，并使用代碼進(jìn)行演示。（1）事件處理機(jī)制事件監(jiān)聽采用v-on指令為DOM元素綁定監(jiān)聽器，以監(jiān)聽DOM事件和觸發(fā)事件處理代碼的執(zhí)行。（2）事件處理實(shí)現(xiàn)語法v-on指令語法為v-on:事件名="表達(dá)式"，語法中“v-on:”可簡(jiǎn)寫為“@”。（3）事件處理的具體實(shí)現(xiàn)三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的條件渲染、列表渲染語法，利用條件和列表渲染分別實(shí)現(xiàn)分支和循環(huán)控制結(jié)構(gòu)，事件處理機(jī)制以及基本實(shí)現(xiàn)方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（事件修飾符、計(jì)算屬性、數(shù)據(jù)監(jiān)聽器）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了利用條件渲染和列表渲染實(shí)現(xiàn)程序的分支和循環(huán)控制的具體方法，以及事件處理機(jī)制概念，事件監(jiān)聽和事件處理的實(shí)現(xiàn)。接下來，本節(jié)課將進(jìn)一步介紹事件處理機(jī)制中的事件修飾符應(yīng)用，計(jì)算屬性的用法，以及數(shù)據(jù)監(jiān)聽器的用法。3.明確學(xué)習(xí)目標(biāo)。了解常用的事件修飾符的作用掌握常用事件修飾符的應(yīng)用方法掌握計(jì)算屬性的應(yīng)用方法掌握數(shù)據(jù)監(jiān)聽器的應(yīng)用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹事件處理機(jī)制中事件修飾符的使用方法，并使用代碼進(jìn)行演示。（1）Vue事件修飾符.stop：阻止事件冒泡。.self：只有當(dāng)前元素本身有事件觸發(fā)時(shí)，才調(diào)用事件處理函數(shù)。.prevent：阻止默認(rèn)事件。.capture：使用捕獲模式添加事件監(jiān)聽器。.once：實(shí)現(xiàn)事件只被觸發(fā)一次。.passive：以{passive:true}模式添加事件監(jiān)聽器。（2）Vue事件修飾符的應(yīng)用2.教師根據(jù)課件，介紹計(jì)算屬性的用法，并使用代碼進(jìn)行演示。（1）計(jì)算屬性的作用專門用于描述依賴響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯處理（2）計(jì)算屬性的語法（3）計(jì)算屬性的應(yīng)用2.教師根據(jù)課件，介紹數(shù)據(jù)監(jiān)聽器的用法，并使用代碼進(jìn)行演示。（1）數(shù)據(jù)監(jiān)聽器的作用可對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽，一旦數(shù)據(jù)發(fā)生變化，則觸發(fā)相應(yīng)函數(shù)的執(zhí)行，以達(dá)到改變其他數(shù)據(jù)的目的。（2）數(shù)據(jù)監(jiān)聽器的語法（3）數(shù)據(jù)監(jiān)聽器的應(yīng)用三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括事件修飾符的作用，事件修飾符的應(yīng)用方法，計(jì)算屬性的作用和應(yīng)用方法，數(shù)據(jù)監(jiān)聽器的作用和應(yīng)用方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第四課時(shí)（基礎(chǔ)語法在項(xiàng)目中的實(shí)際應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了事件處理機(jī)制中的事件修飾符應(yīng)用，計(jì)算屬性的用法，以及數(shù)據(jù)監(jiān)聽器的用法。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，講解單向和雙向綁定、條件渲染，以及數(shù)據(jù)監(jiān)聽器等基礎(chǔ)語法的綜合應(yīng)用幫助學(xué)習(xí)者進(jìn)一步掌握相關(guān)基礎(chǔ)語法的使用方法。3.明確學(xué)習(xí)目標(biāo)。掌握數(shù)據(jù)綁定的使用方法掌握事件監(jiān)聽和事件處理的實(shí)現(xiàn)方法掌握計(jì)算屬性和數(shù)據(jù)監(jiān)聽器的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目2-1——“簡(jiǎn)易計(jì)算器”項(xiàng)目的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述網(wǎng)頁版簡(jiǎn)易計(jì)算器包括操作數(shù)輸入框、運(yùn)算符下拉列表框和計(jì)算處理按鈕。用戶輸入操作數(shù)，選擇運(yùn)算符，單擊“計(jì)算”按鈕，按鈕下方應(yīng)顯示運(yùn)算結(jié)果。運(yùn)算符包括+、-、*、/、**，除平方值運(yùn)算外，其他運(yùn)算的操作數(shù)均為兩個(gè)。（2）實(shí)現(xiàn)思路采用輸入框（input）、下拉列表框（select）和按鈕（button），分別構(gòu)建計(jì)算器的操作數(shù)輸入框、運(yùn)算符下拉列表框，以及計(jì)算處理按鈕。對(duì)表單元素input、select的數(shù)據(jù)綁定需要使用雙向綁定，計(jì)算結(jié)果值則利用插值表達(dá)式呈現(xiàn)即可；針對(duì)“計(jì)算”按鈕的單擊事件，編寫事件處理函數(shù)以實(shí)現(xiàn)計(jì)算器的計(jì)算功能。除求平方運(yùn)算外，其他運(yùn)算均需要提供兩個(gè)操作數(shù)，也就是說求平方運(yùn)算需要隱藏第二個(gè)操作數(shù)，可使用v-show指令來實(shí)現(xiàn)這個(gè)功能。（3）功能實(shí)現(xiàn)任務(wù)2-1-1構(gòu)建頁面布局任務(wù)2-1-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括單向和雙向綁定、條件渲染，事件處理以及數(shù)據(jù)監(jiān)聽器的用法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第五課時(shí)（基礎(chǔ)語法在項(xiàng)目中的實(shí)際應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了單向和雙向綁定、條件渲染，事件處理以及數(shù)據(jù)監(jiān)聽器，在實(shí)際項(xiàng)目的綜合應(yīng)用。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，講解列表渲染、事件處理機(jī)制等基礎(chǔ)語法的綜合應(yīng)用，幫助學(xué)習(xí)者進(jìn)一步深入掌握相關(guān)基礎(chǔ)語法的使用方法。3.明確學(xué)習(xí)目標(biāo)。掌握事件監(jiān)聽和事件處理的實(shí)現(xiàn)方法掌握列表渲染的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目2-2——“歷史名城典故頁面”項(xiàng)目的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述歷史名城典故頁面包括左側(cè)城市列表和右側(cè)名城典故內(nèi)容，當(dāng)用戶選擇左側(cè)城市列表中某個(gè)城市時(shí)，應(yīng)能夠在右側(cè)名城典故內(nèi)容部分顯示對(duì)應(yīng)的名城典故信息。（2）實(shí)現(xiàn)思路采用列表（ul、li）、區(qū)塊（div）元素，分別構(gòu)建城市列表和名城典故內(nèi)容。使用v-for、v-text指令和列表元素實(shí)現(xiàn)城市列表效果；使用v-on指令為列表中每個(gè)城市選項(xiàng)綁定事件，以監(jiān)聽該選項(xiàng)的單擊事件，并利用對(duì)應(yīng)的事件處理函數(shù)實(shí)現(xiàn)名城典故的呈現(xiàn)。（3）功能實(shí)現(xiàn)任務(wù)2-2-1構(gòu)建頁面布局任務(wù)2-2-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括列表渲染、事件處理機(jī)制，事件監(jiān)聽和事件處理的用法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第六課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目：請(qǐng)利用v-model、v-if指令實(shí)現(xiàn)學(xué)情問卷調(diào)查頁面效果。下圖（a）所示的是程序運(yùn)行的初始效果，當(dāng)用戶輸入調(diào)查內(nèi)容并單擊“提交”按鈕后將顯示調(diào)查結(jié)果，如下圖（b）所示。提示：“性別”“你已學(xué)習(xí)的語言”可分別使用type為radio、checkbox的input元素來構(gòu)建。形式：?jiǎn)为?dú)完成要求：利用本單元中的知識(shí)點(diǎn)，實(shí)現(xiàn)項(xiàng)目需求對(duì)應(yīng)的功能，并且程序能夠正常運(yùn)行。思考題和習(xí)題見教材單元2配套的習(xí)題教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元3組件基礎(chǔ)計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析組件是Vue最強(qiáng)大的功能之一。組件是Vue應(yīng)用程序的基本結(jié)構(gòu)單元，它可以擴(kuò)展HTML元素，封裝可重用的代碼，提高代碼的可復(fù)用性，使項(xiàng)目變得更易維護(hù)和管理。本單元將介紹組件的定義和注冊(cè)，以及組件間數(shù)據(jù)傳遞、組件事件和動(dòng)態(tài)組件的實(shí)現(xiàn)，并結(jié)合“自定義頁面圖標(biāo)樣式”項(xiàng)目對(duì)組件基礎(chǔ)知識(shí)進(jìn)行鞏固。教學(xué)目標(biāo)及基本要求1.理解組件的概念2.掌握組件定義方法和注冊(cè)方法3.能夠?qū)崿F(xiàn)組件間數(shù)據(jù)傳遞教學(xué)重點(diǎn)1.掌握組件定義方法和注冊(cè)方法2.能夠?qū)崿F(xiàn)組件間數(shù)據(jù)傳遞教學(xué)難點(diǎn)能夠?qū)崿F(xiàn)組件間數(shù)據(jù)傳遞教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（組件的構(gòu)成、組件定義、組件注冊(cè)）一、創(chuàng)設(shè)情境，引入Vue組件概念1.教師通過應(yīng)用場(chǎng)景描述，引出組件化開發(fā)思想當(dāng)一個(gè)網(wǎng)站的導(dǎo)航菜單會(huì)在多個(gè)頁面中出現(xiàn)，若將導(dǎo)航菜單封裝成組件，則可在網(wǎng)站的不同頁面中重復(fù)使用該組件，要有效提高開發(fā)效率。因此，將一個(gè)網(wǎng)頁應(yīng)用拆分為多個(gè)小的功能塊（組件），每個(gè)功能塊負(fù)責(zé)實(shí)現(xiàn)對(duì)應(yīng)的功能，并被以組件形式封裝起來，在不同頁面可重復(fù)使用，從而使得頁面的管理和維護(hù)變得更加容易。2.明確學(xué)習(xí)目標(biāo)。了解組件化開發(fā)思想了解Vue組件構(gòu)成及其工作原理掌握組件的定義方法掌握組件的局部注冊(cè)和全局注冊(cè)方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹Vue組件的構(gòu)成，并使用代碼進(jìn)行演示。（1）Vue應(yīng)用程序由一個(gè)或多個(gè)組件構(gòu)成。（2）Vue組件的構(gòu)成。Template、Script和Style（3）組件實(shí)現(xiàn)網(wǎng)頁布局的工作過程。（4）Template的用法。2.教師根據(jù)課件，講解Vue組件的使用流程。（1）組件定義：利用JavaScript創(chuàng)建組件對(duì)象。（2）組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名。（3）組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁面中調(diào)用該組件。3.教師根據(jù)課件，介紹組件的定義方法，并使用代碼進(jìn)行演示。（1）組件的聲明語法：（2）使用案例講解組件定義的具體過程。4.教師根據(jù)課件，介紹組件的注冊(cè)方法，并使用代碼進(jìn)行演示。（1）全局注冊(cè)語法Vue應(yīng)用實(shí)例.component('組件注冊(cè)名',組件對(duì)象)（2）使用案例講解全局注冊(cè)的具體過程。（3）局部注冊(cè)語法components:{'注冊(cè)名':組件對(duì)象}（4）使用案例講解局部注冊(cè)的具體過程。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括組件化開發(fā)思想，Vue組件的構(gòu)成，Template的用法，組件的使用流程，組件的定義方法，以及全局注冊(cè)和局部注冊(cè)的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（組件間數(shù)據(jù)傳遞，props屬性的使用，props屬性的驗(yàn)證）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了組件化開發(fā)思想、Vue組件的構(gòu)成、Template的用法、組件的使用流程、組件的定義方法，以及組件注冊(cè)的方法。接下來，本節(jié)課將介紹父子組件間的數(shù)據(jù)傳遞，props屬性的應(yīng)用和驗(yàn)證方法。3.明確學(xué)習(xí)目標(biāo)。了解組件間數(shù)據(jù)傳遞的方式掌握props屬性的使用方法掌握props屬性的驗(yàn)證方法掌握父子組件間數(shù)據(jù)傳遞的實(shí)現(xiàn)方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹組件間通信方式。Vue中常用的組件間數(shù)據(jù)傳遞方式是父組件傳值給子組件，它是利用組件props選項(xiàng)定義的屬性來實(shí)現(xiàn)的。2.教師根據(jù)課件，介紹props屬性的使用方法，并使用代碼進(jìn)行演示。（1）props的語法。props:['屬性名',...]|{'屬性名':{...},...}（2）使用案例講解props屬性實(shí)現(xiàn)父子組件間數(shù)據(jù)傳遞。3.教師根據(jù)課件，介紹props屬性的驗(yàn)證，并使用代碼進(jìn)行演示。（1）驗(yàn)證的作用和方式作用類似于函數(shù)中檢查參數(shù)類型是否正確。常用驗(yàn)證方式有數(shù)據(jù)類型驗(yàn)證、必填值驗(yàn)證、默認(rèn)值設(shè)置和自定義驗(yàn)證函數(shù)。（2）數(shù)據(jù)類型驗(yàn)證的語法和應(yīng)用props:{propA:Number//指定propA的數(shù)據(jù)類型為Number}（3）必填值驗(yàn)證的語法和應(yīng)用props:{propC:{type:String,//type選項(xiàng)用于指定數(shù)據(jù)類型required:true//required選項(xiàng)用于將屬性設(shè)置為必須有值且其數(shù)據(jù)類型為type選項(xiàng)指定的數(shù)據(jù)類型}}（4）默認(rèn)值設(shè)置的語法和應(yīng)用props:{propD:{type:Number,default:100//default選項(xiàng)用于指定默認(rèn)值}}（5）自定義驗(yàn)證函數(shù)的語法和應(yīng)用props:{propF:{validator(value){//驗(yàn)證函數(shù)，要求propF屬性的值必須在0～100之間returnvalue>=0&&value<=100}}}三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的組件間數(shù)據(jù)傳遞方式，props屬性的語法，使用props實(shí)現(xiàn)父子組件間的數(shù)據(jù)傳遞，以及props屬性的常用驗(yàn)證方式的應(yīng)用。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（組件事件的監(jiān)聽與處理、組件事件的驗(yàn)證）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了父子組件間數(shù)據(jù)傳遞，props屬性的應(yīng)用和驗(yàn)證方法。接下來，本節(jié)課將介紹組件事件的監(jiān)聽與處理，組件事件的驗(yàn)證，以及在自定義組件中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法。3.明確學(xué)習(xí)目標(biāo)。了解組件事件概念掌握組件事件的監(jiān)聽與處理方法掌握利用組件事件實(shí)現(xiàn)子向父?jìng)髦档姆椒ㄕ莆战M件事件的驗(yàn)證方法掌握自定義組件中雙向數(shù)據(jù)綁定的實(shí)現(xiàn)二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹組件事件概念。Vue的組件事件可以由開發(fā)者來設(shè)計(jì)事件觸發(fā)條件，因此也被稱為自定義事件。組件事件用于實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)。2.教師根據(jù)課件，介紹組件監(jiān)聽處理的流程，并使用代碼進(jìn)行演示。（1）聲明和觸發(fā)自定義事件。在子組件中，使用emits選項(xiàng)聲明自定義事件；調(diào)用組件實(shí)例內(nèi)置函數(shù)$emit，并以事件名稱、要傳遞的數(shù)據(jù)為參數(shù)，觸發(fā)自定義事件并傳遞數(shù)據(jù)給父組件。（2）監(jiān)聽自定義事件父組件調(diào)用子組件時(shí)，在子組件元素中使用v-on指令（@指令）監(jiān)聽自定義事件。（3）使用案例講解組件監(jiān)聽和處理的具體過程。emits選項(xiàng)的語法為：emits:['事件名',...]|{'事件名':function(){...},...}$emit語法為：$emit('事件名',[...'參數(shù)名'])3.教師根據(jù)課件，介紹組件事件的驗(yàn)證處理，并使用代碼進(jìn)行演示。（1）驗(yàn)證方法。使用emits選項(xiàng)對(duì)組件自定義事件加以驗(yàn)證。（2）使用案例講解組件事件驗(yàn)證的具體過程。4.教師根據(jù)課件，介紹自定義組件中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法，并使用代碼進(jìn)行演示。（1）v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理（2）使用案例講解在自定義組件中使用v-model指令，結(jié)合自定義事件以及props選項(xiàng)，實(shí)現(xiàn)雙向數(shù)據(jù)傳遞。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括組件事件的監(jiān)聽和處理流程，emits和$emit結(jié)合實(shí)現(xiàn)組件監(jiān)聽和處理的方法，使用emits選項(xiàng)實(shí)現(xiàn)組件事件驗(yàn)證的方法，以及自定義組件中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第四課時(shí)（組件插槽、動(dòng)態(tài)組件）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了組件事件的監(jiān)聽與處理，組件事件的驗(yàn)證，以及在自定義組件中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法。接下來，本節(jié)課將介紹插槽概念、組件插槽的應(yīng)用和動(dòng)態(tài)組件的應(yīng)用。3.明確學(xué)習(xí)目標(biāo)。了解插槽概念了解默認(rèn)、具名和作用域三種插槽掌握三種插槽的使用方法掌握動(dòng)態(tài)組件的應(yīng)用二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹插槽概念。所謂插槽可理解成一個(gè)可以插入的槽口，其作用與電源插座的插口相類似。2.教師根據(jù)課件，介紹組件插槽分類及各自的用法，并使用代碼進(jìn)行演示。（1）組件插槽的分類。默認(rèn)、具名和作用域。（2）使用案例講解默認(rèn)插槽的使用方法語法：（3）使用案例講解具名插槽的使用方法語法：（4）使用案例講解作用域插槽的使用方法語法：3.教師根據(jù)課件，介紹動(dòng)態(tài)組件的用法，并使用代碼進(jìn)行演示。（1）動(dòng)態(tài)組件概念是指Vue應(yīng)用程序運(yùn)行過程中，在同一元素內(nèi)需要?jiǎng)討B(tài)切換不同組件。（2）動(dòng)態(tài)組件的應(yīng)用利用內(nèi)置組件Component實(shí)現(xiàn)動(dòng)態(tài)組件的定義。語法<component:is="組件名"></component>（3）使用案例講解動(dòng)態(tài)組件的應(yīng)用三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括插槽概念，默認(rèn)、具名和作用域三種組件插槽的使用方法，動(dòng)態(tài)組件的定義和應(yīng)用。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第五課時(shí)（組件在項(xiàng)目中的實(shí)際應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了插槽概念、組件插槽的應(yīng)用和動(dòng)態(tài)組件的應(yīng)用。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，講解組件基本用法、組件間數(shù)據(jù)傳遞以及組件插槽的綜合應(yīng)用，幫助學(xué)習(xí)者進(jìn)一步理解組件化開發(fā)思想，掌握組件定義、注冊(cè)和使用的方法。3.明確學(xué)習(xí)目標(biāo)。理解組件化開發(fā)思想掌握組件的定義、注冊(cè)和使用方法掌握組件間數(shù)據(jù)傳遞的實(shí)現(xiàn)方法掌握組件插槽的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目3——“自定義頁面圖標(biāo)樣式”項(xiàng)目的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述歷史名城游網(wǎng)站頁面布局中有多處需使用字體圖標(biāo)“+”，要求字體圖標(biāo)形狀相同，但在不同頁面中可能會(huì)調(diào)整其顏色或大小。（2）實(shí)現(xiàn)思路頁面布局分為上下兩個(gè)div區(qū)域，上面的div區(qū)域包括標(biāo)題“賞析”和“更多分類+”，下面的div區(qū)域使用li元素實(shí)現(xiàn)兩個(gè)作品的展示。引入第三方RemixIcon開源圖標(biāo)庫。采用組件對(duì)字體圖標(biāo)樣式設(shè)置進(jìn)行封裝，實(shí)現(xiàn)字體圖標(biāo)及其樣式的按需設(shè)置。通過props選項(xiàng)來接收使用者的圖標(biāo)樣式、字體類型和字體大小參數(shù)；在模板結(jié)構(gòu)中，聲明插槽用于填充不同布局所需要的字體圖標(biāo)，使用v-bind指令（:指令）將圖標(biāo)樣式、字體類型和字體大小參數(shù)與props選項(xiàng)中的屬性進(jìn)行綁定。在根組件中調(diào)用字體圖標(biāo)組件，并傳入所需的圖標(biāo)樣式、字體類型和字體大小參數(shù)。（3）功能實(shí)現(xiàn)任務(wù)3-1構(gòu)建頁面布局任務(wù)3-2實(shí)現(xiàn)自定義圖標(biāo)樣式三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括組件基本用法、組件間數(shù)據(jù)傳遞以及組件插槽的用法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第六課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目：請(qǐng)編寫一個(gè)自定義頁面文字樣式組件，并將其應(yīng)用在頁面的標(biāo)題和文字上。形式：?jiǎn)为?dú)完成要求：利用本單元中的知識(shí)點(diǎn)，實(shí)現(xiàn)項(xiàng)目需求對(duì)應(yīng)的功能，并且程序能夠正常運(yùn)行。思考題和習(xí)題見教材單元3配套的習(xí)題教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元4組件進(jìn)階計(jì)劃學(xué)時(shí)4學(xué)時(shí)內(nèi)容分析有了基本的組件知識(shí)后，我們可以更深入地了解組件。在Vue應(yīng)用程序運(yùn)行過程中，每個(gè)Vue組件都會(huì)經(jīng)歷創(chuàng)建、掛載、更新和銷毀4個(gè)階段。本單元將介紹組件的生命周期及其鉤子函數(shù)、內(nèi)置組件Teleport的高級(jí)功能。同時(shí)結(jié)合“彈出式登錄框”項(xiàng)目，幫助學(xué)習(xí)者對(duì)組件知識(shí)有更深入的了解和掌握。教學(xué)目標(biāo)及基本要求1.理解組件的生命周期2.能夠使用生命周期鉤子函數(shù)3.能夠結(jié)合Teleport實(shí)現(xiàn)模態(tài)框功能教學(xué)重點(diǎn)1.能夠使用生命周期鉤子函數(shù)2.能夠結(jié)合Teleport實(shí)現(xiàn)模態(tài)框功能教學(xué)難點(diǎn)教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（組件的生命周期）一、創(chuàng)設(shè)情境，引入組件生命周期概念1.教師通過應(yīng)用場(chǎng)景描述，引出組件生命周期在Vue應(yīng)用程序中，每個(gè)組件從創(chuàng)建到渲染完成都會(huì)經(jīng)歷一系列過程，組件從創(chuàng)建、掛載、更新到銷毀的一系列過程被稱為組件的生命周期。2.明確學(xué)習(xí)目標(biāo)。了解組件生命周期了解組件生命周期各階段的鉤子函數(shù)掌握鉤子函數(shù)的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹Vue組件的生命周期，并使用代碼進(jìn)行演示。（1）生命周期及其各階段鉤子函數(shù)。（2）創(chuàng)建階段的鉤子函數(shù)。beforeCreate和created（3）掛載階段的鉤子函數(shù)。beforeMount和mounted（4）更新階段。beforeUpdate和updated（5）銷毀階段。beforeUnmount和unmounted（6）使用案例講解實(shí)例的創(chuàng)建、掛載、更新和銷毀過程，以及各階段對(duì)應(yīng)的組件的狀態(tài)。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括組件生命周期，生命周期各階段鉤子函數(shù)的執(zhí)行過程，以及組件的狀態(tài)。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（Teleport組件）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了組件生命周期，生命周期各階段鉤子函數(shù)的執(zhí)行過程，以及組件的狀態(tài)。接下來，本節(jié)課將介紹Teleport組件的使用方法和具體應(yīng)用。3.明確學(xué)習(xí)目標(biāo)。了解Teleport組件的基本用法掌握Teleport組件實(shí)現(xiàn)模態(tài)框的方法掌握Teleport結(jié)合組件的使用方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹Teleport組件的基本語法。（1）Teleport作用將組件模板結(jié)構(gòu)的部分內(nèi)容“傳送”到該組件渲染區(qū)域之外的地方，而不受當(dāng)前組件布局結(jié)構(gòu)的影響。（2）使用方法在組件模板結(jié)構(gòu)中，增加teleport組件元素，將要控制位置的頁面元素作為其子元素，同時(shí)設(shè)置其屬性to為目標(biāo)位置（3）語法規(guī)則<teleportto=[CSS選擇器字符串]|[HTML元素對(duì)象]></teleport>2.教師根據(jù)課件，通過與傳統(tǒng)CSS比較的方式，講解Teleport組件實(shí)現(xiàn)模態(tài)框的具體方法，并使用代碼進(jìn)行演示。（1）使用案例演示CSS實(shí)現(xiàn)模型框的方法。（2）使用案例講解Teleport實(shí)現(xiàn)模型框的方法。3.教師根據(jù)課件，介紹Teleport與組件結(jié)合使用的方法，并使用代碼進(jìn)行演示。使用將模態(tài)框（加粗字體部分）封裝成組件的案例來講解Teleport如何與組件結(jié)合使用。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解Teleport組件的作用、使用方法，實(shí)現(xiàn)模態(tài)框具體過程，與組件結(jié)合使用的方法和具體應(yīng)用。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（Teleport組件在項(xiàng)目中的實(shí)際應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Teleport組件的使用方法和具體應(yīng)用。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，講解Teleport組件基本應(yīng)用，與組件結(jié)合使用的應(yīng)用，幫助學(xué)習(xí)者進(jìn)一步掌握Teleport組件的使用方法。3.明確學(xué)習(xí)目標(biāo)。理解組件化開發(fā)思想掌握Teleport使用方法掌握Teleport與組件結(jié)合使用的方法掌握組件間傳遞數(shù)據(jù)的方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目4——“自定義頁面圖標(biāo)樣式”項(xiàng)目的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述在歷史名城網(wǎng)站頁面右上角顯示“注冊(cè)|登錄”，單擊“登錄”，彈出登錄框，它將保持在頁面的最上層位置。該登錄框包括用戶名和密碼輸入框，以及“登錄”和“取消”按鈕，單擊“登錄”或“取消”按鈕時(shí)登錄框窗體關(guān)閉。（2）實(shí)現(xiàn)思路使用表單（form）元素構(gòu)建用戶登錄窗體。參考例4-6中模態(tài)框組件的實(shí)現(xiàn)方法，將用戶登錄窗體封裝成一個(gè)模態(tài)框組件，通過props選項(xiàng)實(shí)現(xiàn)使用者控制登錄框的彈出和關(guān)閉的功能，同時(shí)利用Teleport組件優(yōu)化登錄框的全屏渲染效果。（3）功能實(shí)現(xiàn)任務(wù)4-1構(gòu)建頁面布局任務(wù)4-2創(chuàng)建登錄框組件三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括組件化開發(fā)思想，Teleport基本用法，與組件結(jié)合使用的方法，組件間數(shù)據(jù)傳遞的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第四課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目：請(qǐng)編寫Vue應(yīng)用程序，要求單擊頁面上“我要注冊(cè)”按鈕，彈出注冊(cè)框，該注冊(cè)框包含4個(gè)輸入框（用戶名、密碼、郵箱和手機(jī)號(hào)碼）和兩個(gè)按鈕（“注冊(cè)”和“取消”），單擊“注冊(cè)”按鈕時(shí)關(guān)閉注冊(cè)框，單擊“取消”按鈕時(shí)清空所有輸入信息。形式：?jiǎn)为?dú)完成要求：利用本單元中的知識(shí)點(diǎn)，實(shí)現(xiàn)項(xiàng)目需求對(duì)應(yīng)的功能，并且程序能夠正常運(yùn)行。思考題和習(xí)題見教材單元4配套的習(xí)題教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元5過渡和動(dòng)畫計(jì)劃學(xué)時(shí)4學(xué)時(shí)內(nèi)容分析合理設(shè)計(jì)動(dòng)態(tài)效果是前端項(xiàng)目提高用戶體驗(yàn)的必要手段。本章將介紹Vue的內(nèi)置組件Transition和TransitionGroup是如何定義CSS過渡和動(dòng)畫，來響應(yīng)元素狀態(tài)變化的。通過“會(huì)員中心頁面”任務(wù)的實(shí)施，幫助學(xué)習(xí)者進(jìn)一步掌握Transition和TransitionGroup組件的應(yīng)用。教學(xué)目標(biāo)及基本要求1．理解過渡和動(dòng)畫含義2．掌握過渡和動(dòng)畫的實(shí)現(xiàn)方法3．能夠?qū)崿F(xiàn)單個(gè)元素過渡和動(dòng)畫4．能夠?qū)崿F(xiàn)多個(gè)元素和組件過渡5．能夠利用鉤子函數(shù)實(shí)現(xiàn)過渡和動(dòng)畫6．能夠?qū)崿F(xiàn)列表過渡教學(xué)重點(diǎn)1．掌握過渡和動(dòng)畫的實(shí)現(xiàn)方法2．能夠?qū)崿F(xiàn)單個(gè)元素過渡和動(dòng)畫3．能夠?qū)崿F(xiàn)多個(gè)元素和組件過渡教學(xué)難點(diǎn)能夠?qū)崿F(xiàn)單個(gè)元素過渡和動(dòng)畫教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（認(rèn)識(shí)過渡和動(dòng)畫，Transition組件，過渡和動(dòng)畫樣式類）一、創(chuàng)設(shè)情境，引入過渡和動(dòng)畫概念1.教師通過應(yīng)用場(chǎng)景描述，引出過渡和動(dòng)畫的必要性。前端項(xiàng)目開發(fā)中，合理地運(yùn)用動(dòng)畫技術(shù)，能夠增強(qiáng)頁面的交互效果，引導(dǎo)用戶看到操作的反饋，從而有效地提升用戶的體驗(yàn)。例如：為了引導(dǎo)用戶關(guān)注頁面的反饋信息或場(chǎng)景的切換，不少網(wǎng)頁中會(huì)加入一些動(dòng)畫效果，來吸引用戶的注意力。2.明確學(xué)習(xí)目標(biāo)。理解過渡和動(dòng)畫含義掌握過渡和動(dòng)畫的實(shí)現(xiàn)方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.過渡和動(dòng)畫含義？在頁面組件中元素顯示狀態(tài)發(fā)生改變時(shí)，元素不會(huì)直接顯示和隱藏，而是伴隨一個(gè)過渡或動(dòng)畫效果，該效果的核心原理是采用CSS的類（class）選擇器來實(shí)現(xiàn)的。2.教師根據(jù)課件，回顧C(jī)SS3相關(guān)屬性知識(shí)，介紹Transition組件基本用法。（1）教師根據(jù)課件，介紹回顧C(jī)SS3相關(guān)屬性知識(shí)，并使用代碼進(jìn)行演示。CSS3中transition和animation屬性，它們分別用于支持過渡和動(dòng)畫效果。（2）教師根據(jù)課件，介紹Transition組件語法規(guī)則、進(jìn)入和離開狀態(tài)觸發(fā)方式、Transition組件的常用屬性，并使用代碼進(jìn)行演示。語法：（3）教師根據(jù)課件，介紹Transition實(shí)現(xiàn)過渡和動(dòng)畫的原理。當(dāng)插入或刪除被包裹在Transition組件內(nèi)的元素時(shí)，Vue首先判斷目標(biāo)元素是否應(yīng)用了一個(gè)CSS3過渡/動(dòng)畫效果。如果是，則會(huì)在某個(gè)時(shí)間點(diǎn)自動(dòng)添加或移除對(duì)應(yīng)的樣式類，否則，將會(huì)調(diào)用對(duì)應(yīng)的JavaScript鉤子函數(shù)。如果上述情況均不存在，則下一幀將立即執(zhí)行插入或刪除元素的操作。（4）教師根據(jù)課件，介紹過渡和動(dòng)畫樣式類。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括過渡和動(dòng)畫含義、Transition組件的語法規(guī)則、進(jìn)入和離開狀態(tài)觸發(fā)方式、Transition組件的常用屬性，以及過渡和動(dòng)畫樣式類。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（Transition實(shí)現(xiàn)單元素過渡和動(dòng)畫）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Transition組件基本用法、Transition實(shí)現(xiàn)過渡和動(dòng)畫的原理，接下來，本節(jié)課將通過實(shí)例介紹Transition結(jié)合CSS、Transition結(jié)合JavaScript進(jìn)行過渡和動(dòng)畫的具體實(shí)現(xiàn)。3.明確學(xué)習(xí)目標(biāo)。能夠利用Transition結(jié)合CSS實(shí)現(xiàn)過渡和動(dòng)畫能夠利用Transition結(jié)合JavaScript實(shí)現(xiàn)過渡和動(dòng)畫二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，通過例5.2，5.3案例講解Transition結(jié)合CSS如何實(shí)現(xiàn)過渡和動(dòng)畫。2.教師根據(jù)課件，介紹JavaScript對(duì)應(yīng)進(jìn)入/離開兩個(gè)階段的8個(gè)鉤子函數(shù)，通過例5.4，5.5案例講解Transition結(jié)合JavaScript如何實(shí)現(xiàn)過渡和動(dòng)畫。（1）JavaScript的8個(gè)鉤子函數(shù)before-enter：進(jìn)入過渡/動(dòng)畫開始前執(zhí)行的方法。enter：進(jìn)入過渡/動(dòng)畫過程中執(zhí)行的方法。after-enter：進(jìn)入過渡/動(dòng)畫完成后執(zhí)行的方法。enter-cancelled：進(jìn)入過渡/動(dòng)畫取消時(shí)執(zhí)行的方法。before-leave：離開過渡/動(dòng)畫開始前執(zhí)行的方法。leave：離開過渡/動(dòng)畫過程中執(zhí)行的方法。after-leave：離開過渡/動(dòng)畫完成后執(zhí)行的方法。leave-cancelled：離開過渡/動(dòng)畫取消時(shí)執(zhí)行的方法。（2）結(jié)合案例講解以上鉤子函數(shù)的具體應(yīng)用三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的知識(shí)點(diǎn)，包括JavaScript鉤子函數(shù)的用法，利用Transition結(jié)合CSS、Transition結(jié)合JavaScript進(jìn)行過渡和動(dòng)畫的具體實(shí)現(xiàn)。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（多元素過渡，TransitionGroup組件，列表過渡）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了Transition結(jié)合CSS、Transition結(jié)合JavaScript進(jìn)行過渡和動(dòng)畫的具體實(shí)現(xiàn)。接下來，本節(jié)課將介紹多個(gè)元素過渡實(shí)現(xiàn)方法，利用TransitionGroup組件實(shí)現(xiàn)列表過渡的方法。3.明確學(xué)習(xí)目標(biāo)。掌握多元素過渡的實(shí)現(xiàn)方法掌握TransitionGroup的應(yīng)用二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，講解不同類型和相同類型多元素的過渡實(shí)現(xiàn)，并使用代碼進(jìn)行演示。（1）針對(duì)多個(gè)不同類型的元素，利用v-if/v-else進(jìn)行元素間的切換，使這些元素應(yīng)用同一個(gè)過渡效果。（2）針對(duì)多個(gè)相同類型的元素，通過設(shè)置key屬性值區(qū)分相同類型的不同元素，實(shí)現(xiàn)過渡效果。（3）針對(duì)多個(gè)組件，Vue提供了內(nèi)置組件Component，利用它的is屬性輪流綁定應(yīng)用過渡效果的組件名。2.教師根據(jù)課件，介紹TransitionGroup組件的使用方法，并使用代碼進(jìn)行演示。在一個(gè)元素或組件被插入和移出v-for列表時(shí)應(yīng)用過渡，從而實(shí)現(xiàn)動(dòng)態(tài)列表效果。3.教師根據(jù)課件，介紹項(xiàng)目5——會(huì)員中心頁面的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述會(huì)員中心頁面包括左側(cè)導(dǎo)航欄和右側(cè)內(nèi)容，通過導(dǎo)航欄切換到“我的賬戶”和“我的游記”，并帶有過渡效果；“我的賬戶”中可以動(dòng)態(tài)增加或刪除“郵箱”字段，同樣也要求使用過渡效果。（2）實(shí)現(xiàn)思路采用局部組件，構(gòu)建會(huì)員中心頁面的“我的賬戶”和“我的游記”兩個(gè)部分。由于“我的賬戶”和“我的游記”組件切換時(shí)，同一時(shí)間只需渲染其中一個(gè)，符合Transition組件應(yīng)用條件，而“我的賬戶”表單中“郵箱”字段增加/刪除所形成的列表，則需要TransitionGroup組件才能實(shí)現(xiàn)過渡效果。（3）功能實(shí)現(xiàn)任務(wù)5-1構(gòu)建頁面布局任務(wù)5-2創(chuàng)建局部組件三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括多個(gè)元素過渡的實(shí)現(xiàn)方法，利用TransitionGroup組件實(shí)現(xiàn)列表過渡的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第四課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目：請(qǐng)編寫一個(gè)登錄頁面，其中包含3個(gè)輸入框：用戶名、密碼和驗(yàn)證碼。只有當(dāng)用戶輸入密碼錯(cuò)誤時(shí)，才要求輸入驗(yàn)證碼，并使用Transition組件實(shí)現(xiàn)驗(yàn)證碼輸入框顯示的過渡效果形式：?jiǎn)为?dú)完成要求：利用本單元中的知識(shí)點(diǎn)，實(shí)現(xiàn)項(xiàng)目需求對(duì)應(yīng)的功能，并且程序能夠正常運(yùn)行。思考題和習(xí)題見教材單元5配套的習(xí)題教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元6組合式API計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析Vue中提供了兩種編寫組件的方式：選項(xiàng)式API和組合式API。前者主要用于Vue2及以前的版本，后者則是Vue3中新引入的特性之一，它注重對(duì)同一功能的邏輯關(guān)注點(diǎn)相關(guān)代碼的匯集，適用于大型項(xiàng)目中復(fù)雜組件的開發(fā)，具有代碼可復(fù)用性高和可維護(hù)性強(qiáng)的特點(diǎn)。本單元將介紹兩者的差異，并重點(diǎn)介紹組合式API編寫組件的方法，以及相關(guān)的知識(shí)點(diǎn)，包括setup函數(shù)、響應(yīng)性API的原理和provide/inject。通過使用兩種方式實(shí)現(xiàn)“查詢歷史名城相關(guān)詩詞”任務(wù)，使得學(xué)習(xí)者更好地理解組合式API的特點(diǎn)，掌握其使用方法。教學(xué)目標(biāo)及基本要求1.了解組合式API特點(diǎn)2.理解響應(yīng)性原理3.掌握setup函數(shù)應(yīng)用方法4.掌握響應(yīng)性API的使用5.能夠利用provide/inject實(shí)現(xiàn)組件間傳值教學(xué)重點(diǎn)1.理解響應(yīng)性原理2.掌握setup函數(shù)應(yīng)用方法3.掌握響應(yīng)性API的使用教學(xué)難點(diǎn)理解響應(yīng)性原理教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（組合式API特點(diǎn)，組合式API用法，setup函數(shù)及其用法）一、創(chuàng)設(shè)情境，引入組合式API概念1.教師通過應(yīng)用場(chǎng)景描述，引出組合式API的必要性。在前面單元中，Vue組件的編寫是按照選項(xiàng)來歸置代碼塊的，這種方式被稱為選項(xiàng)式API（OptionsAPI），它具有易學(xué)易用的特點(diǎn)，但代碼本身的邏輯關(guān)聯(lián)性卻沒有得到很好的體現(xiàn)。Vue3引入了新的編寫方式——組合式API（CompositionAPI），在程序結(jié)構(gòu)上，它能夠?qū)ν还δ艿倪壿嬯P(guān)注點(diǎn)進(jìn)行聚合，便于復(fù)雜組件中各功能邏輯的組織。2.明確學(xué)習(xí)目標(biāo)。了解組合式API的特點(diǎn)了解setup函數(shù)的結(jié)構(gòu)和參數(shù)掌握組合式API編寫組件的方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，通過對(duì)比選項(xiàng)式API和組合式API，結(jié)合實(shí)現(xiàn)代碼來講解兩者的特點(diǎn)。2.教師根據(jù)課件，講解組合式API中setup函數(shù)的結(jié)構(gòu)、參數(shù)props和參數(shù)context的用法。（1）教師根據(jù)課件，介紹setup函數(shù)的結(jié)構(gòu)。（2）教師根據(jù)課件，介紹參數(shù)props的作用和使用方法，并使用代碼進(jìn)行演示。props本身是子組件中的選項(xiàng)，其所定義的屬性用于接收父組件傳遞過來的數(shù)據(jù)，props以setup函數(shù)的參數(shù)形式將這些數(shù)據(jù)提供給setup函數(shù)使用。（3）教師根據(jù)課件，參數(shù)context的作用和使用方法，并使用代碼進(jìn)行演示。context是一個(gè)普通的JavaScript對(duì)象，可為setup函數(shù)提供其他可能有用的值。3.教師根據(jù)課件，講解setup函數(shù)中訪問生命周期函數(shù)的具體方法，并使用代碼進(jìn)行演示。（1）訪問方法在setup函數(shù)中訪問組件生命周期鉤子函數(shù)的方法是在每個(gè)鉤子函數(shù)名之前加上“on”，并將函數(shù)名首字母改為大寫。（2）使用案例講解訪問生命周期鉤子函數(shù)的具體應(yīng)用三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括選項(xiàng)式API和組合式API的特點(diǎn)，組合式API編寫組件的方法，setup函數(shù)結(jié)構(gòu)和參數(shù)，以及setup函數(shù)訪問生命周期函數(shù)。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（響應(yīng)性原理，響應(yīng)性API中reactive/ref，toRef/toRefs）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了組合式API編寫組件的方法、setup函數(shù)的結(jié)構(gòu)和參數(shù)，接下來，本節(jié)課將通過實(shí)例介紹響應(yīng)性原理、響應(yīng)性API的reactive、ref、toRef、toRefs的具體用法。3.明確學(xué)習(xí)目標(biāo)。了解響應(yīng)性原理掌握響應(yīng)性API的reactive、ref、toRef、toRefs用法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹響應(yīng)性原理相關(guān)概念，以及響應(yīng)式數(shù)據(jù)實(shí)現(xiàn)的流程，并使用代碼進(jìn)行演示。（1）教師根據(jù)課件，講解副作用函數(shù)概念。它是會(huì)引起副作用的函數(shù)，它的執(zhí)行會(huì)直接或間接影響該函數(shù)作用域之外的部分。（2）教師根據(jù)課件，講解Proxy概念。Proxy被稱為代理，它包裝了另一個(gè)對(duì)象，即在該對(duì)象和外界之間設(shè)置攔截，以便對(duì)外界的訪問進(jìn)行過濾和修改。（3）教師根據(jù)課件，講解響應(yīng)式數(shù)據(jù)的實(shí)現(xiàn)流程，并使用代碼進(jìn)行演示。2.教師根據(jù)課件，介紹部分常用的響應(yīng)性API的應(yīng)用，包括reactive、ref、toRef和toRefs，并使用代碼進(jìn)行演示。（1）教師根據(jù)課件，介紹reactive用法，并使用代碼進(jìn)行演示。reactive根據(jù)傳入的對(duì)象，返回一個(gè)深度響應(yīng)式對(duì)象。（2）教師根據(jù)課件，介紹ref用法，并使用代碼進(jìn)行演示。ref只接收一個(gè)基本類型數(shù)據(jù)，并返回一個(gè)響應(yīng)式且可變的ref對(duì)象。（3）教師根據(jù)課件，介紹toRef用法，并使用代碼進(jìn)行演示。toRef可以將響應(yīng)式對(duì)象中的屬性也轉(zhuǎn)換為響應(yīng)式的，但一次只能轉(zhuǎn)換一個(gè)屬性。（4）教師根據(jù)課件，介紹toRefs用法，并使用代碼進(jìn)行演示。toRefs可以將響應(yīng)式對(duì)象中的屬性也轉(zhuǎn)換為響應(yīng)式的，且可以一次性轉(zhuǎn)換所有屬性。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的響應(yīng)性原理及相關(guān)概念，響應(yīng)性API中reactive、ref、toRef和toRefs的用法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（響應(yīng)性API中的computed和watch）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了響應(yīng)性原理、響應(yīng)性API的reactive、ref、toRef、toRefs的具體用法，接下來，本節(jié)課將介紹其它常用的響應(yīng)性API，包括computed、watch，另外，介紹provide與inject組合實(shí)現(xiàn)跨層數(shù)據(jù)傳遞。3.明確學(xué)習(xí)目標(biāo)。掌握computed和watch的用法掌握provide與inject的用法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，講解響應(yīng)性API中的computed和watch的使用方法，并使用代碼進(jìn)行演示。（1）教師根據(jù)課件，講解computed的用法，并使用代碼進(jìn)行演示。computed在setup函數(shù)中的作用仍然是緩存數(shù)據(jù)，但使用方法有些不同。computed僅接收一個(gè)回調(diào)函數(shù)作為參數(shù)，返回一個(gè)ref對(duì)象。（2）教師根據(jù)課件，講解watch的用法，并使用代碼進(jìn)行演示。數(shù)據(jù)監(jiān)聽器watch用于偵聽指定的數(shù)據(jù)源，并在回調(diào)函數(shù)中調(diào)用副作用函數(shù)。其用法與選項(xiàng)式API中的有些不同。2.教師根據(jù)課件，講解provide和inject的用法，并使用代碼進(jìn)行演示。Vue3中provide和inject結(jié)合使用，可以方便地實(shí)現(xiàn)跨層傳遞數(shù)據(jù)的功能。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括在setup函數(shù)中，使用computed描述響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯處理，使用watch監(jiān)聽數(shù)據(jù)并改變其他數(shù)據(jù)，利用provide和inject實(shí)現(xiàn)跨層數(shù)據(jù)傳遞的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第四課時(shí)（響應(yīng)性API在項(xiàng)目中的實(shí)際應(yīng)用）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了其它常用的響應(yīng)性API，包括computed、watch，另外，介紹provide與inject組合用法。接下來，本節(jié)課將通過實(shí)際應(yīng)用項(xiàng)目，分別使用選項(xiàng)式API與組合式API，幫助學(xué)習(xí)者進(jìn)一步理解兩種編寫組件方法的差異性，并能夠掌握組合式API的用法。3.明確學(xué)習(xí)目標(biāo)。掌握組合式API編寫組件的方法理解選項(xiàng)式API和組合式API差異性二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，介紹項(xiàng)目6——會(huì)員中心頁面的需求描述、實(shí)現(xiàn)思路和代碼實(shí)現(xiàn)。（1）需求描述會(huì)員中心頁面包括左側(cè)導(dǎo)航欄和右側(cè)內(nèi)容，通過導(dǎo)航欄切換到“我的賬戶”和“我的游記”，并帶有過渡效果；“我的賬戶”中可以動(dòng)態(tài)增加或刪除“郵箱”字段，同樣也要求使用過渡效果（2）實(shí)現(xiàn)思路采用局部組件，構(gòu)建會(huì)員中心頁面的“我的賬戶”和“我的游記”兩個(gè)部分由于“我的賬戶”和“我的游記”組件切換時(shí)，同一時(shí)間只需渲染其中一個(gè)，符合Transition組件應(yīng)用條件，而“我的賬戶”表單中“郵箱”字段增加/刪除所形成的列表，則需要TransitionGroup組件才能實(shí)現(xiàn)過渡效果（3）功能實(shí)現(xiàn)任務(wù)6-1采用選項(xiàng)式API實(shí)現(xiàn)任務(wù)6-2利用組合式API重構(gòu)三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括選項(xiàng)式API編寫組件的過程，組合式API編寫組件的過程，兩種方式的差異性。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第五、六課時(shí)（項(xiàng)目實(shí)踐）項(xiàng)目實(shí)踐主要針對(duì)本單元中需要重點(diǎn)掌握的知識(shí)點(diǎn)，通過項(xiàng)目功能實(shí)現(xiàn)來加強(qiáng)概念的理解，熟悉并掌握編程知識(shí)點(diǎn)的應(yīng)用，通過項(xiàng)目實(shí)踐可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況和應(yīng)用能力。題目：請(qǐng)利用組合式API實(shí)現(xiàn)簡(jiǎn)易計(jì)算器，其中包括加、減、乘和除運(yùn)算功能形式：?jiǎn)为?dú)完成要求：利用本單元中的知識(shí)點(diǎn)，實(shí)現(xiàn)項(xiàng)目需求對(duì)應(yīng)的功能，并且程序能夠正常運(yùn)行。思考題和習(xí)題見教材單元6配套的習(xí)題教學(xué)后記《Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用》教學(xué)設(shè)計(jì)課程名稱：Vue.js前端開發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用授課年級(jí)：授課學(xué)期：學(xué)年第一學(xué)期教師姓名：2023年09月09日課題名稱單元7與后端交互——axios計(jì)劃學(xué)時(shí)6學(xué)時(shí)內(nèi)容分析前端頁面的動(dòng)態(tài)數(shù)據(jù)是需要通過網(wǎng)絡(luò)請(qǐng)求后端API來獲取的。本單元將介紹Vue的重要插件axios的應(yīng)用。在Vue應(yīng)用程序中，通常使用axios對(duì)HTTP請(qǐng)求提交和結(jié)果返回進(jìn)行處理。借助開放數(shù)據(jù)接口服務(wù)實(shí)現(xiàn)“查詢旅游城市天氣”任務(wù)，讓學(xué)習(xí)者體驗(yàn)真實(shí)網(wǎng)絡(luò)平臺(tái)數(shù)據(jù)訪問的實(shí)現(xiàn)過程，更好地理解異步編程相關(guān)概念，進(jìn)一步掌握axios插件的應(yīng)用方法。教學(xué)目標(biāo)及基本要求1．掌握axios的安裝與配置2．理解Promise和async/await3．能夠利用axios處理GET/POST請(qǐng)求4．掌握axios攔截器的應(yīng)用教學(xué)重點(diǎn)1．理解Promise和async/await2．能夠利用axios處理GET/POST請(qǐng)求教學(xué)難點(diǎn)理解Promise和async/await教學(xué)方式教學(xué)采用教師使用PPT講解和案例示范相結(jié)合的方式教學(xué)過程第一課時(shí)（認(rèn)識(shí)axios，Promise，async/await）一、創(chuàng)設(shè)情境，引入異步編程概念1.教師通過應(yīng)用場(chǎng)景描述，引出ES6異步編程方案。Web應(yīng)用前后端交互時(shí)，通常是通過HTTP請(qǐng)求實(shí)現(xiàn)的。例如用戶要查看自己的賬戶信息，該功能的實(shí)現(xiàn)過程是，首先前端將用戶名作為參數(shù)，通過網(wǎng)絡(luò)向后端API發(fā)出HTTP請(qǐng)求，后端API程序據(jù)此對(duì)用戶信息表進(jìn)行查詢操作，然后前端通過網(wǎng)絡(luò)可獲得后端API返回的查詢結(jié)果并顯示。ES6采用Promise代替?zhèn)鹘y(tǒng)的“回調(diào)函數(shù)+事件”異步編程方案，來實(shí)現(xiàn)上述過程。2.明確學(xué)習(xí)目標(biāo)。理解異步編程概念學(xué)會(huì)使用Promise實(shí)現(xiàn)異步處理學(xué)會(huì)使用async/await實(shí)現(xiàn)異步處理二、進(jìn)行重點(diǎn)知識(shí)的講解1.Promise異步編程概念？所謂Promise，可以理解為一個(gè)容器，里面包裹著某個(gè)事件（異步任務(wù)），這個(gè)事件會(huì)在將來的某個(gè)時(shí)刻發(fā)生，同時(shí)它還會(huì)保存事件的結(jié)果。2.教師根據(jù)課件，介紹Promise對(duì)象相關(guān)概念，能使用代碼進(jìn)行演示。（1）教師根據(jù)課件，介紹Promise對(duì)象的狀態(tài)、參數(shù)和方法幾個(gè)概念，并使用代碼進(jìn)行演示。Promise對(duì)象具有3個(gè)狀態(tài)：Pending（等待中）、Resolved（已完成）和Rejected（已失?。?；Promise對(duì)象有兩個(gè)參數(shù)resolve和reject，它們是Promise構(gòu)造函數(shù)的參數(shù)；Promise對(duì)象有兩個(gè)方法then和catch，它們分別接收一個(gè)回調(diào)函數(shù)為參數(shù)。（2）教師根據(jù)課件，介紹Promise實(shí)現(xiàn)異步編程的原理。（3）教師根據(jù)課件，介紹async/await實(shí)現(xiàn)異步編程的方法，并使用代碼進(jìn)行演示。async語法規(guī)則：aysnc函數(shù)名{...[return返回值]}。await語法格式：[返回值]=await表達(dá)式。三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要熟悉的知識(shí)點(diǎn)，包括異步編程概念、Promise的工作原理和基本用法、async/await實(shí)現(xiàn)異步請(qǐng)求處理的方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第二課時(shí)（axios安裝和配置，axios實(shí)現(xiàn)HTTP請(qǐng)求）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了異步編程概念，Promise工作原理、Promise實(shí)現(xiàn)異步處理、async/await實(shí)現(xiàn)異步處理，本節(jié)課將介紹axios安裝、axiosAPI，以及使用axios實(shí)現(xiàn)HTTP請(qǐng)求的方法。3.明確學(xué)習(xí)目標(biāo)。掌握axios安裝與配置了解axiosAPI能夠使用axiosAPI處理HTTP請(qǐng)求的方法二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，講解axios的特點(diǎn)和安裝方式，并演示安裝過程。（1）特點(diǎn)從瀏覽器中創(chuàng)建XMLHttpRequest對(duì)象。從Node.js創(chuàng)建HTTP請(qǐng)求。支持PromiseAPI。攔截請(qǐng)求和響應(yīng)。轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)。取消請(qǐng)求。自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)。客戶端支持防御XSRF（Cross-SiteRequestForgery，跨站請(qǐng)求偽造）（2）CDN方式安裝<scriptsrc="/axios/dist/axios.min.js"></script>2.教師根據(jù)課件，介紹axiosAPI的具體含義和作用。（1）axios語法axios(config).then(function(response){}).catch(function(error){})（2）axiosAPI請(qǐng)求配置config，包括url、method、data、params等；響應(yīng)對(duì)象response，包括status、data等。3.教師根據(jù)課件，通過實(shí)例7-5、7-6介紹axiosAPI實(shí)現(xiàn)HTTP請(qǐng)求的過程。（1）任何類型請(qǐng)求的處理（2）GET/POST請(qǐng)求的處理三、歸納總結(jié)，布置課后作業(yè)1.回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。教師帶領(lǐng)學(xué)生總結(jié)本節(jié)課需要了解的axios特點(diǎn)、axios安裝步驟、axiosAPI語法規(guī)則和各參數(shù)含義，以及axiosAPI實(shí)現(xiàn)任何類型HTTP請(qǐng)求，GET/POST請(qǐng)求的具體實(shí)現(xiàn)方法。2.布置隨堂練習(xí)，檢查學(xué)生掌握情況。根據(jù)在線課程資源，給學(xué)生布置隨堂練習(xí)，檢測(cè)學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。第三課時(shí)（axios請(qǐng)求攔截器，axios響應(yīng)攔截器）一、回顧上節(jié)課內(nèi)容，繼續(xù)講解本課時(shí)的知識(shí)1.教師對(duì)學(xué)生們的疑問進(jìn)行統(tǒng)一答疑。2.回顧上個(gè)課時(shí)所學(xué)習(xí)的內(nèi)容，繼續(xù)介紹本課時(shí)的內(nèi)容。上節(jié)課主要為大家介紹了axios安裝與配置、axiosAPI語法規(guī)則和各參數(shù)含義，以及axiosAPI實(shí)現(xiàn)任何類型HTTP請(qǐng)求，GET/POST請(qǐng)求的具體實(shí)現(xiàn)方法。接下來，本節(jié)課將axios攔截器的編寫方法和應(yīng)用。3.明確學(xué)習(xí)目標(biāo)。掌握axios請(qǐng)求攔截器的應(yīng)用掌握axios響應(yīng)攔截器的應(yīng)用二、進(jìn)行重點(diǎn)知識(shí)的講解1.教師根據(jù)課件，講解axios請(qǐng)求攔截器的實(shí)現(xiàn)方法，并使用代碼進(jìn)行演示。（1）創(chuàng)建請(qǐng)求攔截器的語法：erceptors.request.use(function(config){...//發(fā)送請(qǐng)求之前的操作returnconfig;//返回請(qǐng)求配置對(duì)象},function(error){...//對(duì)請(qǐng)求錯(cuò)誤的處理returnPromise.reject(error);});（2）使用案例講解請(qǐng)求攔截器的具體實(shí)現(xiàn)。2.教