網(wǎng)頁設計與Web前端開發(fā)案例教程第8章Vue框架CONTENT目錄Vue簡介和環(huán)境搭建01Vue3基礎語法

02組件基礎知識03生命周期04簡單Vue應用實例0501Vue簡介和環(huán)境搭建Vue簡介定義Vue框架是EvanYou（尤雨溪）創(chuàng)建的開源JavaScript框架，是一個用于構建用戶界面的漸進式框架，提供了一套聲明式、組件化的編程模型，可以高效的開發(fā)用戶界面特點Vue的核心庫只關注視圖層，采用自底向上的增量開發(fā)設計，易學易用，便于與其它庫或項目整合。。安全性特點禁止訪問本地硬盤不允許對網(wǎng)絡中的文本修改或刪除地位與Angular、React并稱前端三大主流框架，是最年輕且熱門的框架。Vue的發(fā)展?自2014年推出以來，Vue經(jīng)歷了幾個版本的發(fā)展：1.1.xVue1.0于2014年10月正式發(fā)布，是Vue的初始版本，一經(jīng)發(fā)布就獲得了廣泛的應用。2.Vue2.xVue2.0于2016年9月發(fā)布，是Vue成為主流框架的重要里程碑。但隨著技術的發(fā)展和Vue3.x的推出和逐步成熟，2.x版本也逐漸進入尾聲并與2023年12月31日停止維護。3.Vue3.xVue3.0于2020年9月發(fā)布，并于2022年2月成為Vue的默認版本。截至目前，最新的Vue穩(wěn)定版是3.4.35。Vue3特點?1.輕量級：Vue的核心庫非常小巧，運行時核心庫僅10KB左右，加載速度快。2.漸進式框架：Vue可以自下而上逐層應用，可以在一個已有項目中作為視圖層庫使用，也可以管理整個前端應用。3.響應式數(shù)據(jù)綁定：Vue提供了簡潔易用的響應式數(shù)據(jù)綁定機制，可以方便的實現(xiàn)數(shù)據(jù)和視圖之間的同步。4.高性能：Vue的虛擬DOM和高效的差異化算法，使其具有良好的頁面性能和渲染效率。5.組件化開發(fā)：Vue允許使用組件構建應用程序，提高了代碼的可維護性和復用性。易于學習：Vue以HTML和JavaScript為基礎，語法簡單直觀，適合初學者學習使用。Vue環(huán)境搭建(一)：獨立腳本?適用場景：前端邏輯簡單或增強已有項目，無需復雜項目構建。使用方式：通過<script>標簽引入Vue的js文件，可通過全局變量或模塊方式使用。版本類型：全局構建版（如Vue.global.js）：開發(fā)用生產(chǎn)環(huán)境版（如Vd.js）：最小化，移除開發(fā)代碼ESM版（如Vd.js）：采用ES模塊語法，需瀏覽器支持資源來源：本地文件（官網(wǎng)下載）或CDN（推薦，如Unpkg、StaticfileCDN等）。常用的CDN：Unpkg:"/vue@3/dist/vue.global.js"StaticfileCDN："/vue/3.x.x/vue.global.js"Cdnjs："/ajax/libs/vue/3.x.x/vue.global.js"jsDelivr："/npm/vue@3/dist/vue.global.js"Vue環(huán)境搭建(二)：構建工具?適用場景：開發(fā)大型或復雜應用。工具要求：官方推薦Vite，需Node.js20+支持。搭建步驟：命令行輸入npmcreatevue@latest按提示輸入項目名稱，選擇TypeScript、VueRouter等功能選項初始化完成后，執(zhí)行cd項目名、npminstall、npmrundev啟動項目其他工具：VSCode、WebStrom、HbuilderX等可按提示創(chuàng)建Vue項目。Vue實例創(chuàng)建Vue應用開發(fā)的第一步就是在頁面中創(chuàng)建應用實例。在全局構建的版本中，Vue是定義在Windows上的全局對象，可以在html文件中直接使用，所有的頂層API都暴露在Vue對象上。通過全局對象Vue調(diào)用createApp()方法可以創(chuàng)建一個Vue應用實例，該方法接收一個根組件對象參數(shù)。語法如下：functioncreateApp(rootComponent,rootProps)參數(shù)：rootComponent：Vue應用實例的根組件，可以是內(nèi)聯(lián)組件，也可以是外部組件。rootProps：用來向根組件傳遞參數(shù)，可以省略Vue實例創(chuàng)建后，必須掛載之后才能被渲染進DOM樹。實例通過調(diào)用mount方法掛載到指定的DOM元素上。mount方法由接收一個DOM元素參數(shù)，并返回根組件實例。02Vue3基礎語法模板語法Vue使用一種基于HTML的聲明式語法將其組件實例的數(shù)據(jù)綁定到DOM元素上，這種語法稱為模板語法。模板語法可以被瀏覽器和HTML解析器解析，與響應式系統(tǒng)結合，能夠在應用狀態(tài)改變時智能地計算出最少數(shù)量的渲染組件和DOM應用操作。Vue模板語法與HTML是語法層面上的結合，即Vue模板語法是在HTML標簽中的以一種特殊內(nèi)容或?qū)傩缘男问酱嬖?，并將其?shù)據(jù)綁定到DOM元素上，數(shù)據(jù)被解析成HTML的內(nèi)容或?qū)傩栽阡秩緯r更新到視圖中。Vue模板語法主要包括文本插值和指令兩種形式。文本插值是最簡單最基本的數(shù)據(jù)綁定形式，采用“Mustache”語法，即雙大括號。文本插值用于在文本信息中插入綁定的數(shù)據(jù)，綁定的數(shù)據(jù)來自Vue實例中的響應式數(shù)據(jù)，雙大括號標簽中的數(shù)據(jù)值會被解析為純文本信息。當響應式數(shù)據(jù)的值更改時，DOM中文本自動更新并重新渲染。Mustache語法會被解析成文本內(nèi)容，只能在文本信息中使用，不能在HTML屬性中使用。Vue提供了一些以“v-”為前綴的特殊HTML屬性，為DOM元素綁定數(shù)據(jù)或提供特殊行為，這些特殊屬性稱為指令。指令是Vue的核心功能之一性，以HTML屬性的方式將響應式數(shù)據(jù)綁定到DOM元素上，可以動態(tài)的對DOM元素的屬性進行更新，極大的減少了代碼量。文本插值代碼示例：<divid=’app’>消息內(nèi)容：{{message}}</div>其中：{{message}}中的message是來自Vue實例的響應式數(shù)據(jù)，當響應式數(shù)據(jù)message的值變化時，插值處的文本信息也自動更新并重新渲染。文本插值以v-為前綴的特殊HTML屬性，用于數(shù)據(jù)綁定或行為控制根據(jù)功能分為屬性綁定指令、條件渲染指令、列表渲染指令、事件處理指令等。常用指令如表8-1所示。指令表8-1Vue常用指令表指令描述v-text用于更新元素文本信息。v-show用于根據(jù)表達式的值來條件性地顯示或隱藏元素。v-html用于將v-html

