Vue3 學習教程，從入門到精通，Vue 3 內置屬性語法知識點及案例代碼(25）

Vue 3 內置屬性語法知識點及案例代碼

Vue 3 提供了豐富的內置屬性，幫助開發者高效地構建用戶界面。以下將詳細介紹 Vue 3 的主要內置屬性，并結合詳細的案例代碼進行說明。每個案例代碼都包含詳細的注釋，幫助初學者更好地理解其用法。

1. data

知識點

  • data: 用于定義組件的響應式數據。
  • 在 Vue 3 中，data 必須是一個返回對象的函數。
  • 響應式數據的變化會自動更新視圖。

案例代碼

<template><div><h1>{{ message }}</h1><button @click="updateMessage">更新消息</button></div>
</template><script>
export default {name: 'DataExample',data() {return {message: 'Hello, Vue 3!'};},methods: {updateMessage() {this.message = '消息已更新！';}}
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

說明:

  • data 函數返回一個包含 message 屬性的對象。
  • 點擊按鈕時，updateMessage 方法會更新 message 的值，視圖會自動刷新。

2. methods

知識點

  • methods: 用于定義組件中的方法。
  • 方法中的 this 指向當前組件實例，可以訪問 data、props 等屬性。

案例代碼

<template><div><p>計數器: {{ count }}</p><button @click="increment">增加</button><button @click="decrement">減少</button></div>
</template><script>
export default {name: 'MethodsExample',data() {return {count: 0};},methods: {increment() {this.count++;},decrement() {this.count--;}}
};
</script><style scoped>
button {margin: 0 5px;
}
</style>

說明:

  • 定義了兩個方法 increment 和 decrement，用于增加和減少 count 的值。
  • 按鈕點擊時調用相應方法，更新視圖。

3. computed

知識點

  • computed: 用于定義計算屬性，基于依賴進行緩存。
  • 計算屬性只有在依賴發生變化時才會重新計算。
  • 適用于需要基于現有數據計算出新數據的場景。

案例代碼

<template><div><p>原始價格: {{ price }} 元</p><p>折扣價格: {{ discountedPrice }} 元</p><button @click="increasePrice">增加價格</button></div>
</template><script>
export default {name: 'ComputedExample',data() {return {price: 100};},computed: {discountedPrice() {return this.price * 0.9; // 假設打9折}},methods: {increasePrice() {this.price += 10;}}
};
</script><style scoped>
button {margin-top: 10px;
}
</style>

說明:

  • discountedPrice 是一個計算屬性，基于 price 計算折扣后的價格。
  • 當 price 變化時，discountedPrice 會自動更新。

4. watch

知識點

  • watch: 用于監聽數據的變化，并在變化時執行相應的回調函數。
  • 適用于需要在數據變化時執行異步操作或復雜邏輯的場景。

案例代碼

<template><div><p>用戶名: {{ username }}</p><input v-model="username" placeholder="輸入用戶名" /><p v-if="isUsernameValid">用戶名有效</p><p v-else>用戶名無效</p></div>
</template><script>
export default {name: 'WatchExample',data() {return {username: '',isUsernameValid: false};},watch: {username(newVal) {if (newVal.length >= 3) {this.isUsernameValid = true;} else {this.isUsernameValid = false;}}}
};
</script><style scoped>
input {margin-top: 10px;padding: 5px;
}
</style>

說明:

  • watch 監聽 username 的變化。
  • 根據 username 的長度更新 isUsernameValid 的值。
  • 輸入框內容變化時，視圖會根據 isUsernameValid 顯示相應的提示。

5. props

知識點

  • props: 用于接收父組件傳遞的數據。
  • 可以是數組或對象，用于定義組件的接收屬性。

案例代碼

父組件

<template><div><ChildComponent :greeting="message" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent},data() {return {message: '你好，Vue 3!'};}
};
</script>

子組件 (ChildComponent.vue)

<template><div><h2>{{ greeting }}</h2></div>
</template><script>
export default {name: 'ChildComponent',props: {greeting: {type: String,required: true}}
};
</script><style scoped>
h2 {color: #35495e;
}
</style>

說明:

  • 父組件通過 props 向子組件傳遞 greeting 數據。
  • 子組件通過 props 接收并使用該數據。

6. emit

知識點

  • emit: 用于觸發自定義事件，向父組件傳遞數據或通知事件。
  • 子組件通過 emit 觸發事件，父組件監聽并處理事件。

案例代碼

子組件 (ChildComponent.vue)

<template><div><button @click="notifyParent">通知父組件</button></div>
</template><script>
export default {name: 'ChildComponent',methods: {notifyParent() {this.$emit('child-event', '來自子組件的消息');}}
};
</script><style scoped>
button {padding: 5px 10px;
}
</style>

父組件

<template><div><h1>{{ message }}</h1><ChildComponent @child-event="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent},data() {return {message: '等待子組件的消息...'};},methods: {handleChildEvent(payload) {this.message = payload;}}
};
</script><style scoped>
h1 {color: #42b983;
}
</style>

說明:

  • 子組件通過 this.$emit 觸發 child-event 事件，并傳遞一個字符串作為負載。
  • 父組件監聽 child-event 事件，并調用 handleChildEvent 方法處理事件。
  • 父組件的 message 會根據子組件傳遞的負載進行更新。

7. v-model

知識點

  • v-model: 用于在表單輸入元素和組件狀態之間創建雙向綁定。
  • 簡化了表單處理和數據綁定。

案例代碼

<template><div><input v-model="text" placeholder="輸入文本" /><p>輸入的內容: {{ text }}</p></div>
</template><script>
export default {name: 'VModelExample',data() {return {text: ''};}
};
</script><style scoped>
input {padding: 5px;margin-bottom: 10px;
}
</style>

說明:

  • v-model 雙向綁定 text 數據和輸入框的值。
  • 輸入框內容變化時，text 的值會實時更新，反之亦然。

8. v-bind 和 v-on

知識點

  • v-bind: 用于動態綁定 HTML 屬性或組件的 props。
  • v-on: 用于綁定事件監聽器。

案例代碼

<template><div><img v-bind:src="imageUrl" alt="示例圖片" /><button v-on:click="changeImage">更換圖片</button></div>
</template><script>
export default {name: 'VBindVOnExample',data() {return {imageUrl: 'https://via.placeholder.com/150',images: ['https://via.placeholder.com/150','https://via.placeholder.com/200','https://via.placeholder.com/250']};},methods: {changeImage() {const index = Math.floor(Math.random() * this.images.length);this.imageUrl = this.images[index];}}
};
</script><style scoped>
img {width: 150px;height: 150px;margin-bottom: 10px;
}
button {padding: 5px 10px;
}
</style>

說明:

  • v-bind:src 動態綁定圖片的 src 屬性。
  • v-on:click 綁定點擊事件，調用 changeImage 方法更換圖片。
  • 點擊按鈕時，隨機選擇一張圖片并更新 imageUrl，圖片會實時更換。

9. v-if 和 v-for

知識點

  • v-if: 根據條件渲染元素。
  • v-for: 用于遍歷數組或對象，渲染列表。

案例代碼

<template><div><h2>水果列表</h2><ul><li v-for="(fruit, index) in fruits" :key="index">{{ index + 1 }}. {{ fruit.name }}<button v-if="fruit.quantity > 0" @click="buyFruit(index)">購買</button><span v-else>已售罄</span></li></ul><p>總購買數量: {{ totalPurchased }}</p></div>
</template><script>
export default {name: 'VIfVForExample',data() {return {fruits: [{ name: '蘋果', quantity: 5 },{ name: '香蕉', quantity: 0 },{ name: '橘子', quantity: 3 }],totalPurchased: 0};},methods: {buyFruit(index) {if (this.fruits[index].quantity > 0) {this.fruits[index].quantity--;this.totalPurchased++;}}}
};
</script><style scoped>
ul {list-style-type: none;padding: 0;
}
li {margin: 5px 0;
}
button {margin-left: 10px;padding: 2px 5px;
}
</style>

說明:

  • 使用 v-for 遍歷 fruits 數組，渲染水果列表。
  • 使用 v-if 判斷水果的 quantity 是否大于 0，顯示“購買”按鈕或“已售罄”。
  • 點擊“購買”按鈕時，減少對應水果的數量，并增加總購買數量。

10. provide 和 inject

知識點

  • provide: 用于向子組件提供數據或方法。
  • inject: 用于在子組件中接收 provide 提供的數據或方法。

案例代碼

祖先組件 (AncestorComponent.vue)

<template><div><h1>祖先組件</h1><ChildComponent /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'AncestorComponent',components: {ChildComponent},provide() {return {ancestorMessage: '來自祖先組件的消息'};}
};
</script>

