Vue.js前端開發實戰（第2版） 課件 第2章 Vue.js開發基礎_第1頁
Vue.js前端開發實戰（第2版） 課件 第2章 Vue.js開發基礎_第2頁
Vue.js前端開發實戰（第2版） 課件 第2章 Vue.js開發基礎_第3頁
Vue.js前端開發實戰（第2版） 課件 第2章 Vue.js開發基礎_第4頁
Vue.js前端開發實戰（第2版） 課件 第2章 Vue.js開發基礎_第5頁
已閱讀5頁，還剩211頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第2章Vue.js開發基礎《Vue.js前端開發實戰（第2版）》學習目標/Target掌握單文件組件，能夠創建并使用單文件組件掌握數據綁定，能夠定義數據并將數據渲染到頁面中掌握屬性綁定指令，能夠靈活運用v-bind指令給目標元素的屬性動態綁定值掌握內容渲染指令，能夠靈活運用v-text和v-html指令將字符串渲染到頁面中掌握事件綁定指令，能夠靈活運用v-on指令給目標元素綁定事件學習目標/Target掌握雙向數據綁定指令，能夠靈活運用v-model指令在表單元素上實現數據的

雙向綁定掌握條件渲染指令，能夠靈活運用v-if、v-show指令根據不同的條件渲染不同

的標簽掌握列表渲染指令，能夠靈活運用v-for指令將數組、對象等中的數據渲染到頁面中掌握事件對象，能夠靈活運用事件對象獲取和修改DOM元素的屬性學習目標/Target掌握計算屬性，能夠靈活運用計算屬性實時監聽數據的變化，當所依賴的數據

發生變化時重新計算值掌握樣式綁定，能夠靈活運用v-bind綁定class和style屬性實現元素樣式的設置熟悉事件修飾符，能夠闡述常見的事件修飾符掌握偵聽器，能夠靈活運用偵聽器監聽數據的變化并進行相應的操作章節概述/Summary在搭建好Vue開發環境后，要想使用Vue開發實際項目，必須先學習Vue基礎知識。只有掌握Vue框架的基礎知識后，才能根據實際需求游刃有余地進行項目開發。本章將詳細講解Vue開發基礎。目錄/Contents2.12.22.3單文件組件數據綁定指令2.4事件對象2.5事件修飾符目錄/Contents2.62.72.8計算屬性偵聽器樣式綁定2.9階段案例——學習計劃表單文件組件2.1掌握單文件組件，能夠創建并使用單文件組件2.1單文件組件

先定一個小目標！什么是單文件組件？2.1單文件組件在第1章中使用Vite創建Vue項目后，目錄結構中包含一些擴展名為.vue的文件，每個.vue文件都可用來定義一個單文件組件。Vue中的單文件組件是Vue組件的文件格式。2.1單文件組件010203123模板用于搭建當前組件的DOM結構，其代碼寫在<template>標簽中。模板樣式是指通過CSS代碼為當前組件設置樣式，其代碼寫在<style>標簽中。樣式邏輯是指通過JavaScript代碼處理組件的數據與業務，其代碼寫在<script>標簽中。邏輯每個單文件組件由模板、樣式和邏輯3個部分構成。2.1單文件組件<template><!--此處編寫組件的結構--></template><script>/*此處編寫組件的邏輯*/</script><style>/*此處編寫組件的樣式*/</style>2.1單文件組件演示如何定義一個基本的單文件組件。步驟1打開命令提示符，切換到D:\vue\chapter02目錄，在該目錄下執行如下命令，創建項目。步驟3步驟4步驟2步驟5演示單文件組件的使用方法yarncreatevitevue-demo--templatevue項目創建完成后，執行如下命令進入項目目錄，啟動項目。cdvue-demoyarnyarndev項目啟動后，可以使用URL地址:5173/進行訪問。2.1單文件組件演示單文件組件的使用方法步驟1步驟3步驟4步驟2步驟5使用VSCode編輯器打開D:\vue\chapter02\vue-demo目錄。2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1將src\style.css文件中的樣式代碼全部刪除，從而避免項目創建時自帶的樣式代碼影響本案例的實現效果。2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1創建src\components\Demo.vue文件，該文件是Demo組件。<template><divclass="demo">Demo組件</div></template><style>.demo{font-size:22px;font-weight:bold;}</style>2.1單文件組件演示單文件組件的使用方法步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Demo.vue'2.1單文件組件保存上述代碼后，在瀏覽器中訪問:5173/，Demo組件的頁面效果如下圖所示。2.1單文件組件數據綁定2.2掌握數據綁定，能夠定義數據并將數據渲染到頁面中2.2.1初識數據綁定

先定一個小目標！2.2.1初識數據綁定Vue通過數據綁定實現了數據與頁面相分離，從而實現了數據驅動視圖的效果。即將頁面中的數據分離出來，放到組件的<script>標簽中，通過程序操作數據，并且當數據改變時，頁面會自動發生改變。2.2.1初識數據綁定數據綁定分為定義數據和輸出數據。

