Vue.js3前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用 課件 單元1-3 Vue.js 3入門基礎(chǔ)、基礎(chǔ)語(yǔ)法、組件基礎(chǔ)

單元一Vue.js入門基礎(chǔ)Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用目錄前端開(kāi)發(fā)模式的演變歷程認(rèn)識(shí)Vue.js項(xiàng)目開(kāi)發(fā)準(zhǔn)備項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面基于模板渲染頁(yè)面的開(kāi)發(fā)模式利用JSP、PHP等技術(shù)創(chuàng)建頁(yè)面模板，頁(yè)面內(nèi)容由后端計(jì)算生成，通過(guò)Web服務(wù)器將模板解析成HTML文件，經(jīng)瀏覽器渲染后得到最終頁(yè)面效果。特點(diǎn)：是頁(yè)面布局與業(yè)務(wù)邏輯代碼混合在一起基于AJAX前后端分離的開(kāi)發(fā)模式Web應(yīng)用可分為前端和后端，其中前端負(fù)責(zé)頁(yè)面的布局與交互，后端負(fù)責(zé)業(yè)務(wù)邏輯的處理，前后端通過(guò)接口進(jìn)行數(shù)據(jù)交互。特點(diǎn)：前后端分離，各自任務(wù)明確前端開(kāi)發(fā)模式的演變歷程基于MVVM的開(kāi)發(fā)模式MVVM（Model-View-ViewModel，模型-視圖-視圖模型）模式是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式。其思想是以ViewModel（視圖模型）層為樞紐，向上與View（視圖）層進(jìn)行雙向數(shù)據(jù)綁定，向下與Model（模型）層通過(guò)接口交互數(shù)據(jù)，從而實(shí)現(xiàn)View和Model的自動(dòng)同步。特點(diǎn)：前后端進(jìn)一步得到分離前端開(kāi)發(fā)模式的演變歷程什么是Vue.jsVue.js（簡(jiǎn)稱Vue）是一個(gè)基于MVVM模式的，用于構(gòu)建用戶界面的JavaScript框架。核心思想數(shù)據(jù)驅(qū)動(dòng)：指視圖由數(shù)據(jù)驅(qū)動(dòng)生成，開(kāi)發(fā)者對(duì)視圖的改變，不是通過(guò)直接操作DOM實(shí)現(xiàn)的，而是通過(guò)修改數(shù)據(jù)間接實(shí)現(xiàn)的。組件化：對(duì)于可重用代碼的封裝。認(rèn)識(shí)Vue.jsVue主要特性輕量級(jí)數(shù)據(jù)綁定指令豐富插件眾多組件化虛擬DOM認(rèn)識(shí)Vue.js了解相關(guān)工具Vue庫(kù)文件Vue框架的核心庫(kù)文件。它包括模板語(yǔ)法、組件、數(shù)據(jù)綁定和響應(yīng)式系統(tǒng)等內(nèi)容，可以滿足前端項(xiàng)目的基礎(chǔ)功能開(kāi)發(fā)需求使用方式采用CDN（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)）鏡像服務(wù)器方式直接導(dǎo)入HTML文件下載Vue庫(kù)文件，將它作為本地資源在HTML代碼中引入以插件形式安裝到前端項(xiàng)目中項(xiàng)目開(kāi)發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）VueCLI一個(gè)用于快速構(gòu)建Vue項(xiàng)目的工具。它包括CLI（Command-LineInterface，命令行界面）、CLI服務(wù)和CLI插件CLI：提供了Vue命令用于搭建項(xiàng)目CLI服務(wù)：基于webpack提供開(kāi)發(fā)環(huán)境，用于項(xiàng)目啟動(dòng)、打包和加載CLI插件等處理工作CLI插件：提供可選的包，如Babel/TypeScript轉(zhuǎn)譯、ESLint集成等，在創(chuàng)建項(xiàng)目時(shí)，開(kāi)發(fā)者可自行選用項(xiàng)目開(kāi)發(fā)準(zhǔn)備了解相關(guān)工具（續(xù)）Node.js、npm和webpackNode.js是一個(gè)基于ChromeV8引擎的JavaScript運(yùn)行環(huán)境。它提供了使用npm和webpack工具的支持npm：一個(gè)Node.js中用于集中管理包的工具webpack：一個(gè)JavaScript應(yīng)用程序的靜態(tài)模塊打包器ES6（ECMAScript6.0的縮寫）：是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，其目標(biāo)是使JavaScript語(yǔ)言可以用來(lái)編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。新特性：const和let命令、模板字符串、解構(gòu)、for...of循環(huán)、展開(kāi)運(yùn)算符、ES6箭頭函數(shù)、類的支持、模塊等項(xiàng)目開(kāi)發(fā)準(zhǔn)備項(xiàng)目開(kāi)發(fā)準(zhǔn)備安裝開(kāi)發(fā)和調(diào)試工具代碼編輯器：VSCode（VisualStudioCode）是Microsoft推出的一款用于編寫現(xiàn)代Web應(yīng)用和云應(yīng)用的跨平臺(tái)源碼編輯器VSCode的安裝：進(jìn)入VSCode的官網(wǎng)下載所需版本，而后執(zhí)行.exe文件進(jìn)行安裝VSCode的擴(kuò)展庫(kù)：Vetur：支持Vue語(yǔ)法高亮、智能感知、Emmet等，還包含格式化功能等HTMLSnippets：支持HTML標(biāo)簽以及對(duì)標(biāo)簽含義的智能提示項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools前端開(kāi)發(fā)人員可用它進(jìn)行開(kāi)發(fā)預(yù)覽、遠(yuǎn)程調(diào)試、性能調(diào)優(yōu)、bug跟蹤、斷點(diǎn)調(diào)試等工作后端開(kāi)發(fā)人員可用它進(jìn)行網(wǎng)絡(luò)抓包、開(kāi)發(fā)調(diào)試等工作測(cè)試人員則可用它檢查服務(wù)器端API數(shù)據(jù)是否正確、審查頁(yè)面元素樣式及布局、進(jìn)行頁(yè)面加載性能分析，以及進(jìn)行自動(dòng)化測(cè)試DevTools工具中共有8個(gè)功能面板，其中常用于調(diào)試的是：Elements（元素）面板、Console（控制臺(tái)）面板、Sources（源代碼）面板、Network（網(wǎng)絡(luò)）面板項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Elements面板：用于檢查和實(shí)時(shí)編輯頁(yè)面的HTML與CSS代碼定位DOM查看CSS項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Console面板：可進(jìn)行交互式編程用于調(diào)試；也可以查看當(dāng)前程序運(yùn)行日志信息項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Sources面板：查看源碼以及進(jìn)行斷點(diǎn)調(diào)試項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具DevTools（續(xù)）Network面板：查看網(wǎng)頁(yè)資源請(qǐng)求處理情況項(xiàng)目開(kāi)發(fā)準(zhǔn)備調(diào)試工具VueDevtools一款基于瀏覽器的插件，主要用于調(diào)試Vue應(yīng)用程序安裝流程GitHub上查找并下載安裝包vue3_dev_tools.crxChrome瀏覽器右上角“自定義及控制”下拉菜單中，選擇“更多工具”->“擴(kuò)展程序”，進(jìn)入擴(kuò)展程序管理界面，把安裝包文件拖入該界面，當(dāng)看到瀏覽器提示“要添加Vue.jsdevtools嗎？”時(shí)，單擊“添加擴(kuò)展程序”按鈕，即可安裝該插件項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面需求描述歷史名城游網(wǎng)站需要制作一個(gè)HTML頁(yè)面，用于介紹某個(gè)歷史名城的基本情況。頁(yè)面內(nèi)容包括標(biāo)題、介紹文字、點(diǎn)贊按鈕和點(diǎn)贊數(shù)項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面實(shí)現(xiàn)思路使用VSCode創(chuàng)建一個(gè)HTML程序，引入Vue庫(kù)文件，并編寫相應(yīng)的HTML、CSS和JavaScript代碼。使用Chrome瀏覽器運(yùn)行該程序，并通過(guò)調(diào)試工具查看相關(guān)信息項(xiàng)目1歷史名城簡(jiǎn)介頁(yè)面任務(wù)1-1構(gòu)建Vue應(yīng)用程序任務(wù)1-2運(yùn)行并調(diào)試Vue應(yīng)用程序同步訓(xùn)練請(qǐng)使用VSCode代碼編輯器，創(chuàng)建一個(gè)HTML頁(yè)面，編寫如圖所示代碼，實(shí)現(xiàn)顯示“Hello,World！”的功能。單元小結(jié)前端開(kāi)發(fā)模式的發(fā)展經(jīng)歷了3個(gè)階段：模板渲染頁(yè)面->AJAX前后端分離->MVVM。Vue是一個(gè)用于構(gòu)建用戶界面的JavaScript框架。它是基于MVVM模式的、漸進(jìn)式的、允許自底向上逐層應(yīng)用的框架。Vue的核心思想是數(shù)據(jù)驅(qū)動(dòng)和組件化。數(shù)據(jù)驅(qū)動(dòng)是指視圖由數(shù)據(jù)驅(qū)動(dòng)生成，開(kāi)發(fā)者對(duì)視圖的改變，不是通過(guò)直接操作DOM，而是通過(guò)修改數(shù)據(jù)間接實(shí)現(xiàn)的。組件化是指對(duì)于可重用代碼的封裝。Vue的主要特性是：輕量級(jí)、數(shù)據(jù)綁定、指令、插件、組件化和虛擬DOM。與Vue應(yīng)用開(kāi)發(fā)相關(guān)的工具包括Vue庫(kù)文件、VueCLI、Node.js、npm、webpack和ES6。Vue使用的開(kāi)發(fā)工具是VSCode，調(diào)試工具是DevTools和VueDevtools。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元二