子組件 (ChildComponent.vue)

<template><div><h2>子組件</h2><p>{{ ancestorMessage }}</p></div>
</template><script>
export default {name: 'ChildComponent',inject: ['ancestorMessage']
};
</script><style scoped>
h2 {color: #35495e;
}
</style>

說明:

  • 祖先組件通過 provide 提供 ancestorMessage 數據。
  • 子組件通過 inject 接收 ancestorMessage，并在模板中使用。
  • 這種方式可以實現跨層級組件間的數據共享。

總結

以上介紹了 Vue 3 中常用的內置屬性及其用法，包括 data、methods、computed、watch、props、emit、v-model、v-bind、v-on、v-if、v-for、provide 和 inject。每個知識點都配有詳細的案例代碼和注釋，幫助初學者更好地理解和應用這些屬性。

通過不斷實踐和深入學習，您將能夠熟練地使用這些屬性，構建功能豐富、響應式的 Vue 3 應用。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/92051.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/92051.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/92051.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

機器學習基石：深入解析線性回歸

機器學習基石：深入解析線性回歸

線性回歸是機器學習中最基礎、最核心的算法之一&#xff0c;它為我們理解更復雜的模型奠定了基礎。本文將帶你全面解析線性回歸的方方面面。1. 什么是回歸&#xff1f; 回歸分析用于預測連續型數值。它研究自變量&#xff08;特征&#xff09;與因變量&#xff08;目標&#xf…
閱讀更多...
OneCodeServer 架構深度解析：從組件設計到運行時機制