由于數據和頁面是分離的，在實現數據顯示之前，需要先在<script>標簽中定義組件所需的數據。定義數據輸出數據Vue為開發者提供了Mustache語法（又稱為雙大括號語法），將數據輸出到頁面中。2.2.1初識數據綁定定義數據的語法格式如下。1.定義數據<script>exportdefault{setup(){return{

數據名:數據值,……}}}</script>2.2.1初識數據綁定為了讓代碼更簡潔，Vue3提供了setup語法糖（SyntacticSugar），使用它可以簡化上述語法，提高開發效率。使用setup語法糖來定義數據的語法格式如下。<scriptsetup>const數據名=數據值</script>2.2.1初識數據綁定Vue為開發者提供了Mustache語法（又稱為雙大括號語法），使用該語法時相當于在模板中放入占位符，其語法格式如下。2.輸出數據{{數據名}}當頁面渲染時，模板中的{{數據名}}會被替換為實際的數據2.2.1初識數據綁定在Mustache語法中還可以將表達式的值作為輸出內容。表達式的值可以是字符串、數字等類型，示例代碼如下。{{'HelloVue.js'}}{{number+1}}{{}}{{ok?'YES':'NO'}}{{'<div>HTML標簽</div>'}}2.2.1初識數據綁定步驟1演示數據綁定的實現步驟2創建src\components\Message.vue文件。<template>{{message}}</template><scriptsetup>constmessage='不積跬步，無以至千里'</script>用于在模板中輸出message2.2.1初識數據綁定演示數據綁定的實現步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Message.vue'保存上述代碼后，在瀏覽器中訪問:5173/，數據綁定的頁面效果如下圖所示。2.2.1初識數據綁定2.2.1初識數據綁定多學一招：將Vue引入HTML頁面中前面學習的方式是通過Vite創建一個新的項目，這個項目中不僅有Vue，而且整合了一系列輔助開發的工具。其實Vue的使用方式非常靈活，它還提供了另一種使用方式，就是將Vue引入HTML頁面中。但這種方式只能使用Vue的核心功能，所以只適合開發一些簡單的頁面，在實際開發中一般不用這種方式。2.2.1初識數據綁定步驟1演示如何將Vue引入HTML頁面中創建D:\vue\chapter02\helloworld.html文件，在該文件中通過<script>標簽引入Vue。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>HelloWorld案例</title><scriptsrc="/vue@3/dist/vue.global.js"></script></head><body></body></html>步驟3步驟22.2.1初識數據綁定在頁面中定義一個用于被Vue應用實例控制的DOM區域，使開發者可以將數據填充到該DOM區域中。<divid="app"><p>{{message}}</p></div>步驟1步驟3步驟2演示如何將Vue引入HTML頁面中2.2.1初識數據綁定演示如何將Vue引入HTML頁面中在</body>結束標簽前編寫代碼，創建Vue應用實例。<script>constvm=Vue.createApp({setup(){return{message:'HelloWorld!'}}})vm.mount('#app')</script>步驟1步驟3步驟22.2.1初識數據綁定通過瀏覽器訪問helloworld.html，將Vue引入HTML頁面的效果如下圖所示。掌握響應式數據綁定，能夠定義數據并將數據渲染到頁面中2.2.2響應式數據綁定

先定一個小目標！2.2.2響應式數據綁定如果想要實現頁面中數據的更新，則需要進行響應式數據綁定，也就是將數據定義成響應式數據。Vue為開發者提供了如下函數用于定義響應式數據。ref()函數reactive()函數toRef()函數toRefs()函數2.2.2響應式數據綁定響應式數據=ref(數據)1.ref()函數ref()函數用于將數據轉換成響應式數據，其參數為數據，返回值為轉換后的響應式數據。使用ref()函數定義響應式數據的語法格式如下。響應式數據.value=新值如果需要更改響應式數據的值，可以使用如下語法格式進行修改。步驟1演示ref()函數的使用方法步驟2創建src\components\Ref.vue文件。<template>{{message}}</template><scriptsetup>import{ref}from'vue'constmessage=ref('會當凌絕頂，一覽眾山小')setTimeout(()=>{message.value='鍥而不舍，金石可鏤'},2000)</script>2.2.2響應式數據綁定演示ref()函數的使用方法步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Ref.vue'2.2.2響應式數據綁定保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應式數據綁定等待2秒后的頁面效果如下圖所示。2.2.2響應式數據綁定2.2.2響應式數據綁定2.reactive()函數reactive()函數用于創建一個響應式對象或數組，將普通的對象或數組作為參數傳給該函數即可。使用reactive()函數定義響應式數據的語法格式如下。響應式對象或數組=reactive(普通的對象或數組)步驟1演示reactive()函數的使用方法步驟2創建src\components\Reactive.vue文件。<template>{{obj.message}}</template><scriptsetup>import{reactive}from'vue'constobj=reactive({message:'不畏浮云遮望眼，自緣身在最高層'})setTimeout(()=>{obj.message='欲窮千里目，更上一層樓'},2000)</script>2.2.2響應式數據綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Reactive.vue'2.2.2響應式數據綁定演示reactive()函數的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應式數據綁定等待2秒后的頁面效果如下圖所示。2.2.2響應式數據綁定2.2.2響應式數據綁定3.toRef()函數toRef()函數用于將響應式對象中的單個屬性轉換為響應式數據。使用toRef()函數定義響應式數據的語法格式如下。響應式數據=toRef(響應式對象,'屬性名')toRef()函數的第1個參數是響應式對象，第2個參數是待轉換的屬性名，返回值為轉換后的響應式數據。步驟1演示toRef()函數的使用方法步驟2創建src\components\ToRef.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRef}from'vue'constobj=reactive({message:'黑發不知勤學早，白首方悔讀書遲'})constmessage=toRef(obj,'message')setTimeout(()=>{message.value='少壯不努力，老大徒傷悲'},2000)</script>2.2.2響應式數據綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ToRef.vue'2.2.2響應式數據綁定演示toRef()函數的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應式數據綁定等待2秒后的頁面效果如下圖所示。2.2.2響應式數據綁定2.2.2響應式數據綁定4.toRefs()函數toRefs()函數用于將響應式對象中的所有屬性轉換為響應式數據。使用toRefs()函數定義響應式數據的語法格式如下。所有屬性組成的對象=toRefs(響應式對象)步驟1演示toRefs()函數的使用方法步驟2創建src\components\ToRefs.vue文件。<template><div>message的值：{{message}}</div><div>obj.message的值：{{obj.message}}</div></template><scriptsetup>import{reactive,toRefs}from'vue'constobj=reactive({message:'盛年不重來，一日難再晨'})let{message}=toRefs(obj)setTimeout(()=>{message.value='及時當勉勵，歲月不待人'},2000)</script>2.2.2響應式數據綁定步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ToRefs.vue'2.2.2響應式數據綁定演示toRefs()函數的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。2.2.2響應式數據綁定等待2秒后的頁面效果如下圖所示。2.2.2響應式數據綁定指令2.3掌握內容渲染指令，能夠靈活運用v-text和v-html指令將字符串渲染到頁面中2.3.1內容渲染指令