基礎(chǔ)語(yǔ)法目錄剖析Vue應(yīng)用程序單向綁定雙向綁定流程控制事件處理計(jì)算屬性數(shù)據(jù)監(jiān)聽(tīng)器項(xiàng)目2-1簡(jiǎn)易計(jì)算器項(xiàng)目2-2歷史名城典故頁(yè)面剖析Vue應(yīng)用程序示例執(zhí)行結(jié)果示例代碼Vue應(yīng)用程序的要素導(dǎo)入Vue庫(kù)文件選擇掛載點(diǎn)聲明渲染數(shù)據(jù)的HTML代碼結(jié)構(gòu)利用JavaScript定義數(shù)據(jù)和操作數(shù)據(jù)創(chuàng)建Vue應(yīng)用實(shí)例和進(jìn)行掛載處理剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)模板語(yǔ)法定義：組件中template選項(xiàng)內(nèi)容（即模板結(jié)構(gòu)）所使用的語(yǔ)法規(guī)則作用：關(guān)聯(lián)組件的響應(yīng)式數(shù)據(jù)與DOM元素，即實(shí)現(xiàn)數(shù)據(jù)綁定分類：插值語(yǔ)法和指令語(yǔ)法組件定義：Vue應(yīng)用程序的基本結(jié)構(gòu)單元，每個(gè)組件都必須包含template選項(xiàng)，并規(guī)定其內(nèi)容必須定義到HTMLtemplate（模板）元素中或是掛載點(diǎn)內(nèi)剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)（續(xù)）插值語(yǔ)法最基本的數(shù)據(jù)綁定形式，通過(guò)引用組件的響應(yīng)式數(shù)據(jù)填充DOM元素，以達(dá)到數(shù)據(jù)綁定的目的插值語(yǔ)法：{{JavaScript表達(dá)式}}指令語(yǔ)法將指令綁定于DOM元素內(nèi)置屬性上或?qū)⒅噶钭鳛樵撛氐男聦傩?，為該元素添加一些特殊的行為，從而?shí)現(xiàn)數(shù)據(jù)綁定指令語(yǔ)法：v-指令:參數(shù)="表達(dá)式"，其中v-指令構(gòu)成特殊的HTML屬性，參數(shù)不是必選項(xiàng)剖析Vue應(yīng)用程序Vue應(yīng)用程序相關(guān)的幾個(gè)基本知識(shí)（續(xù)）響應(yīng)式數(shù)據(jù)響應(yīng)式數(shù)據(jù)是Vue響應(yīng)性特性的體現(xiàn)，如組件data選項(xiàng)中定義的數(shù)據(jù)均具有響應(yīng)性，即這些數(shù)據(jù)的變化都將會(huì)帶來(lái)HTML頁(yè)面輸出內(nèi)容的更新，這樣的數(shù)據(jù)也稱為狀態(tài)掛載點(diǎn)掛載點(diǎn)用于指定數(shù)據(jù)將被渲染的位置。Vue允許除<html>和<body>標(biāo)簽之外的任意HTML標(biāo)簽所表示的DOM元素作為掛載點(diǎn)使用CDN方式導(dǎo)入Vue庫(kù)文件剖析Vue應(yīng)用程序Vue構(gòu)建用戶界面的流程剖析Vue應(yīng)用程序單向綁定定義：數(shù)據(jù)改變會(huì)帶動(dòng)視圖更新，但視圖改變不會(huì)影響數(shù)據(jù)常用指令單向綁定插件表達(dá)式作用：用于引用響應(yīng)式數(shù)據(jù)語(yǔ)法：{{JavaScript表達(dá)式}}單向綁定學(xué)生：zhangsan示例執(zhí)行結(jié)果示例代碼v-text指令作用：通過(guò)其表達(dá)式引用響應(yīng)式數(shù)據(jù)，并將該數(shù)據(jù)渲染到指定DOM元素中語(yǔ)法：v-text="JavaScript表達(dá)式"單向綁定示例執(zhí)行結(jié)果示例代碼<h3>ThisisHTMLcontent</h3>v-html指令作用：通過(guò)其表達(dá)式引用響應(yīng)式數(shù)據(jù)，將該數(shù)據(jù)作為HTML代碼，并在解析后將其渲染到DOM元素中語(yǔ)法：v-html="JavaScript表達(dá)式"單向綁定示例執(zhí)行結(jié)果示例代碼ThisisHTMLcontentv-bind指令作用：用于綁定DOM元素的任意屬性，通過(guò)引用響應(yīng)式數(shù)據(jù)控制該屬性的變化語(yǔ)法：v-bind:屬性名="JavaScript表達(dá)式"示例：使用v-bind綁定HTML鏈接（a）、圖像（img）元素屬性單向綁定示例執(zhí)行結(jié)果示例代碼“Vue官網(wǎng)”鏈接以及Vue圖標(biāo)v-bind指令（續(xù)）示例v-bind綁定class屬性單向綁定示例執(zhí)行結(jié)果示例代碼雙向綁定定義：數(shù)據(jù)改變會(huì)引起視圖變化，視圖變化也會(huì)帶動(dòng)數(shù)據(jù)的改變。語(yǔ)法：v-model="JavaScript表達(dá)式"。雙向綁定雙向綁定示例使用v-model綁定HTML輸入框（input和textarea）元素雙向綁定示例執(zhí)行結(jié)果雙向綁定示例代碼雙向綁定示例使用v-model綁定HTML單選框（radio）元素雙向綁定示例執(zhí)行結(jié)果示例代碼雙向綁定示例使用v-model綁定HTML下拉列表框（select）元素雙向綁定示例執(zhí)行結(jié)果示例代碼條件渲染v-if/v-else/v-else-if作用：v-if可基于表達(dá)式值的真假，來(lái)?xiàng)l件性地渲染DOM元素，v-else、v-else-if分別用于表示與v-if鏈?zhǔn)秸{(diào)用的else塊和else-if塊語(yǔ)法：v-if="JavaScript表達(dá)式"v-else="JavaScript表達(dá)式"v-else-if="JavaScript表達(dá)式"流程控制v-if/v-else/v-else-if（續(xù)）示例:條件渲染指令應(yīng)用流程控制示例執(zhí)行結(jié)果示例代碼你可以看到消息數(shù)字大于0但小于等于5”v-show作用：與v-if的類似，也是基于表達(dá)式值的真假，來(lái)改變?cè)氐目梢?jiàn)性語(yǔ)法：v-show="JavaScript表達(dá)式"流程控制v-show（續(xù)）示例：v-show應(yīng)用流程控制示例執(zhí)行結(jié)果示例代碼你可以看到消息v-if與v-show比較應(yīng)用場(chǎng)景v-if可應(yīng)用于HTMLtemplate元素本身及其子元素上，也可以與v-else、v-else-if配合使用v-show不支持對(duì)HTMLtemplate元素的條件渲染，也不能與v-else、v-else-if進(jìn)行組合渲染方式當(dāng)v-if屬性為true或false時(shí)，其對(duì)應(yīng)元素被觸發(fā)，元素及其所包含的組件都會(huì)被重構(gòu)或銷毀，如果v-if屬性初始值為false，則對(duì)應(yīng)元素根本不會(huì)被渲染v-show屬性初始值無(wú)論是true還是false，其對(duì)應(yīng)元素均會(huì)被渲染流程控制列表渲染v-for是一個(gè)循環(huán)結(jié)構(gòu)的指令，它可將組件data選項(xiàng)定義的數(shù)組綁定到HTML列表或表格元素上，根據(jù)數(shù)組元素個(gè)數(shù)重復(fù)地對(duì)其渲染v-for作用：不僅可用于遍歷數(shù)組，也可用于遍歷對(duì)象的屬性v-for語(yǔ)法：v-for="(item,i_key,index)in對(duì)象名"v-bind:key="item.id"流程控制v-for示例：利用v-for遍歷數(shù)組實(shí)現(xiàn)列表渲染流程控制示例執(zhí)行結(jié)果示例代碼v-for示例（續(xù)）使用v-for遍歷對(duì)象屬性，實(shí)現(xiàn)列表渲染流程控制示例執(zhí)行結(jié)果示例代碼事件處理機(jī)制：事件監(jiān)聽(tīng)采用v-on指令為DOM元素綁定監(jiān)聽(tīng)器，以監(jiān)聽(tīng)DOM事件和觸發(fā)事件處理代碼的執(zhí)行事件監(jiān)聽(tīng)v-on指令作用：監(jiān)聽(tīng)DOM事件和執(zhí)行事件處理函數(shù)語(yǔ)法：v-on:事件名="表達(dá)式"，“v-on:”可簡(jiǎn)寫為“@”表達(dá)式為事件處理函數(shù)名，事件處理函數(shù)可以是方法或內(nèi)聯(lián)事件處理器事件處理事件處理示例使用方法事件處理器的v-on應(yīng)用事件處理示例執(zhí)行結(jié)果示例代碼顯示按鈕“求和”，單擊該按鈕，顯示計(jì)算結(jié)果為10事件處理示例（續(xù)）使用內(nèi)聯(lián)事件處理器的v-on應(yīng)用事件處理示例執(zhí)行結(jié)果示例代碼顯示按鈕“計(jì)數(shù)”和“求和”，每單擊一次“計(jì)數(shù)”按鈕，顯示計(jì)數(shù)加1；單擊“求和”按鈕，顯示結(jié)果為3，同時(shí)彈出對(duì)話框并顯示“BUTTON”。事件修飾符.stop：阻止事件冒泡.self：只有當(dāng)前元素本身有事件觸發(fā)時(shí)，才調(diào)用事件處理函數(shù).prevent：阻止默認(rèn)事件.capture：使用捕獲模式添加事件監(jiān)聽(tīng)器.once：實(shí)現(xiàn)事件只被觸發(fā)一次.passive：以{passive:true}模式添加事件監(jiān)聽(tīng)器事件處理.stop應(yīng)用場(chǎng)景HTML頁(yè)面上，粉色的div元素包裹在藍(lán)色的div元素中，利用.stop修飾符實(shí)現(xiàn)單擊對(duì)應(yīng)顏色的div元素，僅會(huì)顯示對(duì)應(yīng)顏色的信息事件處理.self應(yīng)用場(chǎng)景HTML頁(yè)面上綠色、藍(lán)色和粉色的div元素依次包裹，利用.self修飾符使得只有單擊藍(lán)色div元素時(shí)，才會(huì)顯示“藍(lán)色區(qū)域”信息事件處理.prevent應(yīng)用場(chǎng)景針對(duì)HTML頁(yè)面上的表單，利用.prevent修飾符實(shí)現(xiàn)單擊“提交”按鈕，執(zhí)行表單自定義提交處理函數(shù)onSubmit事件處理.capture應(yīng)用場(chǎng)景HTML頁(yè)面上有祖、父和子div元素形成的三層嵌套結(jié)構(gòu)，利用.capture修飾符實(shí)現(xiàn)從祖div元素到子div元素相關(guān)信息的依次顯示事件處理.once應(yīng)用場(chǎng)景對(duì)于HTML頁(yè)面上“單擊一次”按鈕，利用.once修飾符實(shí)現(xiàn)對(duì)此按鈕僅響應(yīng)單擊事件一次事件處理.passive應(yīng)用場(chǎng)景HTML頁(yè)面上有一個(gè)帶滾動(dòng)條的div元素區(qū)域，利用.passive修飾符使得瀏覽器能及時(shí)響應(yīng)用戶操作，確保順暢的滾動(dòng)體驗(yàn)事件處理.prevent和.stop應(yīng)用場(chǎng)景HTML頁(yè)面上button元素包含a子元素，利用.prevent和.stop修飾符，阻止a元素鏈接跳轉(zhuǎn)的默認(rèn)行為和事件繼續(xù)向外傳播事件處理計(jì)算屬性作用：用于描述依賴響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯處理語(yǔ)法：計(jì)算屬性簡(jiǎn)化寫法示例：利用計(jì)算屬性實(shí)現(xiàn)人民幣與港幣的兌換計(jì)算屬性示例執(zhí)行結(jié)果示例代碼數(shù)據(jù)監(jiān)聽(tīng)器作用：對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，一旦數(shù)據(jù)發(fā)生變化，則觸發(fā)相應(yīng)函數(shù)的執(zhí)行，以達(dá)到改變其他數(shù)據(jù)的目的語(yǔ)法數(shù)據(jù)監(jiān)聽(tīng)器數(shù)據(jù)監(jiān)聽(tīng)器示例：利用數(shù)據(jù)監(jiān)聽(tīng)器實(shí)現(xiàn)對(duì)不同類型數(shù)據(jù)的監(jiān)聽(tīng)數(shù)據(jù)監(jiān)聽(tīng)器示例執(zhí)行結(jié)果示例代碼顯示“字符串”、“對(duì)象”和“數(shù)組”3個(gè)輸入框，當(dāng)改變?nèi)魏我粋€(gè)輸入框值時(shí)，控制臺(tái)上會(huì)顯示相應(yīng)的提示信息、輸入框中的最新內(nèi)容項(xiàng)目2-1簡(jiǎn)易計(jì)算器需求描述網(wǎng)頁(yè)版簡(jiǎn)易計(jì)算器包括操作數(shù)輸入框、運(yùn)算符下拉列表框和計(jì)算處理按鈕。用戶輸入操作數(shù)，選擇運(yùn)算符，單擊“計(jì)算”按鈕，按鈕下方應(yīng)顯示運(yùn)算結(jié)果。運(yùn)算符包括+、-、*、/、**，除平方值運(yùn)算外，其他運(yùn)算的操作數(shù)均為兩個(gè)項(xiàng)目2-1簡(jiǎn)易計(jì)算器實(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ù)，也就是說(shuō)求平方運(yùn)算需要隱藏第二個(gè)操作數(shù)，可使用v-show指令來(lái)實(shí)現(xiàn)這個(gè)功能項(xiàng)目2-1簡(jiǎn)易計(jì)算器任務(wù)2-1-1構(gòu)建頁(yè)面布局項(xiàng)目2-1簡(jiǎn)易計(jì)算器任務(wù)2-1-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例項(xiàng)目2-2歷史名城典故頁(yè)面需求描述歷史名城典故頁(yè)面包括左側(cè)城市列表和右側(cè)名城典故內(nèi)容，當(dāng)用戶選擇左側(cè)城市列表中某個(gè)城市時(shí)，應(yīng)能夠在右側(cè)名城典故內(nèi)容部分顯示對(duì)應(yīng)的名城典故信息。項(xiàng)目2-2歷史名城典故頁(yè)面實(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)聽(tīng)該選項(xiàng)的單擊事件，并利用對(duì)應(yīng)的事件處理函數(shù)實(shí)現(xiàn)名城典故的呈現(xiàn)項(xiàng)目2-2歷史名城典故頁(yè)面任務(wù)2-2-1構(gòu)建頁(yè)面布局項(xiàng)目2-2歷史名城典故頁(yè)面任務(wù)2-2-2創(chuàng)建根組件和Vue應(yīng)用實(shí)例同步訓(xùn)練請(qǐng)利用v-model、v-if指令實(shí)現(xiàn)學(xué)情問(wèn)卷調(diào)查頁(yè)面效果。圖（a）所示的是程序運(yùn)行的初始效果，當(dāng)用戶輸入調(diào)查內(nèi)容并單擊“提交”按鈕后，將顯示調(diào)查結(jié)果，如圖（b）所示。提示：“性別”、“你已學(xué)習(xí)的語(yǔ)言”可分別使用type為radio、checkbox的input元素來(lái)構(gòu)建。單元小結(jié)Vue基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建用戶界面，幫助開(kāi)發(fā)人員高效開(kāi)發(fā)用戶界面。開(kāi)發(fā)者可以選擇原生HTML、以組件嵌入網(wǎng)頁(yè)、單頁(yè)應(yīng)用（SPA）或服務(wù)器端渲染等方式來(lái)使用Vue。采用原生HTML開(kāi)發(fā)方式編寫Vue應(yīng)用程序，其內(nèi)容如下。（1）導(dǎo)入Vue庫(kù)文件。（2）選擇掛載點(diǎn)。（3）聲明渲染數(shù)據(jù)的HTML代碼結(jié)構(gòu)。（4）利用JavaScript定義數(shù)據(jù)和操作數(shù)據(jù)。（5）創(chuàng)建Vue應(yīng)用實(shí)例和進(jìn)行掛載處理。單元小結(jié)常用術(shù)語(yǔ)如下。

