191-XXXX學(xué)院教案教案（詳案）2022-2023學(xué)年第2學(xué)期課程名稱：Vue.js前端框架基礎(chǔ)項(xiàng)目式教程課程代碼：適用專業(yè)：大數(shù)據(jù)技術(shù)及應(yīng)用教師姓名：所屬系部：XXXXXXXXXXX學(xué)院職稱：課時(shí)：總學(xué)時(shí)64（理實(shí)一體64）使用教材：教務(wù)處制

XX城市職業(yè)學(xué)院教學(xué)單元教案主題Vue實(shí)現(xiàn)單網(wǎng)頁-輸出Helloworld序號(hào)1課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論￡實(shí)訓(xùn)R一體化￡（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue.js的引入方式；2.了解前端開發(fā)模式的演變歷程；3.能掌握HbuilderX軟件的基本使用。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue的應(yīng)用場景。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.能掌握Vue.js的引入方式；2.能掌握HbuilderX軟件的基本使用。教學(xué)難點(diǎn)1.能掌握Vue.js的引入方式。教學(xué)過程設(shè)計(jì)備注任務(wù)1（輸出Helloworld）（90分鐘）第一課時(shí)一、創(chuàng)設(shè)情境，引入Vue.js框架1.教師通過應(yīng)用場景描述，引出前端開發(fā)模式演變歷程。Vue.js（簡稱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，模型-視圖-視圖模型）模式是一種簡化用戶界面的事件驅(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í)，檢測學(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é)合“社會(huì)主義核心價(jià)值觀網(wǎng)頁”任務(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ā)工具：HbuilderX。2.教師根據(jù)課件，介紹開發(fā)工具和調(diào)試工具的安裝與使用，并結(jié)合安裝與使用的演示進(jìn)行講解。3.Vue.js的引入方式和Vue2、Vue3的框架結(jié)構(gòu)。4.教師根據(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)思路使用HbuilderX創(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í)，檢測學(xué)生的掌握程度，并對(duì)學(xué)生出現(xiàn)的問題進(jìn)行解決。3.使用在線學(xué)習(xí)平臺(tái)下發(fā)課后作業(yè)。作業(yè)布置見教材第1章配套的習(xí)題教學(xué)反思