先定一個小目標！內容渲染指令用于渲染DOM元素的內容。常見的內容渲染指令如下。v-textv-html2.3.1內容渲染指令<標簽名v-text="數據名"></標簽名>1.v-textv-text用于渲染DOM元素的文本內容，如果文本內容中包含HTML標簽，那么瀏覽器不會對其進行解析。v-text的語法格式如下。2.3.1內容渲染指令步驟1演示v-text的使用方法步驟2創建src\components\VText.vue文件。<template><divv-text="message"></div></template><scriptsetup>constmessage='<span>咬定青山不放松，立根原在破巖中</span>'</script>2.3.1內容渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VText.vue'2.3.1內容渲染指令演示v-text的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-text的運行結果如下圖所示。2.3.1內容渲染指令<標簽名v-html="數據名"></標簽名>2.v-html在使用Vue進行內容渲染時，如果內容中包含HTML標簽并且希望這些標簽被瀏覽器解析，則可以使用v-html。v-html用于渲染DOM元素的HTML內容，其用法與v-text相似。v-html的語法格式如下。2.3.1內容渲染指令步驟1演示v-html的使用方法步驟2創建src\components\VHtml.vue文件。<template><divv-html="html"></div></template><scriptsetup>consthtml='<strong>千磨萬擊還堅勁，任爾東西南北風</strong>'</script>2.3.1內容渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VHtml.vue'2.3.1內容渲染指令演示v-html的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-html的運行結果如下圖所示。2.3.1內容渲染指令掌握屬性綁定指令，能夠靈活運用v-bind指令給目標元素的屬性動態綁定值2.3.2 屬性綁定指令

先定一個小目標！<標簽名v-bind:屬性名="數據名"></標簽名>在Vue開發中，有時需要綁定DOM元素的屬性，從而更好地控制屬性的值，此時可以使用屬性綁定指令v-bind來實現。v-bind的語法格式如下。2.3.2 屬性綁定指令<div:id="'list'+index"></div>v-bind還支持將屬性與字符串拼接表達式綁定，示例代碼如下。步驟1演示v-bind的使用方法步驟2創建src\components\VBind.vue文件。<template><p><inputtype="text"v-bind:placeholder="username"></p><p><inputtype="password":placeholder="password"></p></template><scriptsetup>constusername='請輸入用戶名'constpassword='請輸入密碼'</script>2.3.2 屬性綁定指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VBind.vue'2.3.2 屬性綁定指令演示v-bind的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-bind的運行結果如下圖所示。2.3.2 屬性綁定指令掌握事件綁定指令，能夠靈活運用v-on指令給目標元素綁定事件2.3.3事件綁定指令