OneCodeServer 架構深度解析：從組件設計到運行時機制

一、架構概覽與設計哲學1.1 系統定位與核心價值OneCodeServer 作為 OneCode 平臺的核心服務端組件&#xff0c;是連接前端設計器與后端業務邏輯的橋梁&#xff0c;提供了從元數據定義到應用程序執行的完整解決方案。它不僅是一個代碼生成引擎&#xff0c;更是一個全生命周期管理…
閱讀更多...
Jwts用于創建和驗證 ??JSON Web Token（JWT）?? 的開源庫詳解

Jwts用于創建和驗證 ??JSON Web Token（JWT）?? 的開源庫詳解

Jwts用于創建和驗證 ??JSON Web Token&#xff08;JWT&#xff09;?? 的開源庫詳解在 Java 開發中&#xff0c;提到 Jwts 通常指的是 ??JJWT&#xff08;Java JWT&#xff09;庫??中的核心工具類 io.jsonwebtoken.Jwts。JJWT 是一個專門用于創建和驗證 ??JSON Web To…
閱讀更多...
如果發送的數據和接受的數據不一致時，怎么辦？

如果發送的數據和接受的數據不一致時，怎么辦？

那ART4222這個板卡舉例&#xff0c;我之間輸入一個原始數據“6C532A14”&#xff0c;但是在選擇偶校驗時&#xff0c;接收的是“6C532B14”&#xff0c;我發送的碼率&#xff08;運行速度&#xff09;是100000&#xff0c;但接受的不穩定&#xff0c;比如&#xff1b;“100100.…
閱讀更多...
ISCC認證：可持續生產的新標桿。ISCC如何更快認證

ISCC認證：可持續生產的新標桿。ISCC如何更快認證

在全球可持續發展浪潮中&#xff0c;ISCC&#xff08;國際可持續與碳認證&#xff09;體系已成為企業綠色轉型的重要工具。這一國際公認的認證系統覆蓋農業、林業、廢棄物處理等多個領域&#xff0c;通過嚴格的可持續性標準、供應鏈可追溯性要求和碳排放計算規范&#xff0c;建…
閱讀更多...
想對學習自動化測試的一些建議