的內(nèi)容作為普通HTML插入，不推薦使用。v-bind用于將

Vue實例的數(shù)據(jù)綁定到HTML元素的屬性上。v-if用于根據(jù)表達式的值來條件性地渲染元素或組件。v-for用于根據(jù)數(shù)組或?qū)ο蟮膶傩灾祦硌h(huán)渲染元素或組件。v-on用于在

HTML元素上綁定事件監(jiān)聽器。v-model用于在表單控件和

Vue實例的數(shù)據(jù)之間創(chuàng)建雙向數(shù)據(jù)綁定。在Vue中，可以通過條件指令決定是否渲染元素或者模板，條件指令包括v-if、v-else和v-else-if。v-if指令：條件性的渲染一個元素或模板指令的值為真時：該元素及其包含的子元素進行渲染指令的值為假時：全部不渲染指令的值改變時：元素及其內(nèi)容會銷毀或重建，同時觸發(fā)過渡效果。當多個元素需要根據(jù)同一個條件同時切換時，可以增加一個容器并在容器上使用v-if。v-else指令：根據(jù)前置v-if的條件值反向渲染，必須與v-if必須在v-if或者v-else-if元素之后，否則不會被識別。v-else-if指令：提供elseif的條件渲染，可以連續(xù)多次使用表示多個條件分支，指令需要傳入條件值。v-else-if的元素也必須在一個v-if或者v-else-if之后，否則不會被識別。條件渲染條件渲染<divid="app"><ul><liclass="container"v-if="true">成績{{id}}：{{score}}，成績等級：