（1）模板語(yǔ)法：Vue提供的對(duì)組件中template選項(xiàng)內(nèi)容所使用的語(yǔ)法規(guī)則，分為插值語(yǔ)法和指令語(yǔ)法兩種。（2）響應(yīng)式數(shù)據(jù)：Vue響應(yīng)性特性的體現(xiàn)，即數(shù)據(jù)的變化會(huì)帶來(lái)HTML頁(yè)面輸出內(nèi)容的更新。（3）掛載點(diǎn)：用于指定數(shù)據(jù)將被渲染的位置。Vue允許除<html>和<body>標(biāo)簽之外的任意HTML標(biāo)簽所表示的DOM元素作為掛載點(diǎn)。單元小結(jié)數(shù)據(jù)綁定分為單向和雙向兩種。其中單向綁定指的是數(shù)據(jù)改變會(huì)帶動(dòng)視圖更新，但視圖改變不會(huì)影響數(shù)據(jù)；雙向綁定則是指數(shù)據(jù)改變會(huì)引起視圖變化，反之視圖變化也會(huì)帶動(dòng)數(shù)據(jù)的改變?？捎糜趩蜗蚪壎ǖ陌ú逯当磉_(dá)式，以及v-text、v-html、v-bind、v-if/v-else/v-else-if、v-show、v-on、v-for等指令；雙向綁定指令為v-model。Vue事件處理機(jī)制中，事件監(jiān)聽(tīng)采用v-on指令為DOM元素綁定監(jiān)聽(tīng)器，以監(jiān)聽(tīng)DOM事件和觸發(fā)事件處理代碼的執(zhí)行。同時(shí)對(duì)于DOM事件的特殊情況，如事件冒泡、默認(rèn)事件等，Vue還提供了.stop、.self、.prevent、.capture、.once和.passive事件修飾符。Vue.js前端開(kāi)發(fā)基礎(chǔ)及項(xiàng)目化應(yīng)用單元三