先定一個小目標！<標簽名v-on:事件名="事件處理器"></標簽名>在Vue開發中，有時需要給DOM元素綁定事件，從而利用事件實現交互效果，這時可以利用事件綁定指令v-on來實現。v-on的語法格式如下。在上述語法格式中，事件名即DOM中的事件名，例如click、input、keyup等；事件處理器可以是方法名或內聯JavaScript語句。如果邏輯復雜，事件處理器建議使用方法名，方法需要在<script>標簽中定義；如果邏輯簡單，只有一行代碼，則可以使用內聯JavaScript語句。另外，v-on還有簡寫形式，可以將“v-on:事件名”簡寫為“@事件名”。2.3.3事件綁定指令步驟1演示v-on的使用方法步驟2創建src\components\VOn.vue文件。<template><button@click="showInfo">輸出信息</button></template><scriptsetup>constshowInfo=()=>{console.log('歡迎來到Vue.js的世界！')}</script>2.3.3事件綁定指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VOn.vue'2.3.3事件綁定指令演示v-on的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，單擊“輸出信息”按鈕后的頁面效果和控制臺如下圖所示。2.3.3事件綁定指令掌握雙向數據綁定指令，能夠靈活運用v-model指令在表單元素上實現數據的雙向綁定2.3.4 雙向數據綁定指令

先定一個小目標！<標簽名v-model="數據名"></標簽名>Vue為開發者提供了v-model指令來實現雙向數據綁定，使用它可以在input、textarea和select元素上創建雙向數據綁定，它會根據使用的元素自動選取對應的屬性和事件組合，負責監聽用戶的輸入事件并更新數據。v-model的語法格式如下。2.3.4 雙向數據綁定指令<inputv-model="info">v-model內部會為不同的元素綁定不同的屬性和事件，具體如下。textarea元素和text類型的input元素會綁定value屬性和input事件。checkbox類型的input元素和radio類型的input元素會綁定checked屬性和change事件。select元素會綁定value屬性和change事件。例如，使用v-model實現輸入框的值與變量保持同步，示例代碼如下。2.3.4 雙向數據綁定指令2.3.4 雙向數據綁定指令修飾符作用.number自動將用戶輸入的值轉換為數字類型.trim自動過濾用戶輸入的首尾空白字符.lazy在change事件而非input事件觸發時更新數據為了方便對用戶輸入的內容進行處理，v-model提供了3個修飾符。v-model的修飾符如下表所示。步驟1演示v-model的使用方法步驟2創建src\components\VModel.vue文件。<template>

請輸入姓名：<inputtype="text"v-model="username"><div>姓名是：{{username}}</div></template><scriptsetup>import{ref}from'vue'constusername=ref('zhangsan')</script>2.3.4 雙向數據綁定指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VModel.vue'2.3.4 雙向數據綁定指令演示v-model的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-model的初始頁面效果如下圖所示。2.3.4 雙向數據綁定指令在輸入框中輸入“xiaoming”，頁面效果如下圖所示。2.3.4 雙向數據綁定指令步驟1演示.number修飾符的使用方法在src\components\VModel.vue文件的<script>標簽中添加代碼，定義響應式數據n1和n2。constn1=ref(1)constn2=ref(2)步驟3步驟22.3.4 雙向數據綁定指令在src\components\VModel.vue文件的<template>標簽中添加代碼，通過v-model實現雙向數據綁定。<inputtype="text"v-model="n1">+<inputtype="text"v-model="n2">={{n1+n2}}步驟1步驟3步驟22.3.4 雙向數據綁定指令演示.number修飾符的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，未使用.number修飾符的初始頁面效果如下圖所示。2.3.4 雙向數據綁定指令改變n1的值為“198”，查看n1+n2的值。改變n1的值為“198”的頁面效果如下圖所示。2.3.4 雙向數據綁定指令修改輸入框的代碼，通過添加.number修飾符實現將用戶輸入的數字自動轉換成數字類型。<inputtype="text"v-model.number="n1">+<inputtype="text"v-model.number="n2">步驟1步驟3步驟22.3.4 雙向數據綁定指令演示.number修飾符的使用方法改變n1的值為“198”，查看n1+n2的值。使用.number修飾符后改變n1的值為“198”的頁面效果如下圖所示。2.3.4 雙向數據綁定指令掌握條件渲染指令，能夠靈活運用v-if、v-show指令根據不同的條件渲染不同的標簽2.3.5 條件渲染指令

先定一個小目標！在Vue中，當需要根據不同的判斷結果顯示不同的DOM元素時，可以通過條件渲染指令來實現。條件渲染指令可以輔助開發者按需控制DOM元素的顯示與隱藏。條件渲染指令如下。v-ifv-show2.3.5 條件渲染指令1.v-ifv-if是根據布爾值切換元素的顯示或隱藏狀態，本質是通過操作DOM元素來切換顯示狀態。當給定的值為true時，元素存在于DOM樹中；當給定的值為false時，元素從DOM樹中移除。2.3.5 條件渲染指令2.3.5 條件渲染指令直接給定一個條件，控制單個元素的顯示或隱藏v-if有兩種使用方式。<標簽名v-if="條件"></標簽名>通過v-if結合v-else-if、v-else來控制不同元素的顯示或隱藏<標簽名v-if="條件A">展示A</標簽名><標簽名v-else-if="條件B">展示B</標簽名><標簽名v-else>展示C</標簽名>步驟1演示v-if的使用方法步驟2創建src\components\VIf.vue文件。<template>

小明的學習評定等級為：