<spanv-if="score>=90">優(yōu)</span><spanv-else-if="score>=80">良</span><spanv-else-if="score>=70">中</span><spanv-else-if="score>=60">及格</span><spanv-else>不及格</span></li></ul></div><script>Vue.createApp({data(){return{id:1,score:83}}}).mount('#app')</script>圖8-4條件渲染實例效果圖【例8-6】

條件渲染實例。Vue提供的列表渲染指令v-for，可以根據(jù)數(shù)據(jù)用簡潔的代碼生成元素并對元素進行高效渲染。v-for指令作為一個特殊的HTML屬性，可以將數(shù)組、對象、數(shù)值等數(shù)據(jù)源綁定到該DOM元素，并通過對數(shù)據(jù)源的遍歷實現(xiàn)DOM元素的循環(huán)渲染v-for功能類似于Javascript的forEach，但v-for比forEach代碼實現(xiàn)更為簡潔，只需要提供遍歷的數(shù)據(jù)源，并將數(shù)據(jù)源綁定到循環(huán)Dom元素中即可實現(xiàn)大量數(shù)據(jù)的動態(tài)渲染。列表渲染數(shù)組是列表渲染最常用的數(shù)據(jù)源形式。v-for指令遍歷數(shù)組時，遍歷的迭代項是數(shù)組元素指令值的形式必須采用以下兩種特殊語法中的一種：v-for="iteminarrayname"v-for="(item，index)inarrayname"其中：item是當前數(shù)組元素名稱，用來獲取當前數(shù)組元素值，名稱可自定義；

in是分隔符，也可以用of替代；index是當前數(shù)組元素索引名稱，可自定義；arrayname是數(shù)據(jù)源數(shù)組，需要在根組件的響應式數(shù)據(jù)中提前定義。1、數(shù)組遍歷條件渲染 <divid="mydiv"> <ul> <liv-for="(item,index)intitleArray"> {{index+1}}:{{item}} </li> </ul> </div> <script> const{ createApp}=Vue constapp=createApp({ data(){ return{ titleArray:["奧運新聞","國際局勢","國內(nèi)熱點"] } } }) app.mount("#mydiv") </script>【例8-7】

數(shù)組列表渲染實例代碼：圖8-5數(shù)組列表渲染實例效果圖v-for指令還可以用來遍歷對象的所有屬性，遍歷的順序按照Object.keys()的返回值順序。遍歷對象是指令的值形式與數(shù)組相似，必須采用以下語法中的一種：v-for="valueinobject"v-for="(value,key)inobject"v-for="(value,key,index)inobject"其中：value為對象當前屬性的值，名稱可自定義； key為對象當前屬性名，可自定義； index為對象當前屬性的索引值，可自定義； object為數(shù)據(jù)源對象，需要在組件響應式數(shù)據(jù)中定義。2、對象遍歷條件渲染<divid="app"> <divv-for="(value,key)ofgolden">{{key}}:{{value}}</div></div><script> Vue.createApp({ data(){ return{ golden:{

比賽項目:"10米氣步槍混合團體",

獲得者:"黃雨婷/盛李豪",

時間:"2024.7.27" } } } }).mount('#app')</script>【例8-8】