組件基礎(chǔ)目錄認(rèn)識(shí)組件組件定義組件注冊(cè)組件間數(shù)據(jù)傳遞組件事件組件插槽動(dòng)態(tài)組件項(xiàng)目3自定義頁(yè)面圖標(biāo)樣式認(rèn)識(shí)組件組件化開(kāi)發(fā)思想將一個(gè)網(wǎng)頁(yè)應(yīng)用拆分為多個(gè)小的功能塊（組件），每個(gè)功能塊負(fù)責(zé)實(shí)現(xiàn)對(duì)應(yīng)的功能，并被以組件形式封裝起來(lái)，在不同頁(yè)面可重復(fù)使用，從而使得頁(yè)面的管理和維護(hù)變得更加容易一個(gè)Vue應(yīng)用程序結(jié)構(gòu)及其對(duì)應(yīng)的組件樹組件構(gòu)成template:組件的模板結(jié)構(gòu)，負(fù)責(zé)頁(yè)面布局，需定義到<template>標(biāo)簽對(duì)中script:組件的JavaScript行為，負(fù)責(zé)控制頁(yè)面布局及其樣式，需定義到<script>標(biāo)簽對(duì)中style:組件的CSS，負(fù)責(zé)頁(yè)面布局樣式，需定義到<style>標(biāo)簽對(duì)中認(rèn)識(shí)組件利用組件構(gòu)建頁(yè)面布局的過(guò)程通過(guò)template選項(xiàng)聲明模板結(jié)構(gòu)通過(guò)