<pv-if="type==='A'">優秀</p><pv-else-if="type==='B'">良好</p><pv-else>差</p><button@click="type='A'">切換成優秀</button><button@click="type='B'">切換成良好</button><button@click="type='C'">切換成差</button></template><scriptsetup>import{ref}from'vue'consttype=ref('B')</script>2.3.5 條件渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VIf.vue'2.3.5 條件渲染指令演示v-if的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-if的初始頁面效果如下圖所示。2.3.5 條件渲染指令單擊“切換成優秀”按鈕后的頁面效果如下圖所示。2.3.5 條件渲染指令2.v-showv-show與v-if都用來決定某一個元素是否在頁面上顯示出來。v-show的原理是通過為元素添加或移除display:none樣式來實現元素的顯示或隱藏。當需要頻繁切換某個元素的顯示或隱藏時，使用v-show會更節省性能開銷；而當只需要切換一次顯示或隱藏時，使用v-if更合理。2.3.5 條件渲染指令步驟1演示v-show的使用方法步驟2創建src\components\VShow.vue文件。<template><pv-if="flag">通過v-if控制的元素</p><pv-show="flag">通過v-show控制的元素</p><button@click="flag=!flag">顯示/隱藏</button></template><scriptsetup>import{ref}from'vue'constflag=ref(true)</script>2.3.5 條件渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VShow.vue'2.3.5 條件渲染指令演示v-show的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，v-show的初始頁面效果如下圖所示。2.3.5 條件渲染指令單擊“顯示/隱藏”按鈕后的頁面效果如下圖所示。2.3.5 條件渲染指令掌握列表渲染指令，能夠靈活運用v-for指令將數組、對象等中的數據渲染到頁面中2.3.6 列表渲染指令

先定一個小目標！在開發購物應用時，為了方便用戶查找商品信息，通常會以商品列表的形式展示商品信息。在商品列表中，每件商品的結構都是相同的，如果每件商品的結構都要手動定義，會非常麻煩。為此，Vue提供了列表渲染指令v-for。開發者只需在模板中定義一件商品的結構，v-for便會根據開發者提供的數據自動渲染商品列表中所有的商品。2.3.6 列表渲染指令2.3.6 列表渲染指令根據數組渲染列表根據對象渲染列表根據數字渲染列表根據字符串渲染列表<標簽名v-for="(item,index)inarr"></標簽名><標簽名v-for="(item,name,index)inobj"></標簽名><標簽名v-for="(item,index)innum"></標簽名><標簽名v-for="(item,index)instr"></標簽名>使用v-for循環渲染列表<divv-for="iteminitems":key="item.id"></div>使用v-for（根據list數組中的元素）渲染列表后，當在list數組中刪除一個元素后，index會發生變化，v-for會重新渲染列表，導致性能下降。為了給v-for一個提示，以便它能跟蹤每個節點的身份，從而對現有元素進行重用和重新排序，建議通過key屬性為列表中的每一項提供具有唯一性的值，示例代碼如下。2.3.6 列表渲染指令步驟1演示使用v-for根據一維數組渲染列表步驟2創建src\components\VFor1.vue文件。<template><divv-for="(item,index)inlist":key="index">

索引是：{{index}}---元素的內容是：{{item}}</div></template><scriptsetup>import{reactive}from'vue'constlist=reactive(['HTML','CSS','JavaScript'])</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VFor1.vue'2.3.6 列表渲染指令演示使用v-for根據一維數組渲染列表保存上述代碼后，在瀏覽器中訪問:5173/，根據一維數組渲染列表的頁面效果如下圖所示。2.3.6 列表渲染指令步驟1演示使用v-for根據對象數組渲染列表步驟2創建src\components\VFor2.vue文件。<template><divv-for="iteminlist":key="item.id">id是：{{item.id}}---元素的內容是：{{item.message}}</div></template><scriptsetup>import{reactive}from'vue'constlist=reactive([{id:1,message:'梅',},{id:2,message:'蘭',},{id:3,message:'竹',},{id:4,message:'菊',}])</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VFor2.vue'2.3.6 列表渲染指令演示使用v-for根據對象數組渲染列表保存上述代碼后，在瀏覽器中訪問:5173/，根據對象數組渲染列表的頁面效果如下圖所示。2.3.6 列表渲染指令步驟1演示使用v-for根據對象渲染列表步驟2創建src\components\VFor3.vue文件。<template><divv-for="(value,name)inuser":key="name">

屬性名是：{{name}}---屬性值是：{{value}}</div></template><scriptsetup>import{reactive}from'vue'constuser=reactive({id:11,name:'小明',gender:'男'})</script>2.3.6 列表渲染指令步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/VFor3.vue'2.3.6 列表渲染指令演示使用v-for根據對象渲染列表保存上述代碼后，在瀏覽器中訪問:5173/，根據對象渲染列表的頁面效果如下圖所示。2.3.6 列表渲染指令事件對象2.4掌握事件對象，能夠靈活運用事件對象獲取和修改DOM元素的屬性2.4事件對象