XXXX職業(yè)學(xué)院教學(xué)單元教案主題項(xiàng)目二-實(shí)現(xiàn)簡易數(shù)字易計(jì)數(shù)器序號(hào)2課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論□實(shí)訓(xùn)■一體化□（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue實(shí)例；2.能掌握Vue的數(shù)據(jù)綁定；3.掌握Vue的事件監(jiān)聽。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue實(shí)例的創(chuàng)建方法；4.掌握插值表達(dá)式的基本使用；5.掌握模板語法的基本使用。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用。教學(xué)難點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用教學(xué)過程設(shè)計(jì)備注一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、教師通過直接導(dǎo)入的方式導(dǎo)入新課開發(fā)環(huán)境介紹完畢以后，我們就可以小試牛刀了，使用Vue.js框架，實(shí)現(xiàn)一個(gè)簡單的計(jì)數(shù)器，實(shí)現(xiàn)點(diǎn)擊加1或減1操作。新課講解知識(shí)點(diǎn)1-DOM基礎(chǔ)知識(shí)DOM，全稱為DocumentObjectModel，即文檔對(duì)象模型。它是一個(gè)用于表示和交互網(wǎng)頁中的文檔結(jié)構(gòu)的編程接口，由萬維網(wǎng)聯(lián)盟（W3C）制定。DOM將網(wǎng)頁文檔視為一個(gè)由節(jié)點(diǎn)組成的樹狀結(jié)構(gòu)，每個(gè)節(jié)點(diǎn)都代表文檔中的一個(gè)元素、屬性、文本或注釋等。這些節(jié)點(diǎn)之間存在層級(jí)關(guān)系，形成一個(gè)層次結(jié)構(gòu)。通過DOM，開發(fā)者可以使用編程語言（如JavaScript）來訪問、操作、修改網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。例如，開發(fā)者可以獲取元素、修改元素、添加和刪除元素，以及處理事件等。DOM提供了對(duì)網(wǎng)頁內(nèi)容的編程訪問，使得開發(fā)者可以在客戶端實(shí)現(xiàn)豐富的用戶交互和動(dòng)態(tài)效果，提升用戶體驗(yàn)。HTMLDOM模型被結(jié)構(gòu)化為對(duì)象樹，對(duì)象的HTMLDOM樹為如圖所示。知識(shí)點(diǎn)2-Vue的模板語法之插值表達(dá)式插值表達(dá)式是一種用于模板引擎中的表達(dá)式，它可以方便地將數(shù)據(jù)與頁面內(nèi)容綁定起來，使得頁面展現(xiàn)更具動(dòng)態(tài)性。通常情況下，插值表達(dá)式會(huì)被包含在特定的標(biāo)記中，例如{{}}，表示將表達(dá)式的結(jié)果插入到標(biāo)記所在的位置。Vue模板語法有2大類。（1）Vue的插值\t"/weixin_46841213/article/details/_blank"表達(dá)式{{}}功能:用于解析標(biāo)簽體內(nèi)容。寫法:{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性。（2）指令語法Vue總共提供了14個(gè)指令自定義指令，Vue提供了每一個(gè)指令都有特殊的作用，它們可以應(yīng)用于模板中的元素，并且指定Vue如何處理DOM。Vue指令實(shí)質(zhì)上就是html標(biāo)簽特殊的屬性，Vue給html標(biāo)簽增加了一些自定義的屬性，這些屬性都是以v-開頭都叫vue的指令。Vue指令的主要功能總結(jié)為一句話就是用于解析標(biāo)簽(包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件等）。本節(jié)中，我們主要來學(xué)習(xí)一下Vue的插值表達(dá)式{{}}。實(shí)際上，插值表達(dá)式的主要作用是進(jìn)行數(shù)據(jù)綁定，最常見的形式是使用雙大括號(hào)的文本插值。例如：Message:{{msg}}標(biāo)簽將會(huì)被替代為對(duì)應(yīng)數(shù)據(jù)對(duì)象上msg屬性（msg定義在data對(duì)象中）的值。無論何時(shí)，綁定的數(shù)據(jù)對(duì)象上msg屬性發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。{{}}對(duì)JavaScript表達(dá)式支持，例如：01<divid="app">02<h2>插值語法</h2>03<h4>你好，{{msg}}</h4>04</div>05<script>06const{createApp}=Vue07createApp({08data(){09return{10msg:'Helloworld'11}12}13}).mount('#app')14</script>JavaScript表達(dá)式總會(huì)返回一個(gè)值，而插值的意思就是把JavaScript表達(dá)式返回的結(jié)果插入到{{}}所在的位置。簡單來說，插值的時(shí)候總需要吧一個(gè)值插入到模板中的大括號(hào)的位置，所以雙大括號(hào)內(nèi)容需要數(shù)據(jù)JavaScrpit代碼來返回一個(gè)值。vue可以通過data提供數(shù)據(jù)。data必須是一個(gè)函數(shù)，并且返回一個(gè)對(duì)象，這個(gè)對(duì)象就代表vue提供的數(shù)據(jù)。data屬性是Vue實(shí)例的一個(gè)選項(xiàng)，用于存儲(chǔ)該Vue實(shí)例的響應(yīng)式數(shù)據(jù)。Vue會(huì)自動(dòng)追蹤這些數(shù)據(jù)的變化，并在數(shù)據(jù)變化時(shí)更新DOM。在Vue組件中，data必須是一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)對(duì)象，對(duì)象中包含了所有需要在組件中使用的響應(yīng)式數(shù)據(jù)。這樣做是為了確保每個(gè)組件實(shí)例都可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，避免多個(gè)實(shí)例之間共享同一個(gè)數(shù)據(jù)對(duì)象。01<script>02 exportdefault{03 data(){04 return{05 money:100，06 msg:'hello'，07constobj={name:'張三',，age:25，};07 }08 } 09 } 10 </script>使用{{}}顯示數(shù)據(jù)。01<template>02 <divclass="app">03 <div>{{money}}</div>04 <div>{{msg}}</div>05 <div>{{}}</div>06 <div>{{msg.toUpperCase()}}</div>07 <div>{{obj.age>18?'成年'：'未成年'}}</div>08 </div> 09</template>01行定義頁面模版部分；2行定義類名為app的容器；3行定義的div容器中顯示變量money的內(nèi)容；4行定義的div容器顯示變量msg的內(nèi)容；5行在div容器中顯示對(duì)象obj的name屬性；6行在div容器中顯示變量msg全部轉(zhuǎn)為大寫的結(jié)果；7行在div容器中使用三元表達(dá)式顯示對(duì)象obj的age屬性值。四、上機(jī)練習(xí)布置上機(jī)任務(wù)，上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。第二課時(shí)一、回顧上節(jié)課內(nèi)容二、明確本節(jié)課的任務(wù)三、進(jìn)行重點(diǎn)知識(shí)的講解1.Vue3的引入和使用來看一個(gè)具體的例子：1)首先，我們創(chuàng)建一個(gè).html文件，用于交互。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title></title>06 </head>07 <body>08 </body>09</html>（2）接著我們引入Vue3的相關(guān)包，這里引入的方式和之前JavaScript中介紹的引入的方式一樣，直接在head部分進(jìn)行引入即可。<!--引入Vue3--> <scriptsrc="/vue@next"></script>注意：/vue@next所代表的網(wǎng)站可能失效，也可以使用/vue@3.4.20/dist/vue.global.js，當(dāng)然也可以將改網(wǎng)址內(nèi)容下載到本地，進(jìn)行本地引入也是可以的。如將上面網(wǎng)址的內(nèi)容下載到本地，保存到本地后，也可以使用<scriptsrc="vue.global.js"></script>引入，當(dāng)然要求此js文件和網(wǎng)頁需要在一個(gè)目錄下。（3）然后就是在body標(biāo)簽中添加模板用于將數(shù)據(jù)渲染到DOM的系統(tǒng)。01constapp={02 data(){03 return{04 message:'HelloWorld!'05 }06 }07 }08 Vue.createApp(app).mount('#app')Vue.createApp(app)表示創(chuàng)建Vue實(shí)例。Vue.createApp(app).mount(“#app)表示id為app的容器。(4)最后得到我們的完整文件如下。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>Vue3入門實(shí)例</title>06 <!--引入Vue3-->07 <scriptsrc="/vue@3.4.20/dist/vue.global.js"></script>08 </head>09 <body>10 <divid="app">11 {{message}}12 </div>13 <script>14 constapp={15 data(){16 return{17 message:'HelloWorld!'18 }19 }20 }21 Vue.createApp(app).mount('#app') 22 </script>23 </body>24</html>（4）將文件用瀏覽器打開，在頁面中應(yīng)該就會(huì)顯示如下信息了，運(yùn)行結(jié)果如圖所示意。四、上機(jī)練習(xí)上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。五、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，對(duì)學(xué)生出現(xiàn)的共性問題，予以重點(diǎn)強(qiáng)調(diào)和講解。六、布置作業(yè)教師通過高校教輔平臺(tái)（/）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。作業(yè)布置教材項(xiàng)目一配套的習(xí)題教學(xué)反思通過網(wǎng)絡(luò)查閱相關(guān)資料，培養(yǎng)學(xué)生查閱相關(guān)知識(shí)的能力。

XXXX職業(yè)學(xué)院教學(xué)單元教案主題項(xiàng)目二-實(shí)現(xiàn)簡易數(shù)字易計(jì)數(shù)器序號(hào)3課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論□實(shí)訓(xùn)■一體化□（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue實(shí)例；2.能掌握Vue的數(shù)據(jù)綁定；3.掌握Vue的事件監(jiān)聽。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue實(shí)例的創(chuàng)建方法；4.掌握插值表達(dá)式的基本使用；5.掌握模板語法的基本使用。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用。教學(xué)難點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用教學(xué)過程設(shè)計(jì)備注一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、教師通過直接導(dǎo)入的方式導(dǎo)入新課開發(fā)環(huán)境介紹完畢以后，我們就可以小試牛刀了，使用Vue.js框架，實(shí)現(xiàn)一個(gè)簡單的計(jì)數(shù)器，實(shí)現(xiàn)點(diǎn)擊加1或減1操作。新課講解知識(shí)點(diǎn)1-Vue的模板語法之指令語法1Vue中的模板語法中的指令語法。什么是指令呢？Vue指令實(shí)際上就是專門在HTML中也能實(shí)現(xiàn)分支、循環(huán)等程序功能的特殊的自定義屬性。DOM元素的行間屬性，Vue提供了內(nèi)置的指令，必須以v-開頭，后面的值均為變量。常用的指令語法一共有14各，他們分別是Vue提供的14個(gè)指令v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-\t"/shixiaoxiao106/article/details/_blank"model、v-slot、v-pre、v-cloak、v-once等。（1）指令v-textv-text的作用是在容器標(biāo)簽內(nèi)控制字符串內(nèi)容的輸出，v-text輸出純文本。如果是純文本輸出，那么輸出的字符串結(jié)果和插值輸出一樣的?？匆粋€(gè)例子：01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>v-text</title>06 <!--引入Vue3-->07 <scriptsrc="vue.global.js"></script>08 </head>09 <body>10 <divid="app"class="demo">11 <p>使用雙大括號(hào)的文本插值：{{rawHtml}}</p>12 <p>使用v-text：<spanv-text="rawHtml"></span></p>13 </div>14 <script>15 constApp={16 data(){17 return{18 rawHtml:'<spanstyle="color:red">這里會(huì)顯示成紅色</span>'19 }20 }21 }22 Vue.createApp(App).mount("#app")23 </script>24 </body>25</html>7行引入vue；10行定義id等于app的div容器（dom節(jié)點(diǎn)）；11~12行使用了文本插值；15行定義實(shí)例對(duì)象；16~19行定義data屬性，定義變量rawHtml的值；22行將app節(jié)點(diǎn)掛載到App實(shí)例上。運(yùn)行程序，結(jié)果如圖所示。這里，v-text和插值法都是將定義的字符串變量進(jìn)行了原樣輸出。實(shí)際上，我們這里給出的網(wǎng)頁的代碼，如果要使得網(wǎng)頁中的代碼起作用，就要使用v-html指令。（2）v-html指令v-html指令可以輸出解析后的文本，請(qǐng)看下面的例子。01<!DOCTYPEhtml>02<html>03 <head>04 <metacharset="utf-8">05 <title>v-text</title>06 <!--引入Vue3-->07 <scriptsrc="vue.global.js"></script>08 </head>09 <body>10 <divid="app"class="demo">11 <p>使用雙大括號(hào)的文本插值：{{rawHtml}}</p> 12 <p>使用v-text：<spanv-text="rawHtml"></span></p>13 <p>使用v-html：<spanv-html="rawHtml"></span></p>14 </div>15 <script>16 constApp={17 data(){18 return{19 rawHtml:'<spanstyle="color:red">這里會(huì)顯示成紅色</span>'20 }21 }22 }23 Vue.createApp(App).mount("#app")24 </script>25 </body>26</html>7行引入vue；10行定義id等于app的div容器（dom節(jié)點(diǎn)）；11行使用了文本插值；12行使用v-text將字符串變量進(jìn)行原樣暑促；13行使用v-html將字符串變量解析后進(jìn)行輸出，16~22行表示實(shí)例化app變量；17行定義data屬性，定義變量rawHtml的值；22行將app節(jié)點(diǎn)掛載到App實(shí)例上。運(yùn)行結(jié)果如圖2-6：圖2-6v-html輸出解析后的文本的運(yùn)行結(jié)果（3）v-show指令Vue中非常常用的兩個(gè)條件指令—v-show和v-if。v-show指令是根據(jù)條件顯示DOM元素的指令，可以用來動(dòng)態(tài)控制DOM元素的顯示和隱藏。v-show后面跟的是判斷條件，不管初始條件是什么，元素總是會(huì)被渲染。語法：v-show="判斷變量"當(dāng)v-show值為false時(shí)，給對(duì)應(yīng)DOM添加display:none屬性；當(dāng)v-show值為true時(shí)，綁定DOM會(huì)移除display:none，此時(shí)并不是把display變?yōu)閎lock，而是保持元素style的原始性，也就是說，不管初始條件是什么，元素總是會(huì)被渲染。從實(shí)現(xiàn)效果可以看出DOM元素始終是存在的，v-show只是利用元素的display屬性控制著元素的顯示隱藏。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-show指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-show="flag2">v-show的使用true顯示</p> 11 <pv-show="flag1">v-show的使用false不顯示</p>12</div>13</body>14<script>15 constApp={16 data(){17 return{18 flag1:false，19 flag2:true，20 }21 }22 }23 Vue.createApp(App).mount("#app")24</script>25</html>6行引入uve.global.js；9行定義id為app的容器；10行在p標(biāo)簽中使用v-show顯示或隱藏元素，此時(shí)v-show的值實(shí)際為true，故應(yīng)該顯示p標(biāo)簽中的內(nèi)容；11行在p標(biāo)簽中使用v-show顯示或隱藏元素，此時(shí)v-show的值實(shí)際為false，故此時(shí)沒有內(nèi)容顯示；15行實(shí)例化App對(duì)象；16~19行定義data屬性，定義變量flag1和flag2；23行將app節(jié)點(diǎn)掛載到App實(shí)例上。運(yùn)行結(jié)果如圖：四、上機(jī)練習(xí)布置上機(jī)任務(wù)，上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。第二課時(shí)一、回顧上節(jié)課內(nèi)容二、明確本節(jié)課的任務(wù)三、進(jìn)行重點(diǎn)知識(shí)的講解1.v-if指令和事件綁定指令v-on看到v-if，我們可以想到if…else條件判斷語句，沒錯(cuò)，Vue中還提供了v-else指令和v-else-if指令，學(xué)會(huì)v-if指令其他兩個(gè)指令也就會(huì)了。這樣我們?cè)賮砝斫鈜-if指令，就是根據(jù)表達(dá)式值的真假來銷毀或者重建一個(gè)我們綁定的DOM元素。當(dāng)條件為假的時(shí)候，DOM元素被刪除，條件為真的時(shí)候，就重建一個(gè)綁定的DOM元素。首先看一個(gè)最直觀的例子：01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-if=true>您考了{(lán){score}}</p> <!--true會(huì)直接顯示--> 11 <pv-if=false>您考了{(lán){score}}</p> <!--false不會(huì)渲染和顯示-->12</div>13</body>14<script>15 constApp={16 data(){17 return{18 score:95 19 }20 }21 }22 Vue.createApp(App).mount("#app")23</script>24</html>這個(gè)例子中，定義了變量score等于整數(shù)95，然后使用v-if直接給定true和false條件，那么這里第一個(gè)p標(biāo)簽會(huì)顯示，第2個(gè)p標(biāo)簽不會(huì)顯示的。v-if是作為判斷語句之用，v-else則是和v-if一起出現(xiàn)，當(dāng)v-if判斷為true時(shí)，v-else不執(zhí)行；當(dāng)v-if判斷為false時(shí)，v-else才執(zhí)行，這里給出一個(gè)例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if-else指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <h2v-if="isShow">11 {{message}}12 </h2>13 <h1v-else>這里v-if為false時(shí)顯示</h1>14</div>15</body>16<script>17 constApp={18 data(){19 return{20 isShow:false，21 message:'HelloWorld!'22 }23 }24 }25 Vue.createApp(App).mount("#app")26</script>27</html>在上面的例子中，變量isShow的值為false，那么當(dāng)v-if對(duì)isShow代表的條件進(jìn)行判斷的時(shí)候，此時(shí)v-if代表的h2標(biāo)題不會(huì)被執(zhí)行，而下面的h1標(biāo)題會(huì)被執(zhí)行。上面例子的運(yùn)行如圖所示。接下來，我們對(duì)比下v-if和v-show的異同。v-if和v-show看起來似乎差不多，當(dāng)條件不成立時(shí)，其所對(duì)應(yīng)的標(biāo)簽元素都不可見，但是這兩個(gè)選項(xiàng)是有區(qū)別的:（1）v-if在條件切換時(shí)，會(huì)對(duì)標(biāo)簽進(jìn)行適當(dāng)?shù)膭?chuàng)建和銷毀，而v-show則僅在初始化時(shí)加載一次，因此v-if的開銷相對(duì)來說會(huì)比v-show大。（2）v-if是惰性的，只有當(dāng)條件為真時(shí)才會(huì)真正渲染標(biāo)簽；如果初始條件不為真，則v-if不會(huì)去渲染標(biāo)簽。v-show則無論初始條件是否成立，都會(huì)渲染標(biāo)簽，它僅僅做的只是簡單的CSS（display）切換。使用場景:（1）v-if適用于不需要頻繁切換元素顯示和隱藏的情況。（2）v-show適用于需要頻繁切換元素的顯示和隱藏的場景。我們?cè)賮斫榻B一下v-else-if指令的使用。v-else-if會(huì)在多個(gè)判斷語句時(shí)使用到，但不常用。v-else-if：充當(dāng)v-if的“else-if塊”，可以連續(xù)多次使用，我們通過一個(gè)具體的例子來加以說明。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if-else指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <pv-if="grade==='A'">11 A12 </p>13 <pv-else-if="grade==='B'">14 B15 </p>16 <pv-else-if="grade==='C'">17 C18 </p>19 <pv-else>20 NotA/B/C21 </p>22 </div>23</body>24<script>25 constApp={26 data(){27 return{28 grade:'C'，29 message:'HelloWorld!'30 }31 }32 }33 Vue.createApp(App).mount("#app")34</script>35</html>上面的例子中，變量grade的值給成了字符C，13~14行判斷grade的值等于字符A，顯然此時(shí)不會(huì)輸出A；15~16行判斷grade的值是否等于字符B，顯然此時(shí)的條件也是不滿足的；17~18行判斷grade的值是否等于字符C，此時(shí)條件滿足，會(huì)輸出字符。運(yùn)行程序，結(jié)果如圖所示。（5）事件綁定指令v-onVue提供了v-on事件綁定指令，用來輔助程序員為DOM元素綁定事件監(jiān)聽，原生的DOM對(duì)象有onclick、oninput等原生事件，在vue中為v-on:click、v-on:input等。v-on簡寫為@，看一個(gè)簡單的例子。01<!DOCTYPEhtml>02<htmllang="en">03<head>04<metacharset="UTF-8">05<metaname="viewport"content="width=device-width，initial-scale=1.0">06<title>v-on的使用</title>07</head>08<body>09<divid="app">10<inputtype="button"value="點(diǎn)擊"v-on:click="add">11</div>12<scriptsrc="/npm/vue@2/dist/vue.js"></script>13<script>14constvm=newVue({15el:"#app"，16data:{17tips:"請(qǐng)輸入..."18}，19methods:{20 //聲明方法121//add:function(){22//alert('11111')23//}24//或25//聲明方法226add(){27alert('點(diǎn)擊了')28}29}30})31</script>32</body>33</html>9~11行定義id等于app的容器，在該容器中放置了input標(biāo)簽，并使用v-on方法設(shè)置了點(diǎn)擊事件，關(guān)聯(lián)到了函數(shù)add；12行引入VUE；13~14行在<script>標(biāo)簽內(nèi)部，通過newVue({...})創(chuàng)建了一個(gè)新的Vue實(shí)例。這個(gè)實(shí)例是Vue應(yīng)用的核心，它管理著應(yīng)用的數(shù)據(jù)和邏輯；15~18行指定了這個(gè)Vue實(shí)例將要掛載（管理）的DOM元素。這里的#app是一個(gè)ID選擇器，意味著Vue實(shí)例將會(huì)接管ID為app的DOM元素（通常是一個(gè)<div>元素），并管理其內(nèi)部的DOM，定義了Vue實(shí)例的數(shù)據(jù)對(duì)象。在這個(gè)對(duì)象中，我們定義了一個(gè)名為tips的屬性，其初始值為“請(qǐng)輸入..”。這個(gè)數(shù)據(jù)是響應(yīng)式的，意味著Vue會(huì)追蹤它的變化，并在數(shù)據(jù)更新時(shí)重新渲染DOM；19~29行定義了定義了一組可以在Vue實(shí)例中調(diào)用的方法。在這個(gè)例子中，定義了一個(gè)名為add的方法。methods屬性是Vue實(shí)例的另一個(gè)選項(xiàng)，它包含了Vue實(shí)例上所有的方法。這些方法可以在模板中通過表達(dá)式調(diào)用，或者在Vue實(shí)例的生命周期鉤子中調(diào)用。methods中的方法可以直接訪問data中的數(shù)據(jù)，并且可以執(zhí)行一些邏輯操作，如更新數(shù)據(jù)、處理用戶輸入等。注意，這里使用的Vue2的語法。運(yùn)行程序，結(jié)果如圖所示。求計(jì)數(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ì)代碼的熟練程度。五、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，對(duì)學(xué)生出現(xiàn)的共性問題，予以重點(diǎn)強(qiáng)調(diào)和講解。六、布置作業(yè)教師通過高校教輔平臺(tái)（/）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。作業(yè)布置教材項(xiàng)目一配套的習(xí)題教學(xué)反思通過網(wǎng)絡(luò)查閱相關(guān)資料，培養(yǎng)學(xué)生查閱相關(guān)知識(shí)的能力。

XXXX職業(yè)學(xué)院教學(xué)單元教案主題項(xiàng)目二-實(shí)現(xiàn)簡易購物車序號(hào)4課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論□實(shí)訓(xùn)■一體化□（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue實(shí)例；2.能掌握Vue的數(shù)據(jù)綁定；3.掌握Vue的事件監(jiān)聽。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue實(shí)例的創(chuàng)建方法；4.掌握插值表達(dá)式的基本使用；5.掌握模板語法的基本使用。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用。教學(xué)難點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用教學(xué)過程設(shè)計(jì)備注一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、教師通過直接導(dǎo)入的方式導(dǎo)入新課介紹了v-show、v-if、v-on等指令后，我們介紹了一個(gè)簡單的計(jì)數(shù)器的實(shí)現(xiàn)，今天再實(shí)現(xiàn)計(jì)數(shù)器的基礎(chǔ)上，來實(shí)現(xiàn)一個(gè)簡易購物車。新課講解Vue的模板語法之指令語法21）屬性綁定指令v-bind該指令的主要作用是為元素綁定屬性，完整寫法是v-bind:屬性名，簡寫的話可以直接省略v-bind，只保留:屬性名。注意：class屬性、style屬性、value屬性、href屬性，只要是屬性都可以綁定，可以綁定標(biāo)簽的任意屬性，甚至標(biāo)簽的自定義屬性也可以使用v-bind指令進(jìn)行綁定。首先看一個(gè)綁定圖片的例子。下面通過綁定的img的src，以及a標(biāo)簽的href屬性分別來演示v-bind的使用，下面通過一個(gè)具體的例子看看動(dòng)態(tài)綁定圖片的路徑是如何完成的。01<imgv-bind:src=”src”/>02<script>03constapp=Vue.create){04data:{05src:”1.jpg”06}07}08)09</script>具體實(shí)現(xiàn)的代碼如下：01

<scriptsrc="/vue@next"></script>

02

<divid="app"><imgv-bind:src="img"v-bind:alt="alt"></div>03<script>04constapp=Vue.createApp({05

data(){06

return{07

img:'/upload/image/20220720/6379395006328697315230168.jpg'，08

alt:'這是第一個(gè)圖片'09

}10

}，11})12app.mount('#app')13</script>

運(yùn)行結(jié)果如圖所示。可以增加一個(gè)按鈕來實(shí)現(xiàn)圖片的切換，在id="app"的div中，增加如下代碼：上面代碼為button綁定一個(gè)handle事件函數(shù)。下面的代碼具體給出了handle函數(shù)，在該函數(shù)中，實(shí)現(xiàn)了對(duì)img屬性的重新賦值。V-bind有簡化寫法：<img:src=”img”alt=””>（2）雙向數(shù)據(jù)綁定指令v-modev-mode指令在表單元素商可以創(chuàng)建雙向數(shù)據(jù)綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。什么是雙向數(shù)據(jù)綁定呢？數(shù)據(jù)可以更新到視圖，通過視圖可以更改數(shù)據(jù)。下面通過一個(gè)具體例子來說明。01

<scriptsrc="/vue@next"></script>

02

<divid="app">03

<inputtype="text"v-model="value">04

</br>05

{{value}}06

</div>07

<script>08

constapp=Vue.createApp({9

data(){10

return{11

value:''12

}13

}，1415

})16

constvm=app.mount('#app')17

</script>運(yùn)行結(jié)果如圖所示。在文本框中輸入數(shù)據(jù)，可以通過插值方法立即能夠獲取到，這就是當(dāng)數(shù)據(jù)更新時(shí)，視圖也發(fā)生了變化。按下google瀏覽器的F12，進(jìn)入開發(fā)者模式，選擇Console，在如圖所示的地方，輸入“vm.value”然后回車，可以獲取到剛剛在文本框輸入的值。可以直接給vm.value進(jìn)行賦值，令vm.value="zhangsan"，輸入命令后進(jìn)行回車，觀察網(wǎng)頁的變化，如圖所示。這就是所謂的通過視圖可以更改數(shù)據(jù)。四、上機(jī)練習(xí)布置上機(jī)任務(wù)，上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。第二課時(shí)一、回顧上節(jié)課內(nèi)容二、明確本節(jié)課的任務(wù)三、進(jìn)行重點(diǎn)知識(shí)的講解（3）數(shù)據(jù)遍歷v-for指令v-for可以實(shí)現(xiàn)頁面列表渲染，常用來循環(huán)數(shù)組、對(duì)象、字符串、數(shù)字等。v-for指令需要使用iteminitems形式的特殊語法，其中items是源數(shù)據(jù)數(shù)組，而item則是被迭代的數(shù)組元素的別名。下面我們來看一個(gè)實(shí)際例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <!--1.對(duì)列表的循環(huán)-->11 <h3>列表的循環(huán)</h3>12 <h4v-for="iindata1">{{i}}</h4>13 <!--2.對(duì)對(duì)象的循環(huán)-->14 <h3>對(duì)象帶kv的循環(huán)</h3>15 <span>key變量放后面，value變量放前面</span>16 <h4v-for="(val，key)indata2">key是：{{key}}，value是：{{val}}</h4>17 <!--3.對(duì)字符串的循環(huán)-->18 <h4v-for="iindata3">{{i}}</h4>19 <h3>字符串的循環(huán)，帶索引</h3>20 <h4v-for="(i，index)indata3">索引{{index}}的字符是{{i}}</h4>21 <!--4.對(duì)數(shù)字的循環(huán)，變量是5，相當(dāng)于1...5-->22 <h4v-for="iindata4">{{i}}</h4>23 <h3>循環(huán)數(shù)字，帶索引</h3>24 <h4v-for="(i，index)indata4">索引{{index}}的數(shù)字{{i}}</h4>25</div>26</body>27<script>28 constApp={29 data(){30 return{31 data1:[1，2，3]，32 data2:{name:'jack'，age:18}，33 data3:'helloworld'，34 data4:5 35 }36 }37 }38 Vue.createApp(App).mount("#app")39</script>40</html>運(yùn)行程序，結(jié)果如圖所示。四、上機(jī)練習(xí)上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。五、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，對(duì)學(xué)生出現(xiàn)的共性問題，予以重點(diǎn)強(qiáng)調(diào)和講解。六、布置作業(yè)教師通過高校教輔平臺(tái)（/）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。作業(yè)布置教材項(xiàng)目一配套的習(xí)題教學(xué)反思通過網(wǎng)絡(luò)查閱相關(guān)資料，培養(yǎng)學(xué)生查閱相關(guān)知識(shí)的能力。

XXXX職業(yè)學(xué)院教學(xué)單元教案主題項(xiàng)目二-實(shí)現(xiàn)簡易購物車序號(hào)5課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論□實(shí)訓(xùn)■一體化□（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue實(shí)例；2.能掌握Vue的數(shù)據(jù)綁定；3.掌握Vue的事件監(jiān)聽。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue實(shí)例的創(chuàng)建方法；4.掌握插值表達(dá)式的基本使用；5.掌握模板語法的基本使用。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用。教學(xué)難點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用教學(xué)過程設(shè)計(jì)備注一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、教師通過直接導(dǎo)入的方式導(dǎo)入新課一個(gè)簡易購物車。新課講解1.Vue的模板語法之指令語法21）屬性綁定指令v-bind該指令的主要作用是為元素綁定屬性，完整寫法是v-bind:屬性名，簡寫的話可以直接省略v-bind，只保留:屬性名。注意：class屬性、style屬性、value屬性、href屬性，只要是屬性都可以綁定，可以綁定標(biāo)簽的任意屬性，甚至標(biāo)簽的自定義屬性也可以使用v-bind指令進(jìn)行綁定。首先看一個(gè)綁定圖片的例子。下面通過綁定的img的src，以及a標(biāo)簽的href屬性分別來演示v-bind的使用，下面通過一個(gè)具體的例子看看動(dòng)態(tài)綁定圖片的路徑是如何完成的。01<imgv-bind:src=”src”/>02<script>03constapp=Vue.create){04data:{05src:”1.jpg”06}07}08)09</script>具體實(shí)現(xiàn)的代碼如下：01