script中data選項(xiàng)聲明數(shù)據(jù)、methods選項(xiàng)聲明操作數(shù)據(jù)的函數(shù)

data既可以是頁(yè)面布局內(nèi)容，也可以是頁(yè)面布局樣式；methods操作數(shù)據(jù)，改變布局或樣式認(rèn)識(shí)組件template選項(xiàng)它是嵌入<template>標(biāo)簽中的組件的模板結(jié)構(gòu)代碼<template>標(biāo)簽是HTML5新增特性，用于表示HTMLtemplate元素，默認(rèn)情況下它的內(nèi)容是不會(huì)被顯示出來(lái)的認(rèn)識(shí)組件template選項(xiàng)（續(xù)）使用方法1：是直接將模板結(jié)構(gòu)寫入掛載點(diǎn)中，常用于根組件在組件template選項(xiàng)中，采用模板語(yǔ)法的模板字符串（用反撇號(hào)進(jìn)行標(biāo)識(shí)）來(lái)定義（不推薦）是先將模板結(jié)構(gòu)寫入HTMLtemplate元素中，再將組件template選項(xiàng)設(shè)置為該元素id，以建立兩者的關(guān)聯(lián)（推薦）認(rèn)識(shí)組件template選項(xiàng)（續(xù)）使用方法示例認(rèn)識(shí)組件組件的使用流程組件定義：利用JavaScript創(chuàng)建組件對(duì)象組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁(yè)面中調(diào)用該組件認(rèn)識(shí)組件組件聲明語(yǔ)法組件定義組件的使用流程組件定義：利用JavaScript創(chuàng)建組件對(duì)象組件注冊(cè)：按照使用范圍，對(duì)組件進(jìn)行全局或局部注冊(cè)，并給它起一個(gè)組件注冊(cè)名組件調(diào)用：以組件注冊(cè)名為元素名，在HTML頁(yè)面中調(diào)用該組件認(rèn)識(shí)組件示例創(chuàng)建一個(gè)名為MyComponent的組件組件定義我是根組件！MyComponent是自定義的一個(gè)組件!示例執(zhí)行結(jié)果組件注冊(cè)名的命名方式使用kebab-case方式命名（推薦）所有字母小寫，名稱中各單詞用短橫線“-”連接簡(jiǎn)寫方式：組件注冊(cè)名與組件對(duì)象名命名相同，再使用kebab-case方式調(diào)用組件使用PascalCase（每個(gè)單詞首字母大寫）方式組件定義全局注冊(cè)作用：被全局注冊(cè)的組件可應(yīng)用于整個(gè)Vue應(yīng)用程序的任意組件中語(yǔ)法：組件注冊(cè)組件注冊(cè)全局注冊(cè)（續(xù)）示例注冊(cè)全局組件，實(shí)現(xiàn)單擊按鈕計(jì)數(shù)功能示例執(zhí)行效果組件注冊(cè)局部注冊(cè)作用：通過(guò)組件components選項(xiàng)來(lái)實(shí)現(xiàn)的，這使得被注冊(cè)的組件只能在其父組件中使用語(yǔ)法：組件注冊(cè)局部注冊(cè)（續(xù)）示例組件注冊(cè)ComponentA是一個(gè)局部組件!示例執(zhí)行結(jié)果組件間數(shù)據(jù)傳遞方式父子組件之間的通信；兄弟組件之間的通信；隔代組件之間的通信組件間數(shù)據(jù)傳遞常用方式父組件傳值給子組件，它是利用組件props選項(xiàng)定義的屬性來(lái)實(shí)現(xiàn)的props屬性語(yǔ)法組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞常用方式父組件傳值給子組件，它是利用組件props選項(xiàng)定義的屬性來(lái)實(shí)現(xiàn)的props屬性語(yǔ)法：組件間數(shù)據(jù)傳遞props屬性（續(xù)）示例：使用props實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞我是子組件。這是從父組件來(lái)的數(shù)據(jù)：我是父組件數(shù)據(jù)示例執(zhí)行結(jié)果props屬性（續(xù)）示例：使用props實(shí)現(xiàn)父組件向子組件動(dòng)態(tài)傳遞數(shù)據(jù)組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞props的驗(yàn)證作用：對(duì)props屬性驗(yàn)證的目的是為了確保他人能正確使用組件驗(yàn)證內(nèi)容：包括數(shù)據(jù)類型、值范圍等，允許的數(shù)據(jù)類型包括字符串（String）、數(shù)值（Number）、布爾（Boolean）、數(shù)組（Array）、對(duì)象（Object）、日期（Date）、函數(shù)（Function）和符號(hào)（Symbol）組件間數(shù)據(jù)傳遞props的驗(yàn)證方式數(shù)據(jù)類型驗(yàn)證組件間數(shù)據(jù)傳遞數(shù)據(jù)類型為一種類型示例數(shù)據(jù)類型為多種類型示例props的驗(yàn)證方式（續(xù)）必填值驗(yàn)證：通過(guò)required選項(xiàng)，將屬性設(shè)置為必須有值且其數(shù)據(jù)類型為type選項(xiàng)指定的數(shù)據(jù)類型。例如：組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）默認(rèn)值設(shè)置：利用default選項(xiàng)，可設(shè)置屬性默認(rèn)值。當(dāng)父組件調(diào)用子組件，未在子組件元素中綁定屬性，即未傳遞屬性值時(shí)，默認(rèn)值將生效。例如：組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）自定義驗(yàn)證函數(shù)：如果需要進(jìn)行復(fù)雜驗(yàn)證，可以自定義驗(yàn)證函數(shù)來(lái)判斷屬性是否符合要求。例如：組件間數(shù)據(jù)傳遞組件間數(shù)據(jù)傳遞props的驗(yàn)證方式（續(xù)）示例：對(duì)組件props選項(xiàng)傳遞的數(shù)據(jù)進(jìn)行驗(yàn)證示例執(zhí)行效果組件間數(shù)據(jù)傳遞Vue組件是由開(kāi)發(fā)者來(lái)設(shè)計(jì)事件觸發(fā)條件，也稱自定義事件Vue提供了emits選項(xiàng)和$emit函數(shù)，以實(shí)現(xiàn)組件事件的監(jiān)聽(tīng)和處理功能組件事件組件事件監(jiān)聽(tīng)與處理流程聲明和觸發(fā)自定義事件。在子組件中，使用emits選項(xiàng)聲明自定義事件；調(diào)用組件實(shí)例內(nèi)置函數(shù)$emit，并以事件名稱、要傳遞的數(shù)據(jù)為參數(shù)，觸發(fā)自定義事件并傳遞數(shù)據(jù)給父組件監(jiān)聽(tīng)自定義事件。父組件調(diào)用子組件時(shí)，在子組件元素中使用v-on指令（@指令）監(jiān)聽(tīng)自定義事件，父組件還需要聲明相應(yīng)的事件處理函數(shù)組件事件emits和$emit的使用emits選項(xiàng)的語(yǔ)法：$emit是組件實(shí)例的內(nèi)置函數(shù)，其語(yǔ)法：組件事件組件事件emits和$emit的使用（續(xù)）示例（例3-7）：在頁(yè)面中增加兩個(gè)輸入框和一個(gè)按鈕，實(shí)現(xiàn)單擊按鈕新增數(shù)組元素、單擊數(shù)組元素刪除對(duì)應(yīng)元素的功能示例執(zhí)行效果組件事件