先定一個小目標！什么是事件對象？2.4事件對象事件對象是在事件觸發時產生的對象，該對象保存了事件觸發時的相關信息。事件對象有以下兩種獲取方式。通過事件方法的參數獲取事件對象通過$event獲取事件對象2.4事件對象<template><button@click="greet">Greet</button></template><scriptsetup>constgreet=event=>console.log(event)</script>1.通過事件方法的參數獲取事件對象在v-on綁定的用于處理事件的方法中，可以接收到一個參數，這個參數就是事件對象，示例代碼如下。2.4事件對象<template><button@click="change($event)">change</button></template><scriptsetup>constchange=event=>console.log(event)</script>2.通過$event獲取事件對象$event是Vue提供的內置變量，使用它可以獲取事件對象，示例代碼如下。2.4事件對象步驟1演示事件對象的使用方法步驟2創建src\components\EventObject.vue文件。<template><div>count的值為：{{count}}</div><button@click="addCount">count+1</button></template><scriptsetup>import{ref}from'vue'constcount=ref(1)constaddCount=event=>{count.value++if(count.value%2===0){event.target.style.border='3pxdotted'}else{event.target.style.border='3pxsolid'}}</script>2.4事件對象步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/EventObject.vue'演示事件對象的使用方法2.4事件對象保存上述代碼后，在瀏覽器中訪問:5173/，通過事件方法的參數獲取事件對象的頁面效果如下圖所示。2.4事件對象單擊“count+1”按鈕后的頁面效果如下圖所示。2.4事件對象再次單擊“count+1”按鈕后的頁面效果如下圖所示。2.4事件對象步驟1演示通過$event獲取事件對象的方式步驟2修改src\components\EventObject.vue文件，編寫addCountN()方法。constaddCountN=(n,event)=>{count.value+=nif(count.value%2===0){event.target.style.border='3pxdotted'}else{event.target.style.border='3pxsolid'}}2.4事件對象步驟1步驟2修改頁面結構代碼，增加一個按鈕。<button@click="addCountN(3,$event)">count+n</button>演示通過$event獲取事件對象的方式2.4事件對象保存上述代碼后，在瀏覽器中訪問:5173/，通過$event獲取事件對象的頁面效果如下圖所示。2.4事件對象單擊“count+n”按鈕后的頁面效果如下圖所示。2.4事件對象再次單擊“count+n”按鈕后的頁面效果如下圖所示。2.4事件對象事件修飾符2.5熟悉事件修飾符，能夠闡述常見的事件修飾符2.5事件修飾符

先定一個小目標！什么是事件修飾符？2.5事件修飾符為了簡化開發，Vue為開發者提供了事件修飾符，它可以與v-on配合使用，以便于對事件進行控制，讓開發者更專注于邏輯。事件修飾符用于修飾事件的行為，寫在事件名稱之后，多個事件修飾符可以串聯使用。2.5事件修飾符通過事件修飾符可以實現的一些功能。阻止默認事件行為阻止事件冒泡事件捕獲使事件只觸發一次使DOM元素只有自身觸發事件時才執行事件方法監聽滾動事件捕獲特定按鍵捕獲鼠標按鍵2.5事件修飾符<ahref="test.html"v-on:click.prevent>阻止默認行為</a>1.阻止默認事件行為通過.prevent事件修飾符可以實現阻止默認事件行為的功能。例如，在單擊<a>標簽時頁面會自動跳轉，這就是<a>標簽的默認事件行為。在實際開發中，如果默認事件行為與事件發生沖突，可以使用.prevent事件修飾符阻止默認事件行為，示例代碼如下。2.5事件修飾符<template><divv-on:click="show('我是父元素的事件')"><buttonv-on:click="show('我是子元素的事件')">事件冒泡</button><buttonv-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button></div></template><scriptsetup>letshow=message=>console.log(message)</script>2.阻止事件冒泡通過.stop事件修飾符可以實現阻止事件冒泡的功能，示例代碼如下。2.5事件修飾符<template><divv-on:click.capture="show('我是父元素的事件')"><buttonv-on:click="show('我是子元素的事件')">事件捕獲</button></div></template><scriptsetup>letshow=message=>console.log(message)</script>3.事件捕獲通過.capture事件修飾符可以實現事件捕獲的功能，示例代碼如下。2.5事件修飾符<template><buttonv-on:click.once="show('我是當前元素的單擊事件且只執行一次')">只執行一次</button></template><scriptsetup>letshow=message=>console.log(message)</script>4.使事件只觸發一次通過.once事件修飾符可以實現使事件只觸發一次的功能。.once事件修飾符用于阻止事件的多次觸發，讓事件只觸發一次，示例代碼如下。2.5事件修飾符<template><divv-on:click="show('我是祖先元素的事件')">祖先元素

<divv-on:click.self="show('我是父元素的事件')">父元素