<scriptsrc="/vue@next"></script>

02

<divid="app"><imgv-bind:src="img"v-bind:alt="alt"></div>03<script>04constapp=Vue.createApp({05

data(){06

return{07

img:'/upload/image/20220720/6379395006328697315230168.jpg'，08

alt:'這是第一個(gè)圖片'09

}10

}，11})12app.mount('#app')13</script>

運(yùn)行結(jié)果如圖所示?？梢栽黾右粋€(gè)按鈕來實(shí)現(xiàn)圖片的切換，在id="app"的div中，增加如下代碼：上面代碼為button綁定一個(gè)handle事件函數(shù)。下面的代碼具體給出了handle函數(shù)，在該函數(shù)中，實(shí)現(xiàn)了對(duì)img屬性的重新賦值。V-bind有簡化寫法：<img:src=”img”alt=””>（2）雙向數(shù)據(jù)綁定指令v-modev-mode指令在表單元素商可以創(chuàng)建雙向數(shù)據(jù)綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。什么是雙向數(shù)據(jù)綁定呢？數(shù)據(jù)可以更新到視圖，通過視圖可以更改數(shù)據(jù)。下面通過一個(gè)具體例子來說明。01

<scriptsrc="/vue@next"></script>

02

<divid="app">03

<inputtype="text"v-model="value">04