對象列表渲染實例代碼：圖8-6對象列表渲染實例效果圖v-for還可以接受一個整數(shù)值n做范圍遍歷，n必須必須是大于0的整數(shù)，遍歷的取值范圍是1～n，包括1和n。采用的語法為：v-for="iinn"其中：i為當前遍歷值，名稱可自定義； n為范圍值整數(shù)，需要在組件響應式數(shù)據(jù)中定義的整數(shù)屬性。3、范圍值遍歷條件渲染 <divid="app"> <divv-for="iinn"> {{i<10?"0"+i:i}}/{{n}}:第{{i}}個列表項 </div> </div> <script> Vue.createApp({ data(){ return{ n:13 } } }).mount('#app') </script>【例8-9】

范圍值列表渲染實例代碼：圖8-7范圍值列表循環(huán)實例效果圖v-for指令可以實現(xiàn)多層循環(huán)嵌套，其內(nèi)層元素的作用域可以訪問父級作用域，反之則不可以。4、循環(huán)嵌套<divid="mydiv> <h3style="margin:20px;">中國金牌榜</h3> <ul> <liv-for="(item,index)ingoldenList"class="listItem">第{{index+1}}金： <spanv-for="valueinitem"class="data"> {{value}}</span> </li> </ul></div><script> Vue.createApp({ data(){ return{ goldenList:[{event:"10米氣步槍混合團體", winner:"黃雨婷/盛李豪", time:"2024.7.27"}, {event:"跳水女子雙人3米板", winner:"陳藝文/昌雅妮", time:"2024.7.27"}, {event:"男子10米氣手槍", winner:"謝瑜", time:"2024.7.28"}, {event:"男子雙人10米跳臺", winner:"練俊杰/楊昊", time:"2024.7.28"}]} } }).mount('#app')</script>【例8-10】

循環(huán)嵌套的列表渲染實例代碼：圖8-8嵌套循環(huán)實例效果圖Vue的v-bind指令用來對HTML屬性進行數(shù)據(jù)綁定，通過綁定的響應式數(shù)據(jù)可以動態(tài)地修改屬性值。綁定的屬性可以HTML標簽的原生屬性，也可以是組件自定義的標簽屬性。書寫語法在綁定屬性前添加前綴“v-bind：”或簡寫“：”即可。如：<buttonv-bind:disabled="isDisabled">上傳</button><child:custom-prop="parentValue"></child>其中：button的原生屬性disabled綁定響應式數(shù)據(jù)isDisabled，