想對學習自動化測試的一些建議

Python接口自動化測試零基礎入門到精通&#xff08;2025最新版&#xff09;接觸了不少同行&#xff0c;由于他們之前一直做手工測試&#xff0c;現在很迫切希望做自動化測試&#xff0c;其中不乏工作5年以上的人。 本人從事軟件自動化測試已經近5年&#xff0c;從server端到web…
閱讀更多...
電子電氣架構 ---智能電動汽車嵌入式軟件開發過程中的block點

電子電氣架構 ---智能電動汽車嵌入式軟件開發過程中的block點

我是穿拖鞋的漢子，魔都中堅持長期主義的汽車電子工程師。 老規矩，分享一段喜歡的文字，避免自己成為高知識低文化的工程師： 做到欲望極簡，了解自己的真實欲望，不受外在潮流的影響，不盲從，不跟風。把自己的精力全部用在自己。一是去掉多余，凡事找規律，基礎是誠信；二是…
閱讀更多...
createAsyncThunk

createAsyncThunk

下面&#xff0c;我們來系統的梳理關于 Redux Toolkit 異步操作&#xff1a;createAsyncThunk 的基本知識點&#xff1a;一、createAsyncThunk 概述 1.1 為什么需要 createAsyncThunk 在 Redux 中處理異步操作&#xff08;如 API 調用&#xff09;時&#xff0c;傳統方法需要手…
閱讀更多...
STM32F103C8T6 BC20模塊NBIOT GPS北斗模塊采集溫濕度和經緯度發送到EMQX

STM32F103C8T6 BC20模塊NBIOT GPS北斗模塊采集溫濕度和經緯度發送到EMQX

云平臺配置 訪問下載頁面&#xff1a;免費試用 EMQX Cloud 或 EMQX Enterprise | 下載 EMQX&#xff0c;根據需求選擇對應版本下載。將下載的壓縮包上傳至服務器&#xff08;推薦存放于C盤根目錄&#xff0c;便于后續操作&#xff09;&#xff0c;并解壓至指定路徑&#xff08…
閱讀更多...
YOLO11漲點優化：自研檢測頭， 新創新點（SC_C_11Detect）檢測頭結構創新，實現有效漲點

YOLO11漲點優化：自研檢測頭， 新創新點（SC_C_11Detect）檢測頭結構創新，實現有效漲點

目標檢測領域迎來重大突破！本文揭秘原創SC_C_11Detect檢測頭，通過空間-通道協同優化與11層深度結構，在YOLO系列上實現mAP最高提升5.7%，小目標檢測精度暴漲9.3%！創新性結構設計+即插即用特性，為工業檢測、自動駕駛等場景帶來革命性提升！ 一、傳統檢測頭的三大痛點 在目…
閱讀更多...
OSCP 考試期間最新考試政策

OSCP 考試期間最新考試政策

根據 Offensive Security 官方最新考試政策&#xff08;2025 年 7 月&#xff09;&#xff0c;OSCP 考試期間禁止或嚴格限制以下工具與行為&#xff1a; 一、絕對禁止使用的工具/服務 類別舉例說明商業/付費版本Metasploit Pro、Burp Suite Pro、Cobalt Strike、Canvas、Core …
閱讀更多...
如何基于MQ實現分布式事務

如何基于MQ實現分布式事務

文章目錄1.可靠消息最終一致性1.1 本地消息表1.1.1 本地消息表的優缺點1.消息堆積&#xff0c;掃表慢2.集中式掃表&#xff0c;會影響正常業務3.定時掃表的延遲問題1.1.2 本地消息表的代碼實踐1.表結構設計2.具體業務實現1.2 事務消息1.2.1 事務消息的三個階段階段1&#xff1a…
閱讀更多...
ARM學習（45）AXI協議總線學習

ARM學習（45）AXI協議總線學習