</br>05

{{value}}06

</div>07

<script>08

constapp=Vue.createApp({9

data(){10

return{11

value:''12

}13

}，1415

})16

constvm=app.mount('#app')17

</script>運(yùn)行結(jié)果如圖所示。在文本框中輸入數(shù)據(jù)，可以通過插值方法立即能夠獲取到，這就是當(dāng)數(shù)據(jù)更新時(shí)，視圖也發(fā)生了變化。按下google瀏覽器的F12，進(jìn)入開發(fā)者模式，選擇Console，在如圖所示的地方，輸入“vm.value”然后回車，可以獲取到剛剛在文本框輸入的值?？梢灾苯咏ovm.value進(jìn)行賦值，令vm.value="zhangsan"，輸入命令后進(jìn)行回車，觀察網(wǎng)頁的變化，如圖所示。這就是所謂的通過視圖可以更改數(shù)據(jù)。四、上機(jī)練習(xí)布置上機(jī)任務(wù)，上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。第二課時(shí)一、回顧上節(jié)課內(nèi)容二、明確本節(jié)課的任務(wù)三、進(jìn)行重點(diǎn)知識(shí)的講解1.數(shù)據(jù)遍歷v-for指令v-for可以實(shí)現(xiàn)頁面列表渲染，常用來循環(huán)數(shù)組、對(duì)象、字符串、數(shù)字等。v-for指令需要使用iteminitems形式的特殊語法，其中items是源數(shù)據(jù)數(shù)組，而item則是被迭代的數(shù)組元素的別名。下面我們來看一個(gè)實(shí)際例子。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>v-if指令</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <!--1.對(duì)列表的循環(huán)-->11 <h3>列表的循環(huán)</h3>12 <h4v-for="iindata1">{{i}}</h4>13 <!--2.對(duì)對(duì)象的循環(huán)-->14 <h3>對(duì)象帶kv的循環(huán)</h3>15 <span>key變量放后面，value變量放前面</span>16 <h4v-for="(val，key)indata2">key是：{{key}}，value是：{{val}}</h4>17 <!--3.對(duì)字符串的循環(huán)-->18 <h4v-for="iindata3">{{i}}</h4>19 <h3>字符串的循環(huán)，帶索引</h3>20 <h4v-for="(i，index)indata3">索引{{index}}的字符是{{i}}</h4>21 <!--4.對(duì)數(shù)字的循環(huán)，變量是5，相當(dāng)于1...5-->22 <h4v-for="iindata4">{{i}}</h4>23 <h3>循環(huán)數(shù)字，帶索引</h3>24 <h4v-for="(i，index)indata4">索引{{index}}的數(shù)字{{i}}</h4>25</div>26</body>27<script>28 constApp={29 data(){30 return{31 data1:[1，2，3]，32 data2:{name:'jack'，age:18}，33 data3:'helloworld'，34 data4:5 35 }36 }37 }38 Vue.createApp(App).mount("#app")39</script>40</html>運(yùn)行程序，結(jié)果如圖所示。2.監(jiān)聽屬性監(jiān)聽屬性(watch)是用來監(jiān)聽data中的數(shù)據(jù)是否發(fā)生變化，一般是監(jiān)聽data中的某個(gè)屬性。watch中可以執(zhí)行任何邏輯，如函數(shù)節(jié)流，Ajax異步獲取數(shù)據(jù)，甚至操作DOM。下面看一個(gè)案例。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>監(jiān)聽屬性</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app"> 10 用戶名：<inputtype="text"v-model="username"><br>11 {{username}}<br>12 年齡：<inputtype="text"v-model="age"><br>13 {{age}}<br> 14</div>15</body>16<script> 17 constapp=Vue.createApp({18 data(){19 return{20 username:'許'，21 age:'多多' 22 } 23 }， 24 watch:{25 //監(jiān)聽userName的變化26 //有兩個(gè)參數(shù)，newValue表示變化后的值，oldValue表示變化前的值27 username:function(newValue，oldValue){28 console.log('修改前的值：'+oldValue);29 console.log('修改后的值：'+newValue);30 }，31 //監(jiān)聽age的變化32 age:function(newValue，oldValue){33 console.log('修改前的值：'+oldValue);34 console.log('修改后的值：'+newValue);35 }36 }，37 })38 app.mount('#app')39</script> 40</html>06行引入vue；09行定義id為app的容器；10行放置文本輸入框并和username進(jìn)行雙向數(shù)據(jù)綁定；11行使用插值表達(dá)式顯示變量username的值；12行放置文本輸入框并和變量age進(jìn)行雙向數(shù)據(jù)綁定；13行使用插值表達(dá)式顯示變量age的值；17行創(chuàng)建vue實(shí)例；18~23行定義data屬性，定義變量username和age的值；24~37行設(shè)置監(jiān)聽屬性；27行設(shè)置對(duì)變量username監(jiān)聽，newValue表示變化后的值，oldValue表示變化前的值；28~29行輸出newValue和oldValue的值；32行設(shè)置對(duì)變量age的監(jiān)聽，33~34行打印輸出修改前的值和修改后的值。 運(yùn)行程序，結(jié)果如圖2-18所示。四、上機(jī)練習(xí)上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對(duì)知識(shí)點(diǎn)的掌握情況，對(duì)代碼的熟練程度。五、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，對(duì)學(xué)生出現(xiàn)的共性問題，予以重點(diǎn)強(qiáng)調(diào)和講解。六、布置作業(yè)教師通過高校教輔平臺(tái)（/）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。作業(yè)布置教材項(xiàng)目一配套的習(xí)題教學(xué)反思通過網(wǎng)絡(luò)查閱相關(guān)資料，培養(yǎng)學(xué)生查閱相關(guān)知識(shí)的能力。