關(guān)鍵代碼段組件事件的驗(yàn)證使用emits選項(xiàng)驗(yàn)證組件事件的有效性，在觸發(fā)事件時(shí)傳遞的數(shù)據(jù)將作為驗(yàn)證函數(shù)的參數(shù)組件事件組件事件的驗(yàn)證（續(xù)）示例：使用emits選項(xiàng)對(duì)組件自定義事件加以驗(yàn)證組件事件示例執(zhí)行效果組件事件v-model與自定義事件Vue允許在組件中使用v-model指令，結(jié)合自定義事件以及props選項(xiàng)，實(shí)現(xiàn)雙向數(shù)據(jù)傳遞例如：組件事件等同于：v-model與自定義事件（續(xù)）示例：子組件由一個(gè)輸入框和一個(gè)確認(rèn)按鈕組成，在子組件中輸入的新內(nèi)容會(huì)在父組件中顯示出來(lái)。組件事件示例執(zhí)行效果組件事件什么是插槽：可理解成一個(gè)可以插入的槽口，其作用與電源插座的插口、USB（UniversalSerialBus，通用串行總線）接口類同。使用插槽，組件可更具靈活性和可復(fù)用性插槽分類：默認(rèn)、具名和作用域組件插槽默認(rèn)插槽：在組件中使用slot元素即可為該組件開(kāi)啟一個(gè)插槽，如果slot元素name屬性值為默認(rèn)值default，這種插槽就被稱為默認(rèn)插槽默認(rèn)插槽的語(yǔ)法：組件插槽默認(rèn)插槽示例：在組件中定義和應(yīng)用默認(rèn)插槽

