網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第7章jQuery基礎(chǔ)知識(shí)CONTENT目錄jQuery介紹01基本選擇器02高級(jí)選擇器03事件處理04內(nèi)容處理05樣式處理06進(jìn)階應(yīng)用07擴(kuò)展知識(shí)08習(xí)題0901jQuery介紹7.1jQuery介紹jQuery的作用簡(jiǎn)化DOM操作跨瀏覽器兼容安全性特點(diǎn)禁止訪問本地硬盤不允許對(duì)網(wǎng)絡(luò)中的文本修改或刪除jQuery的特性鏈?zhǔn)秸{(diào)用強(qiáng)大選擇器事件處理AJAX下載安裝例7-1一個(gè)最簡(jiǎn)單的jQuery程序$(document).ready()確保DOM加載后執(zhí)行$符號(hào)是jQuery的別名$()是合法的函數(shù)或?qū)ο竺Q，它等價(jià)于jQuery()例7-1執(zhí)行效果02基本選擇器常用選擇器jQuery代碼說明$("#block")選擇id為block的首個(gè)元素$(".block")選擇class為block的所有元素$("div")選擇所有div標(biāo)簽的元素$("span,#block")選擇所有span標(biāo)簽和id為block的元素$("span#block")選擇所有span標(biāo)簽下面id為block的元素標(biāo)簽選擇器舉例標(biāo)簽選擇器$("p").css("color","red");id選擇器??$("#myElement").css("color","red");??類選擇器$(".myClass").css("color","red");03高級(jí)選擇器過濾器選擇器jQuery選擇器說明:first選擇集合中的第一個(gè)元素。:last選擇集合中的最后一個(gè)元素。:eq(index)選擇集合中指定索引的元素。:gt(index)選擇集合中索引大于指定索引的元素。:lt(index)選擇集合中索引小于指定索引的元素。過濾器選擇器jQuery選擇器說明:even選擇集合中索引為偶數(shù)的元素。:odd選擇集合中索引為奇數(shù)的元素。:visible選擇當(dāng)前可見的元素。:hidden選擇當(dāng)前隱藏的元素。:contains(text)選擇包含指定文本的元素。:has(selector)選擇包含子元素的元素。過濾器選擇器jQuery選擇器說明:parent選擇有子元素的元素。:empty選擇沒有子元素的元素。:not(selector)選擇不匹配指定選擇器的元素。屬性選擇器jQuery選擇器說明[attribute]選擇具有指定屬性的元素。[attribute=value]選擇具有指定屬性值等于指定值的元素。[attribute~=value]選擇具有指定屬性值包含指定值的元素。[attribute|=value]選擇具有指定屬性值以指定值開頭的元素。[attribute^=value]選擇具有指定屬性值以指定值開頭的元素。[attribute$=value]選擇具有指定屬性值以指定值結(jié)尾的元素。[attribute*=value]選擇具有指定屬性值包含指定值的元素。偽類選擇器jQuery選擇器說明:focus選擇當(dāng)前獲得焦點(diǎn)的元素。:hover選擇鼠標(biāo)懸停在其上的元素。:active選擇當(dāng)前被激活的元素。:focus選擇當(dāng)前獲得焦點(diǎn)的元素。:focus-within選擇當(dāng)前或其子元素獲得焦點(diǎn)的元素。:target選擇當(dāng)前URL中的目標(biāo)元素。:lang(language)選擇具有指定語言的元素。偽元素選擇器jQuery選擇器說明::before選擇元素的開始偽元素。::after選擇元素的結(jié)束偽元素。::first-letter選擇元素的第一個(gè)字母。::first-line選擇元素的第一行。::selection選擇用戶選中的文本。04事件處理例7-2綁定事件的jQuery程序$符號(hào)是jQuery的別名jQuery常用事件事件名/方法名功能描述click單擊事件：當(dāng)用戶單擊某個(gè)元素時(shí)觸發(fā)。dblclick雙擊事件：當(dāng)用戶雙擊某個(gè)元素時(shí)觸發(fā)。focus獲取焦點(diǎn)事件：當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)。keydown鍵盤按下事件：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)。keyup鍵盤抬起事件：當(dāng)用戶釋放鍵盤上的任意鍵時(shí)觸發(fā)。mousedown鼠標(biāo)按下事件：當(dāng)用戶按下鼠標(biāo)按鈕時(shí)觸發(fā)。mouseup鼠標(biāo)抬起事件：當(dāng)用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。submit提交事件：當(dāng)表單提交時(shí)觸發(fā)。blur失去焦點(diǎn)事件：當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)。change變化事件：當(dāng)元素的內(nèi)容發(fā)生變化時(shí)觸發(fā)。解綁事件觸發(fā)事件事件委托自定義事件與鏈?zhǔn)秸{(diào)用05內(nèi)容處理一般屬性讀寫class讀寫事件委托內(nèi)容讀寫06樣式處理標(biāo)簽樣式讀寫標(biāo)簽尺寸讀寫事件委托標(biāo)簽位置計(jì)算計(jì)算位置：使用

.offset()

方法獲取元素相對(duì)于文檔的偏移量。07進(jìn)階應(yīng)用批量操作這個(gè)例子中的each內(nèi)部匿名函數(shù)中的$(this)訪問到的是當(dāng)前正在處理的div元素，each會(huì)自動(dòng)的遍歷所有被前面選擇器(div)選中的元素，并依次調(diào)用后面的匿名函數(shù)。表單驗(yàn)證動(dòng)畫處理類似的動(dòng)畫方法還有hide/show、fadeIn/fadeOut、slideDown/slideUp/slideToggle、animate等，具體用法可以查閱7.8.2提到的手冊(cè)和在線教程。視頻控制這個(gè)例子中的get(0)與之前7.1.2一節(jié)中的[0]是等價(jià)的，都可以訪問到原始的DOM元素，然后就可以調(diào)用DOM對(duì)象原有的方法了。標(biāo)簽處理類似的能直接改變DOM結(jié)構(gòu)的方法還有append/prepend、after/before、remove/empty等，適當(dāng)?shù)乩眠@些方法，可以在不使用網(wǎng)絡(luò)流量的情況下對(duì)頁面內(nèi)容進(jìn)行局部或徹底的修改調(diào)整。案例改寫利用本章所學(xué)的jQuery語法，我們可以對(duì)之前6.12.1中的交互案例進(jìn)行改寫，改寫后的案例文件夾為pra07。關(guān)鍵部分代碼及注釋見教材7.7.608擴(kuò)展知識(shí)AJAX動(dòng)態(tài)加載AJAXAJAX即“AsynchronousJavaScriptAndXML”（異步JavaScript和XML）執(zhí)行邏輯??來避免整個(gè)頁面刷新帶來的流量大、速度慢、延時(shí)高等問題??基本原理它通過在瀏覽器端運(yùn)行特殊的JavaScript腳本，動(dòng)態(tài)地修改頁面中的局部?jī)?nèi)容，來避免整個(gè)頁面刷新帶來的流量大、速度慢、延時(shí)高等問題。例7-4一個(gè)最簡(jiǎn)單的AJAX程序.load()動(dòng)態(tài)加載content.htm的內(nèi)容到指定元素中，這個(gè)過程可以在F12的network標(biāo)簽觀察到數(shù)據(jù)流。文檔參考網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程第8章Vue框架CONTENT目錄Vue簡(jiǎn)介和環(huán)境搭建01Vue3基礎(chǔ)語法

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

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

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

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

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