<divv-on:click="show('我是子元素的事件')">子元素</div></div></div></template><scriptsetup>letshow=message=>console.log(message)</script>5.使DOM元素只有自身觸發事件時才執行事件方法通過.self事件修飾符可以實現只有DOM元素自身觸發事件時才執行事件方法的功能，示例代碼如下。2.5事件修飾符<divv-on:scroll.passive="onScroll"></div>通過.passive事件修飾符可以實現監聽滾動事件的功能。.passive事件修飾符主要用于優化移動端設備的滾屏性能。添加.passive事件修飾符后會優先響應滾動事件而不是滾動事件的回調函數，從而可提升性能。使用.passive事件修飾符的示例代碼如下。6.監聽滾動事件2.5事件修飾符Vue提供了一些用于修飾鍵盤事件的修飾符，使用它們可以捕獲特定按鍵，其中常用的修飾符如下。.enter：捕獲Enter鍵。.esc：捕獲Esc鍵。.tab：捕獲Tab鍵。.delete：捕獲Delete和Backspace鍵。.ctrl：捕獲Ctrl鍵。.alt：捕獲Alt鍵。.shift：捕獲Shift鍵。.meta：在MacOS系統的鍵盤上捕獲command鍵；在Windows系統的鍵盤上捕獲Windows徽標鍵。7.捕獲特定按鍵2.5事件修飾符<template><inputtype="text"v-on:keyup.enter="submit"></template><scriptsetup>letsubmit=()=>console.log('捕獲到Enter鍵')</script>接下來以捕獲Enter鍵為例，演示.enter事件修飾符的使用，示例代碼如下。2.5事件修飾符如果想實現只有按下Enter鍵時才能觸發事件，可以通過.exact修飾符來實現，該修飾符允許控制由精確的系統修飾符組合觸發的事件。修改input元素實現僅有Enter鍵被按下的時候才觸發，示例代碼如下。<inputtype="text"v-on:keyup.enter.exact="submit">2.5事件修飾符Vue中提供了一些用于捕獲鼠標按鍵的事件修飾符，其中常用的修飾符如下。.left：捕獲鼠標左鍵。.middle：捕獲鼠標中鍵。.right：捕獲鼠標右鍵。8.捕獲鼠標按鍵2.5事件修飾符<template><buttonv-on:click.left="show('捕獲到鼠標左鍵')">按鈕</button></template><scriptsetup>letshow=message=>console.log(message)</script>接下來以捕獲鼠標左鍵為例，演示鼠標按鍵修飾符的使用，示例代碼如下。2.5事件修飾符計算屬性2.6掌握計算屬性，能夠靈活運用計算屬性實時監聽數據的變化，當所依賴的數據發生變化時重新計算值2.6計算屬性

先定一個小目標！什么是計算屬性？2.6計算屬性Vue提供了計算屬性來描述依賴響應式數據的復雜邏輯。計算屬性可以實時監聽數據的變化，返回一個計算后的新值，并將計算結果緩存起來。只有計算屬性中依賴的數據源變化了，計算屬性才會自動重新求值，并重新加入緩存。2.6計算屬性在組件中使用計算屬性，分為以下2個步驟。定義計算屬性輸出計算屬性122.6計算屬性<scriptsetup>import{computed}from'vue'const計算屬性名=computed(()=>{return計算后的數據})</script>計算屬性通過computed()函數定義，該函數的參數為一個回調函數，開發者需要在回調函數中實現計算功能，并在計算完成后返回計算后的數據，語法格式如下。1.定義計算屬性2.6計算屬性{{計算屬性名}}將計算屬性定義好后，可以使用Mustache語法輸出計算屬性，語法格式如下。2.輸出計算屬性2.6計算屬性步驟1演示計算屬性的使用方法步驟2創建src\components\Computed.vue文件。<template><p>初始message：{{message}}</p><p>反轉之后的message：{{reversedMessage}}</p><button@click="updateMessage">更改</button></template>2.6計算屬性步驟1演示計算屬性的使用方法步驟2>>接上頁代碼<scriptsetup>import{ref,computed}from'vue'constmessage=ref('HelloWorld')constreversedMessage=computed(()=>message.value.split('').reverse().join(''))constupdateMessage=()=>{message.value='hello'}</script>2.6計算屬性步驟1步驟2演示計算屬性的使用方法修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Computed.vue'2.6計算屬性保存上述代碼后，在瀏覽器中訪問:5173/，通過計算屬性實現的頁面效果如下圖所示。2.6計算屬性單擊“更改”按鈕后的頁面效果如下圖所示。2.6計算屬性偵聽器2.7掌握偵聽器，能夠靈活運用偵聽器監聽數據的變化并進行相應的操作2.7偵聽器