組件child的custom-prop屬性綁定響應式數(shù)據(jù)parentValue。樣式綁定條件渲染<style> .card{ background-color:#f5ffff; border-radius:6px6px00; width:230px; height:270px; text-align:center; vertical-align:bottom; padding:15px00; } .danger{ color:red; background-image:url(img/error.webp); background-size:180px; background-repeat:no-repeat; background-position:25px70px; }</style><scriptsrc="/vue@3/dist/vue.global.js"></script><divid="app"><div:class="classObject">警告：錯誤！！</div></div>

【例8-11】

樣式綁定對象實例代碼：圖8-9樣式綁定實例效果圖<script> Vue.createApp({ data(){ return{ classObject:{ 'card':true, 'danger':true } } } }).mount('#app') </script>條件渲染<divid="app"> <div:class="[cardClass,dangerClass]">警告：錯誤！??！</div> </div> <script> Vue.createApp({ data(){ return{ cardClass:'card', dangerClass:'danger' } } }).mount('#app') </script>【例8-12】

樣式綁定數(shù)組實例代碼：圖8-9樣式綁定實例效果圖Vue提供了很好的數(shù)據(jù)雙向綁定方式，可以方便的處理表單輸入。v-model指令將響應式數(shù)據(jù)綁定到表單的輸入值，并在表單輸入值變化時，自動同步到響應式數(shù)據(jù)中。需要注意的是，v-model的輸入過程并不包括漢字的拼寫過程。另外，v-model并不能辨識元素上的初始值，如value、selected、checked等.若要將表單的初始值與響應數(shù)據(jù)同步需要給響應式數(shù)據(jù)賦初始值。表單輸入綁定條件渲染<inputtype="text"v-model="uname"/><div>你好:{{uname}}</div>data(){ return{uname:"同學" }}【例8-13】

表單輸入綁定實例代碼：圖8-10表單輸入綁定實例效果圖條件渲染<spanv-for="(value,key)inmedalList"> <inputtype="checkbox"v-bind:value="value"v-model="checks"/> <label>{{value}}</label></span><p>選擇結果：{{checks}}</p>data(){ return{ checks:[], medalList:{gold:"金牌",silver:"銀牌",bronze:"銅牌"} }}【例8-14】

多選框輸入綁定實例代碼：圖8-11多選框輸入綁定實例效果圖Vue為v-model提供了修飾符用來處理輸入值或?qū)ΡO(jiān)聽事件細化。語法為指令后用點語法加修飾符，如：v-model.lazy。常用的修飾符有：.lazy修飾符用來可以將對文本輸入的監(jiān)聽事件改為change事件，響應式數(shù)據(jù)的更新會在每次輸入確定的change事件發(fā)生時而不會在每個字符輸入時更新。.number修飾符可以將輸入內(nèi)容從字符串自動轉(zhuǎn)化為數(shù)值，若不能轉(zhuǎn)化成功則保持原值。.trim修飾符可以將輸入內(nèi)容兩端的空格去除，在用戶名密碼等需要對輸入內(nèi)容進行校驗的場景中非常實用。表單輸入綁定修飾符計算屬性是Vue組件的一個選項，使用computed來聲明，接收一個對象值。選項式API風格的計算屬性是可以根據(jù)響應式數(shù)據(jù)（data或props中的數(shù)據(jù)）動態(tài)計算并緩存的派生值。在計算屬性中定義方法進行邏輯處理，方法通過this獲取響應式數(shù)據(jù)、進行計算，通過return語句返回一個派生值，并對返回的派生值進行緩存。只要響應式數(shù)據(jù)不變化，訪問計算屬性返回的都是緩存中保存的先前的計算結果，只有響應式數(shù)據(jù)發(fā)生變化時，計算屬性中相應的方法會自動重新計算并更新緩存，所有綁定該計算屬性的視圖都會被自動刷新。計算屬性中可以定義多個方法進行不同的邏輯處理，如數(shù)據(jù)格式化、條件選擇等邏輯問題。應盡量避免在計算屬性中對響應式數(shù)據(jù)進行修改，否則會引起無限更新等異常問題。計算屬性條件渲染<divid="app"> <inputv-model="message"/> <div>響應式數(shù)據(jù)message：<span>{{message}}</span></div> <div>計算屬性倒序的結果：<span>{{reversemessage}}</span></div> </div> <script> constapp=Vue.createApp({ data(){ return{ message:"開始Vue學習.." } }, computed:{ reversemessage(){ returnthis.message.split('').reverse().join('') } } }) app.mount("#app") </script>【例8-15】