<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條件渲染實(shí)例效果圖【例8-6】

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

in是分隔符，也可以用of替代；index是當(dāng)前數(shù)組元素索引名稱，可自定義；arrayname是數(shù)據(jù)源數(shù)組，需要在根組件的響應(yīng)式數(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:["奧運(yùn)新聞","國際局勢(shì)","國內(nèi)熱點(diǎn)"] } } }) app.mount("#mydiv") </script>【例8-7】

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

比賽項(xiàng)目:"10米氣步槍混合團(tuán)體",

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

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

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

范圍值列表渲染實(shí)例代碼：圖8-7范圍值列表循環(huán)實(shí)例效果圖v-for指令可以實(shí)現(xiàn)多層循環(huán)嵌套，其內(nèi)層元素的作用域可以訪問父級(jí)作用域，反之則不可以。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米氣步槍混合團(tuán)體", winner:"黃雨婷/盛李豪", time:"2024.7.27"}, {event:"跳水女子雙人3米板", winner:"陳藝文/昌雅妮", time:"2024.7.27"}, {event:"男子10米氣手槍", winner:"謝瑜", time:"2024.7.28"}, {event:"男子雙人10米跳臺(tái)", winner:"練俊杰/楊昊", time:"2024.7.28"}]} } }).mount('#app')</script>【例8-10】

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

組件child的custom-prop屬性綁定響應(yīng)式數(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">警告：錯(cuò)誤??！</div></div>

【例8-11】

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

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

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

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

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

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

計(jì)數(shù)器：{{count}}<button@click="increment"style="margin-left:10px;">單擊</button></div><script> constRootComponent={ data(){ return{ count:0