Vue.js3前端開發(fā)基礎及項目化應用 課件 單元1-3 Vue.js 3入門基礎、基礎語法、組件基礎

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

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

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

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

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

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

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

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