先定一個小目標！什么是偵聽器？2.7偵聽器在Vue中，開發者可以自定義方法來進行數據的更新操作，但是不能自動監聽數據的狀態。如果想在數據更新后進行相應的操作，可以通過偵聽器來實現。2.7偵聽器watch(偵聽器的來源,回調函數,可選參數)偵聽器通過watch()函數定義，watch()函數的語法格式如下。watch()函數有3個參數，下面對這3個參數分別進行講解。第1個參數是偵聽器的來源，偵聽器的來源可以有以下4種。一個函數，返回一個值。一個響應式數據。一個響應式對象。一個由以上類型的值組成的數組。2.7偵聽器第2個參數是數據發生變化時要調用的回調函數，這個回調函數的第1個參數表示新值，即數據發生變化后的值，第2個參數表示舊值，即數據發生變化前的值。第3個參數是可選參數，它是一個對象，該對象有以下2個常用選項。deep：默認情況下，當偵聽一個對象時，如果對象中的屬性值發生了變化，則無法被監聽到。如果想監聽到，可以將該選項設為true，表示進行深度監聽。該選項的默認值為false，表示不使用該選項。immediate：默認情況下，組件在初次加載完畢后不會調用偵聽器的回調函數，如果想讓偵聽器的回調函數立即被調用，則需要將選項設為true。該選項的默認值為false，表示不使用該選項。2.7偵聽器步驟1演示偵聽器的使用方法步驟2創建src\components\Watch.vue文件。<template><inputtype="text"v-model="cityName"></template><scriptsetup>import{watch,ref}from'vue'constcityName=ref('beijing')watch(cityName,(newVal,oldVal)=>{console.log(newVal,oldVal)})</script>2.7偵聽器步驟1步驟2演示偵聽器的使用方法修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Watch.vue'2.7偵聽器保存上述代碼后，在瀏覽器中訪問:5173/，在輸入框中輸入“beijing123”后的頁面效果如下圖所示。2.7偵聽器樣式綁定2.8掌握樣式綁定，能夠靈活運用v-bind綁定class屬性實現元素樣式的設置2.8.1 綁定class屬性

先定一個小目標！在Vue中，通過更改元素的class屬性可以更改元素的樣式，而對class屬性的操作可以通過v-bind來實現。使用v-bind綁定class屬性時，可以將class屬性值綁定為字符串、對象或數組，下面分別進行講解。2.8.1 綁定class屬性<template><divv-bind:class="className"></div></template><scriptsetup>constclassName='box'</script>1.將class屬性值綁定為字符串在Vue中，可以將class屬性值綁定為字符串，示例代碼如下。2.8.1 綁定class屬性<divclass="box"></div>當上述代碼運行后，div元素的渲染結果如下。步驟1演示如何為class屬性綁定字符串步驟2創建src\components\ClassStr.vue文件。<template><divv-bind:class="className">夢想</div></template><scriptsetup>constclassName='box'</script><style>.box{border:1pxsolidblack;}</style>2.8.1 綁定class屬性步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ClassStr.vue'2.8.1 綁定class屬性演示如何為class屬性綁定字符串保存上述代碼后，在瀏覽器中訪問:5173/，為class屬性綁定字符串的頁面效果如下圖所示。2.8.1 綁定class屬性2.將class屬性值綁定為對象2.8.1 綁定class屬性<template><divv-bind:class="{className:isActive}"></div></template><scriptsetup>import{ref}from'vue'constisActive=ref(true)</script>在Vue中，可以將class屬性值綁定為對象，從而動態地改變class屬性值。對象中包含的屬性名表示類名，屬性值為布爾類型，如果屬性值為true，表示類名生效，否則類名不生效。將class屬性值綁定為對象的示例代碼如下。2.8.1 綁定class屬性<divclass="className1"v-bind:class="{className2:isActive}"></div>使用v-bind綁定的class屬性可以與普通的class屬性共存，示例代碼如下。<divclass="className"></div>運行上述代碼后，div元素的渲染結果如下。<divclass="className1className2"></div>在上述代碼中，當isActive為true時，div元素的渲染結果如下。在使用v-bind綁定class屬性時，如果不想將對象類型的class屬性值直接寫在模板中，可以將屬性值定義成一個響應式對象或一個返回對象的計算屬性，示例代碼如下。2.8.1 綁定class屬性<template><divv-bind:class="classObject1"></div><divv-bind:class="classObject2"></div></template><scriptsetup>import{reactive,ref,computed}from'vue'constclassObject1=reactive({className:true})constisActive=ref(true)constclassObject2=computed(()=>({className:isActive.value}))</script>步驟1演示如何為class屬性綁定對象創建src\components\ClassObject.vue文件。<template><divclass="text"v-bind:class="{box:isBox,border:isBorder}"><divv-bind:class="{inner:isInner}">春夏</div><divv-bind:class="classObject">秋冬</div><divv-bind:class="classMeal">三餐四季~</div></div></template>步驟3步驟22.8.1 綁定class屬性步驟1演示如何為class屬性綁定對象>>接上頁代碼<scriptsetup>import{ref,reactive,computed}from'vue'constisBox=ref(true)constisBorder=ref(true)constisInner=ref(true)constisMeal=ref(true)constclassObject=reactive({inner:true})constclassMeal=computed(()=>({meal:isMeal.value}))</script>步驟3步驟22.8.1 綁定class屬性在src\components\ClassObject.vue文件中定義頁面所需的樣式。<style>.text{text-align:center;line-height:30px;}.box{width:100%;background:linear-gradient(white,rgb(239,250,86));}.border{border:2pxdottedblack;}步驟1步驟3步驟22.8.1 綁定class屬性演示如何為class屬性綁定對象>>接上頁代碼.inner{margin-top:2px;width:100px;height:30px;border:2pxdoubleblack;}.meal{width:100px;height:30px;border:2pxdashedrgb(120,81,227);}</style>步驟1步驟3步驟22.8.1 綁定class屬性演示如何為class屬性綁定

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論