XXXX職業(yè)學(xué)院教學(xué)單元教案主題項(xiàng)目二-實(shí)現(xiàn)簡易購物車序號(hào)6課時(shí)2教學(xué)手段板書、多媒體教學(xué)方法講授、討論教學(xué)課型￡理論□實(shí)訓(xùn)■一體化□（其它）教學(xué)目標(biāo)能力目標(biāo)：1.能掌握Vue實(shí)例；2.能掌握Vue的數(shù)據(jù)綁定；3.掌握Vue的事件監(jiān)聽。知識(shí)目標(biāo)：1.了解網(wǎng)頁DOM的樹形結(jié)構(gòu)；2.了解Vue引入方式；3.掌握Vue實(shí)例的創(chuàng)建方法；4.掌握插值表達(dá)式的基本使用；5.掌握模板語法的基本使用。素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生按標(biāo)準(zhǔn)做事的習(xí)慣；2.培養(yǎng)學(xué)生獨(dú)立完成任務(wù)的品格素質(zhì)、技能素質(zhì)以及綜合素質(zhì)；3.培養(yǎng)學(xué)生能夠找到適合自己的學(xué)習(xí)方法并正確運(yùn)用；4.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。教學(xué)重點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用。教學(xué)難點(diǎn)1.掌握插值表達(dá)式的基本使用；2.掌握模板語法的基本使用教學(xué)過程設(shè)計(jì)備注一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對(duì)學(xué)生吸收不好的知識(shí)點(diǎn)進(jìn)行再次鞏固講解。二、教師通過直接導(dǎo)入的方式導(dǎo)入新課Vue.js中的計(jì)算屬性是基于它的響應(yīng)式系統(tǒng)來實(shí)現(xiàn)的，它可以根據(jù)Vue實(shí)例的數(shù)據(jù)狀態(tài)來動(dòng)態(tài)計(jì)算出新的屬性值。在Vue組件中，計(jì)算屬性常用于對(duì)數(shù)據(jù)進(jìn)行處理和轉(zhuǎn)換，以及動(dòng)態(tài)生成一些需要的數(shù)據(jù)，我們有必要掌握下計(jì)算屬性。新課講解1.計(jì)算屬性什么是計(jì)算屬性呢？模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。在一個(gè)計(jì)算屬性里可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個(gè)結(jié)果就可以。各位同學(xué)可以計(jì)算下每一個(gè)學(xué)期自己所有的消費(fèi)明細(xì)，自己每一年的消費(fèi)明細(xì)，理性消費(fèi)，尊重父母的勞動(dòng)成果，不可盲目的攀比，要形成正確的消費(fèi)觀。我們首先看一個(gè)案例。01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>Computed</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <p>原始信息為:"{{message}}"</p>11 <p>使用計(jì)算屬性處理后的數(shù)據(jù):"{{reversedMessage}}"</p><!-- 把復(fù)雜處理放在了計(jì)算屬性里面了-->12</div>13</body>14<script>15 constApp={16 data(){17 return{18 message:'Hello' 19 } 20 }，21 computed:{22 reversedMessage:function(){23 //`this`指向vm實(shí)例24 returnthis.message.split('').reverse().join('')25 }26 }27 }28 Vue.createApp(App).mount("#app")29</script>30</html>06行引入vue；09行定義id為app的div容器；10行使用插值表達(dá)式調(diào)用變量message的值；11行顯示計(jì)算屬性reversedMessage的值；15行定義名為app的常量；16~20行表示定義data屬性，該屬性中定義了message變量；21~27行定義了計(jì)算屬性reversedMessage，24行將message變量進(jìn)行字符上的翻轉(zhuǎn)作為計(jì)算屬性的值。計(jì)算屬性還可以依賴多個(gè)Vue實(shí)例的數(shù)據(jù)，只要其中任一數(shù)據(jù)變化，計(jì)算屬性就會(huì)重新執(zhí)行，視圖也會(huì)更新。注意：計(jì)算屬性實(shí)際上可以理解為能夠在里面寫一些計(jì)算邏輯的屬性。具有的作用：一是減少模板中的計(jì)算邏輯；二是有數(shù)據(jù)緩存功能，當(dāng)我們的數(shù)據(jù)沒有變化的時(shí)候，不會(huì)再次執(zhí)行計(jì)算的過程。每一個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter，我們上面的兩個(gè)示例都是計(jì)算屬性的默認(rèn)用法，只是利用了getter來讀取。此時(shí)的計(jì)算屬性就是用到了setter函數(shù)，在你需要時(shí)，也可以提供一個(gè)setter函數(shù)，顯示的表現(xiàn)出來。當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作，例如：01<!DOCTYPEhtml>02<html>03<head>04<metacharset="utf-8">05<title>Computed</title>06<scriptsrc="vue.global.js"></script>07</head>08<body>09 <divid="app">10 <button@click="updateName">修改計(jì)算屬性的值</button><br>11 姓：<inputtype="text"v-model="name1"><br>名：12 <inputtype="text"v-model="name2"><br>全稱：13 <inputtype="text"v-model="fullname"><br>14 <inputtype="text"v-model="fullname"><br>15 <inputtype="text"v-model="fullname"><br>16 <inputtype="text"v-model="fullname"><br> 17</div>18</body>19<script> 20 constapp=Vue.createApp({21 data(){22 return{23 name1:'zhang'，24 name2:'san' 25 } 26 }， 27 computed:{28 fullname:{29 //getter 30 get:function(){31 console.log("有人讀取了fullname");32 return1+'-'+233 }，34 //setter35 set:function(newValue){36 this.message=newValue;37 console.log("set方法被觸發(fā)了");38