筆者來介紹一下ARM AMBA 總線中的AXI協議 1、簡介 ARM 公司推出的AMBA 總線（Advanced Microcontroller Bus Architecture） ，目前已經推出到AMBA5版本。主要包括 APB：Advanced Peripheral Bus，針對外設 AHB：Advanced High-Performance Bus，高性能總線，支持64/128 位多管…
閱讀更多...
Visual C++與HGE游戲引擎：創建偽2.5D斜45度視角游戲

Visual C++與HGE游戲引擎：創建偽2.5D斜45度視角游戲

本文還有配套的精品資源&#xff0c;點擊獲取 簡介&#xff1a;本教程專注講解如何結合Visual C和HGE游戲引擎構建一個斜45度視角的偽2.5D游戲世界。HGE提供了DirectX的接口&#xff0c;簡化了圖形和音頻處理&#xff0c;使得開發者可以專注于游戲邏輯和視覺效果的實現。教程…
閱讀更多...
打造個人數字圖書館：LeaNote+cpolar如何成為你的私有化知識中樞？

打造個人數字圖書館：LeaNote+cpolar如何成為你的私有化知識中樞？

文章目錄前言1. 安裝Docker2. Docker本地部署Leanote螞蟻筆記3. 安裝cpolar內網穿透4. 固定Leanote螞蟻筆記公網地址前言 在信息爆炸的時代&#xff0c;如何系統管理知識資產并實現價值輸出&#xff1f;螞蟻筆記&#xff08;Leanote&#xff09;提供了一種全新解決方案。這款開…
閱讀更多...
[特殊字符]? 整個鍵盤控制無人機系統框架

[特殊字符]? 整個鍵盤控制無人機系統框架

&#x1f3af; 五大核心模塊詳解1. &#x1f4e5; 輸入處理模塊keyboard_control_node ├── 功能&#xff1a;捕獲鍵盤輸入并轉換為ROS消息 ├── 文件&#xff1a;keyboard_control.cpp ├── 輸入&#xff1a;鍵盤按鍵 (W/A/S/D/R/F/Q/E/L/ESC) ├── 輸出&#xff1a;g…
閱讀更多...
機器學習第三課之邏輯回歸（三）LogisticRegression

機器學習第三課之邏輯回歸（三）LogisticRegression

目錄 簡介 1.下采樣 2.過采樣 簡介 接上兩篇篇博客最后&#xff0c;我們使用了K折交叉驗證去尋找最合適的C值&#xff0c;提升模型召回率&#xff0c;對于選取C的最優值&#xff0c;我們就要把不同C值放到模型里面訓練&#xff0c;然后用驗證集去驗證得到結果進行比較&#x…
閱讀更多...
1.Java語言有什么特點

1.Java語言有什么特點

1.Java語言有什么特點 1.面向對象編程&#xff0c;擁有封裝&#xff0c;繼承和多態的特性&#xff0c;所有可以很好的設計出低耦合的項目工程。 2.很好的可移植性&#xff0c;在Java中有java虛擬機&#xff08;JVM&#xff09;的支持&#xff0c;每寫一個類都是.Class文件。J…
閱讀更多...
部署 Kibana 8.2.2 可視化管理 Elasticsearch 8.2.2 集群

部署 Kibana 8.2.2 可視化管理 Elasticsearch 8.2.2 集群

? 適用版本&#xff1a;Elasticsearch 8.2.2 Kibana 8.2.2 一、環境準備 組件版本示例地址Elasticsearch8.2.2192.168.130.61:9200, 192.168.130.62:9200, 192.168.130.65:9200Kibana8.2.2部署在 192.168.130.651操作系統CentOS 7?? 嚴格版本匹配&#xff1a;Kibana 8.2.2…
閱讀更多...
7.2 I/O接口 (答案見原書 P305)

7.2 I/O接口 (答案見原書 P305)

第7章 輸入/輸出系統 7.1 I/O系統基本概念 (答案見原書 P301) & 7.2 I/O接口 (答案見原書 P305) 01. 在統一編址的方式下，區分存儲單元和I/O設備是靠（ A ）。 題目原文 在統一編址的方式下，區分存儲單元和I/O設備是靠（ ）。 A. 不同的地址碼 B. 不同的地址線 C. 不同…
閱讀更多...
最新文章

Copyright @ 2022~2023