計算屬性實例代碼：圖8-12計算屬性實例效果圖事件處理是交互式Web的核心功能，Vue中可以通過v-on指令來給DOM元素綁定事件監(jiān)聽器，用法為：v-on:event="handle"其中：v-on指令可縮寫為@。event：事件類型，當DOM元素為普通HTML元素時，event為DOM的原生事件，若DOM為自定義組件，event是子組件的自定義事件。handle：事件處理器，事件觸發(fā)時被執(zhí)行。事件處理器的值可以是內(nèi)聯(lián)的JavaScript表達式，也可以是methods中聲明的事件處理器。原始DOM事件的事件處理器定義與DOM事件回調(diào)函數(shù)一樣，只接收一個事件對象作為參數(shù)。事件處理條件渲染<divid="app"> <div>count1<buttonv-on:click="count1++">+1</button>={{count1}}</div> <div>count2<button@click="clickHandle">+2</button>={{count2}}</div></div><script> Vue.createApp({ data(){ return{ count1:0, count2:0 } }, methods:{ clickHandle(e){ this.count2+=2 } } }).mount("#app")</script>【例8-16】事件處理實例代碼：圖8-13事件處理實例效果圖組件是Vue框架的核心概念之一，是可以復用的Vue實例，擁有自己的模板、邏輯和樣式，使用組件可以將UI分割成獨立、可復用的部分，每一部分擁有獨立的邏輯。如圖所示，頁面頭部、側邊、內(nèi)容區(qū)，尾部等多個頁面要用到一樣的就可以做成組件，提高了代碼的復用率。組件可以與普通HTML元素一樣嵌套使用形成樹狀結構，如圖8-14所示。事件修飾符03組件基礎知識組件是Vue框架的核心概念之一，是可以復用的Vue實例，擁有自己的模板、邏輯和樣式，使用組件可以將UI分割成獨立、可復用的部分，每一部分擁有獨立的邏輯。頁面中，頁面頭部、側邊、內(nèi)容區(qū)，尾部等多個頁面要用到一樣的就可以做成組件，提高了代碼的復用率。組件可以與普通HTML元素一樣嵌套使用形成樹狀結構，如圖8-14所示。組件簡介圖8-14Vue組件結構圖不使用構建步驟的Vue應用中，組件以包含組件選項的JavaScript對象方式定義，通常以常量方式定義組件，如果采用ES模塊語法，則可以采用export導出組件。右側代碼式采用常量方式定義組件。組件的定義constcomponentA={ data(){ return{ clickTimes:0 } }, template:`

按鈕<button@click="clickTimes++">單擊</button>次數(shù)：{{clickTimes}}`};組件在使用前必須先進行注冊，注冊的方式有兩種：全局注冊和局部注冊。全局注冊是Vue應用實例調(diào)用component()方法注冊組件。全局注冊的組件在該Vue應用實例中全局可用。component()可以鏈式調(diào)用注冊多個組件，全局組件可以在該應用實例的子組件中彼此使用。全局注冊代碼如下：ponent('componentName',component)局部注冊是在需要使用組件的父組件components選項中注冊。局部注冊的組件只能在父組件中使用，任何子組件中都不可用。components:{componentName:component}組件注冊組件注冊后就可以像HTML元素一樣在使用范圍內(nèi)進行使用，其標簽名稱就是注冊的組件名，標簽應采用成對標簽方式顯式的寫出關閉標簽，否則可能會產(chǎn)生標簽解析錯誤。HTML中有一些標簽對子元素有特殊限制，如<ul>、<table>、<select>等，組件作為這些標簽的子元素可能會被忽略從而造成錯誤。如果組件必須作為這些標簽的子元素時，可以通過限定子元素的is屬性將該元素動態(tài)的改變成組件。需要注意的是is的屬性值必須添加Vue：前綴，否則HTML原生元素無法被解析為Vue組件。組件使用Vue組件代碼有選項式和組合式兩種不同的API風格兩種風格的API實際上是在同一套底層系統(tǒng)的基礎上實現(xiàn)的不同接口兩者的應用是相通的，都能覆蓋大部分的應用場景。選項式API以“組件實例”的概念為中心，更符合面向?qū)ο蟮某绦蛟O計理念，初學者而言更為友好。組合式API更加自由，是在函數(shù)作用域內(nèi)定義響應式狀態(tài)變量，并獲得狀態(tài)組合，需要對Vue的響應式系統(tǒng)有較深的理解才能靈活使用。組件代碼API風格選項式API風格是用對象的方式描述組件的邏輯，用屬性和方法的方式定義組件的選項，如data、methods、computed等，在內(nèi)部函數(shù)中，這些屬性可以通過this獲取選項式API風格<divid="app">

計數(shù)器：{{count}}<button@click="increment"style="margin-left:10px;">單擊</button></div><script> constRootComponent={ data(){ return{ count:0 } }, methods:{ increment(e){ this.count++ } } }; Vue.createApp(RootComponent).mount('#app')</script>組合式API風格是Vue3新增的組件風格，用函數(shù)的方式描述組件的邏輯，setup（）作為組件的入口，在組件實例創(chuàng)建之前被調(diào)用，setup函數(shù)返回一個對象，該對象的屬性和方法會被暴露給組件模板。組合式API風格<script>import{ref}from'vue'exportdefault{setup(){