組件插槽這是父組件信息示例執(zhí)行結(jié)果具名插槽：為了區(qū)分不同插槽對(duì)應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個(gè)插槽分配唯一標(biāo)識(shí)。帶有name屬性的插槽被稱為具名插槽具名插槽語(yǔ)法：組件插槽具名插槽：為了區(qū)分不同插槽對(duì)應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個(gè)插槽分配唯一標(biāo)識(shí)。帶有name屬性的插槽被稱為具名插槽具名插槽語(yǔ)法：組件插槽簡(jiǎn)寫方式：v-slot指令簡(jiǎn)寫為“#”具名插槽示例：利用具名插槽模擬手機(jī)App不同布局的頂部導(dǎo)航條組件插槽示例執(zhí)行效果組件插槽作用域插槽：攜帶數(shù)據(jù)的插槽也稱為作用域插槽作用域插槽的作用：由子組件提供參數(shù)給父組件，父組件利用這些參數(shù)按需進(jìn)行不同的內(nèi)容填充，從而使得父組件可以訪問(wèn)子組件作用域中的數(shù)據(jù)作用域插槽的語(yǔ)法組件插槽組件插槽作用域插槽示例：利用作用域插槽實(shí)現(xiàn)父組件訪問(wèn)子組件數(shù)據(jù)示例執(zhí)行結(jié)果動(dòng)態(tài)組件動(dòng)態(tài)組件：指Vue應(yīng)用程序運(yùn)行過(guò)程中，在同一元素內(nèi)需要?jiǎng)討B(tài)切換不同組件動(dòng)態(tài)組件作用：常用于實(shí)現(xiàn)網(wǎng)頁(yè)中的tab選項(xiàng)卡布局動(dòng)態(tài)組件語(yǔ)法：動(dòng)態(tài)組件動(dòng)態(tài)組件示例：使用動(dòng)態(tài)組件，實(shí)現(xiàn)菜單項(xiàng)內(nèi)容