Vue.js3前端開發(fā)基礎(chǔ)及項目化應(yīng)用 課件 單元三 組件基礎(chǔ)

Vue.js前端開發(fā)基礎(chǔ)及項目化應(yīng)用單元三

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

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

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

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

組件插槽這是父組件信息示例執(zhí)行結(jié)果具名插槽：為了區(qū)分不同插槽對應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個插槽分配唯一標(biāo)識。帶有name屬性的插槽被稱為具名插槽具名插槽語法：組件插槽具名插槽：為了區(qū)分不同插槽對應(yīng)的渲染內(nèi)容，可使用slot元素的name屬性，為每個插槽分配唯一標(biāo)識。帶有name屬性的插槽被稱為具名插槽具名插槽語法：組件插槽簡寫方式：v-slot指令簡寫為“#”具名插槽示例：利用具名插槽模擬手機App不同布局的頂部導(dǎo)航條組件插槽示例執(zhí)行效果組件插槽作用域插槽：攜帶數(shù)據(jù)的插槽也稱為作用域插槽作用域插槽的作用：由子組件提供參數(shù)給父組件，父組件利用這些參數(shù)按需進行不同的內(nèi)容填充，從而使得父組件可以訪問子組件作用域中的數(shù)據(jù)作用域插槽的語法組件插槽組件插槽作用域插槽示例：利用作用域插槽實現(xiàn)父組件訪問子組件數(shù)據(jù)示例執(zhí)行結(jié)果動態(tài)組件動態(tài)組件：指Vue應(yīng)用程序運行過程中，在同一元素內(nèi)需要動態(tài)切換不同組件動態(tài)組件作用：常用于實現(xiàn)網(wǎng)頁中的tab選項卡布局動態(tài)組件語法：動態(tài)組件動態(tài)組件示例：使用動態(tài)組件，實現(xiàn)菜單項內(nèi)容的切換示例執(zhí)行效果動態(tài)組件項目3自定義頁面圖標(biāo)樣式需求描述歷史名城游網(wǎng)站頁面布局中有多處需使用字體圖標(biāo)“+”，要求字體圖標(biāo)形狀相同，但在不同頁面中可能會調(diào)整其顏色或大小項目3自定義頁面圖標(biāo)樣式實現(xiàn)思路

頁面布局分為上下兩個div區(qū)域，上面的div區(qū)域包括標(biāo)題“賞析”和“更多分類+”，下面的div區(qū)域使用li元素實現(xiàn)兩個作品的展示引入第三方RemixIcon開源圖標(biāo)庫。采用組件對字體圖標(biāo)樣式設(shè)置進行封裝，實現(xiàn)字體圖標(biāo)及其樣式的按需設(shè)置。通過props選項來接收使用者的圖標(biāo)樣式、字體類型和字體大小參數(shù)；在模板結(jié)構(gòu)中，聲明插槽用于填充不同布局所需要的字體圖標(biāo)，使用v-bind指令（:指令）將圖標(biāo)樣式、字體類型和字體大小參數(shù)與props選項中的屬性進行綁定在根組件中調(diào)用字體圖標(biāo)組件，并傳入所需的圖標(biāo)樣式、字體類型和字體大小參數(shù)項目3自定義頁面圖標(biāo)樣式任務(wù)3-1構(gòu)建頁面布局項目3自定義頁面圖標(biāo)樣式任務(wù)3-2實現(xiàn)自定義圖標(biāo)樣式定義字體圖標(biāo)組件的模板結(jié)構(gòu)創(chuàng)建根組件和字體圖標(biāo)組件項目3自定義頁面圖標(biāo)樣式任務(wù)3-2實現(xiàn)自定義圖標(biāo)樣式（續(xù)）使用字體圖標(biāo)組件同步訓(xùn)練請編寫一個自定義頁面文字樣式組件，并將其應(yīng)用在頁面的標(biāo)題和文字上單元小結(jié)組件是Vue應(yīng)用程序的基本結(jié)構(gòu)單元。每個組件根據(jù)所負責(zé)功能的需求，構(gòu)建自己的CSS、HTML和JavaScript代碼，以及收集圖片等相關(guān)資源。組件可理解為實現(xiàn)完整應(yīng)用的局部功能代碼和資源的集合。組件由以下3個部分構(gòu)成。template：組件的模板結(jié)構(gòu)，負責(zé)頁面布局，需定義到<template>標(biāo)簽對中。它是必選項；script：組件的JavaScript行為，負責(zé)控制頁面布局及其樣式，需定義到<script>標(biāo)簽對中；style：組件的CSS，負責(zé)頁面布局樣式，需定義到<style>標(biāo)簽對中。單元小結(jié)根據(jù)Vue組件機制，組件的使用流程如下：組件定義：利用JavaScript創(chuàng)建組件對象；組件注冊：按照使用范圍，對組件進行全局或局部注冊，并給它起一個組件注冊名；組件調(diào)用：以組件注冊名為元素名，在HTML頁面中調(diào)用該組件。組件是以包含Vue特定選項的JavaScript對象定義的。組件可以包含的選項有data、methods、template等。組件間數(shù)據(jù)傳遞常見的方式是父組件傳值給子組件，子組件需要通過props選項聲明屬性，來實現(xiàn)對父組件數(shù)據(jù)的接收。單元小結(jié)組件事件是一種由開發(fā)者設(shè)計觸發(fā)條件的自定義事件。通過自定義事件可以