Vue.js 簡介與實作範例

更新於 發佈於 閱讀時間約 13 分鐘

Vue.js 是一個靈活且高效的 JavaScript 框架,專注於構建用戶界面。它使用虛擬 DOM 技術,能夠有效地更新界面。無論是初學者還是專業開發者,Vue.js 都提供了多種API供選擇,如 Options API 和 Composition API,Vue 2使用options API,Vue 3則是options API、composition API都可以使用。


網站性質

在 Vue.js 中,渲染的過程如下:

  1. HTML/CSS 渲染:將基本結構和樣式展現出來。
  2. JavaScript 交互:通過 Vue.js 進行交互式操作。

虛擬 DOM vs. 實際 DOM

Vue.js 的優勢在於它的虛擬 DOM 機制。當數據發生變更時,Vue 會首先更新虛擬 DOM,然後再將變更應用到實際 DOM,這樣可以大幅提升性能。

基本示範:Vue 實作

Options API 示例

<div id="app">
<button type="button" @click="message='Hello Vue!'">改變Message</button>
{{ message }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello World',
}
},
// 處理資料前(data,methods)觸發
beforeCreate(){
console.log('beforeCreate',this.message);
},

// 當資料(data,methods)處理完後觸發
created(){
console.log('created',this.message);
},

// 當DOM掛載完成觸發
mounted(){
console.log('mounted',this.message);
},

// 當畫面有更新時觸發
updated(){
console.log('updated');
},
});

app.mount('#app');
</script>

表單輸入示例

<div id="app">
<input v-model="message" type="text" placeholder="請輸入">
<p>{{ message }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: '',
}
},
});

app.mount('#app');
</script>

雙向綁定

使用 v-model 指令可實現雙向綁定,input的值會和綁定的變數同步,可以簡化數據更新流程。

<input v-model="message" type="text" placeholder="請輸入">

練習 1:動態表單輸入

<div id="app">
<div v-for="member in members" :key="member.id">
<label>
姓氏: <input v-model="member.lastName" type="text">
</label>
<label>
名字: <input v-model="member.firstName" type="text">
</label>
</div>
<div v-for="member in members" :key="member.id">
<p>{{ member.lastName }} {{ member.firstName }}</p>
</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
members: [
{ id: 1, lastName: '', firstName: '' },
{ id: 2, lastName: '', firstName: '' },
{ id: 3, lastName: '', firstName: '' },
],
}
},
});

app.mount('#app');
</script>

監聽器示例

使用監聽器watch來響應數據變化。

<div id="app">
<button type="button" @click="count++">Count++</button>
{{ count }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0,
}
},
watch: {
count(newValue, oldValue) {
console.log(`Count from ${oldValue} changed to ${newValue}`);
}
},
});

app.mount('#app');
</script>

練習 2:異步數據獲取

<div id="app">
<button @click="fetchData">獲取資料</button>
<pre v-if="todoData">{{ todoData }}</pre>
<p v-else>Loading...</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
todoData: null,
};
},
methods: {
fetchData() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => this.todoData = data);
}
},
});

app.mount('#app');
</script>

計算屬性示例

計算屬性可以用來進行數據的計算和過濾。

<div id="app">
<input v-model="lastName" type="text" placeholder="姓名">
<p>{{ fullName }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lastName: '王',
firstName: '大明',
};
},
computed: {
fullName() {
return `${this.lastName} ${this.firstName}`;
}
},
});

app.mount('#app');
</script>

單選與多選下拉選單

在 Vue 中,單選、多選和下拉選單的製作都非常快速。

<div id="app">
<label>
<input v-model="gender" type="radio" value="男">
</label>
<label>
<input v-model="gender" type="radio" value="女">
</label>
<p>{{ gender }}</p>

<label>
<select v-model="time">
<option value="" hidden>請選擇聯絡時間</option>
<option value="早上">早上</option>
<option value="中午">中午</option>
<option value="晚上">晚上</option>
</select>
</label>
<p>{{ time }}</p>

<label>
<input v-model="food" type="checkbox" value="排骨飯"> 排骨飯
</label>
<label>
<input v-model="food" type="checkbox" value="鴨肉飯"> 鴨肉飯
</label>
<p>{{ food }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
gender: '',
time: '',
food: [],
};
},
});

app.mount('#app');
</script>

總結

Vue.js 提供了簡單易用的寫法,使得前端開發變得更加高效和靈活。從基本的數據綁定到複雜的計算屬性和事件監聽器,Vue.js 的特性可以幫助開發者快速構建動態和響應式的應用程序。接下來會介紹一些偏理論的知識以及其他應用。


對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段,大家有不同看法的話歡迎進行良性的知識交流!

 

提醒,文章僅供正當的知識參考,文章不負任何責任。


留言
avatar-img
留言分享你的想法!
avatar-img
阿棋的沙龍
2會員
34內容數
有軟體開發相關文章。
阿棋的沙龍的其他內容
2024/12/07
在這篇文章中,我們將討論如何在 Vue 應用中使用路由、GitHub Pages 部署以及狀態管理工具 Pinia。這些概念在開發上通常會使用到,讓我們一步一步深入這些重要的概念!
Thumbnail
2024/12/07
在這篇文章中,我們將討論如何在 Vue 應用中使用路由、GitHub Pages 部署以及狀態管理工具 Pinia。這些概念在開發上通常會使用到,讓我們一步一步深入這些重要的概念!
Thumbnail
2024/12/06
在這篇文章中,我們將深入探討如何在 Vue 中使用組件,特別是如何透過事件傳遞數據、動態載入圖片,以及使用本地儲存功能。這些可能稍微複雜一點,讓我們一步一步來。
Thumbnail
2024/12/06
在這篇文章中,我們將深入探討如何在 Vue 中使用組件,特別是如何透過事件傳遞數據、動態載入圖片,以及使用本地儲存功能。這些可能稍微複雜一點,讓我們一步一步來。
Thumbnail
2024/12/05
在這篇文章中,我們將介紹如何快速建置一個 Vue 專案,並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅!
Thumbnail
2024/12/05
在這篇文章中,我們將介紹如何快速建置一個 Vue 專案,並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅!
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
在這篇文章中,我們將介紹如何快速建置一個 Vue 專案,並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅!
Thumbnail
在這篇文章中,我們將介紹如何快速建置一個 Vue 專案,並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅!
Thumbnail
Vue 提供了多種動畫技術來提升應用程式的互動性,包括基於 CSS 類別的動畫、基於狀態的動畫,以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發,像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定,根據互動動態調整元素的外觀,例如根據滑鼠位置改變背景顏色。
Thumbnail
Vue 提供了多種動畫技術來提升應用程式的互動性,包括基於 CSS 類別的動畫、基於狀態的動畫,以及使用監視器來動畫化數值。基於類別的動畫可通過動態添加 CSS 類別來觸發,像是觸發按鈕搖動效果。基於狀態的動畫則是透過樣式綁定,根據互動動態調整元素的外觀,例如根據滑鼠位置改變背景顏色。
Thumbnail
Vue 建議使用模板構建應用程式,但在需要 JavaScript 的全程式化功能時,渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode,h 是 hyperscript 的簡寫,能生成 HTML 的 JavaScript。
Thumbnail
Vue 建議使用模板構建應用程式,但在需要 JavaScript 的全程式化功能時,渲染函數可派上用場。渲染函數通過 h() 函數創建 vnode,h 是 hyperscript 的簡寫,能生成 HTML 的 JavaScript。
Thumbnail
Vue 自定義指令用於擴充功能,需要直接操作 DOM 時使用。常見例子如 v-focus 指令,使元素在插入 DOM 時自動獲得焦點。指令定義物件可提供多個生命週期鉤子函數,例如 mounted、updated 等。指令可以簡寫為函數,當行為在 mounted 和 updated 時相同時特別方便。
Thumbnail
Vue 自定義指令用於擴充功能,需要直接操作 DOM 時使用。常見例子如 v-focus 指令,使元素在插入 DOM 時自動獲得焦點。指令定義物件可提供多個生命週期鉤子函數,例如 mounted、updated 等。指令可以簡寫為函數,當行為在 mounted 和 updated 時相同時特別方便。
Thumbnail
組件組成一棵樹狀結構,類似於嵌套的 HTML 元素,但 Vue 提供了自定義內容和邏輯的封裝。通常我們會在專用的 .vue 文件中定義組件,並使用 <script setup> 來輕鬆管理狀態和事件。組件可以重複使用,並透過 props 傳遞數據,使用插槽實現內容分發。
Thumbnail
組件組成一棵樹狀結構,類似於嵌套的 HTML 元素,但 Vue 提供了自定義內容和邏輯的封裝。通常我們會在專用的 .vue 文件中定義組件,並使用 <script setup> 來輕鬆管理狀態和事件。組件可以重複使用,並透過 props 傳遞數據,使用插槽實現內容分發。
Thumbnail
這篇文章介紹了在 Vue.js 前端框架中如何有效地綁定 Class 和 Style。透過使用 v-bind 指令,使用者可以動態地切換元素的類別和內聯樣式,這不僅能夠簡化程式碼,還能防止錯誤的發生。文章中探討了物件和陣列綁定的使用情境,以及如何在組件中應用這些技術,從而提升開發效率與程式的可讀性。
Thumbnail
這篇文章介紹了在 Vue.js 前端框架中如何有效地綁定 Class 和 Style。透過使用 v-bind 指令,使用者可以動態地切換元素的類別和內聯樣式,這不僅能夠簡化程式碼,還能防止錯誤的發生。文章中探討了物件和陣列綁定的使用情境,以及如何在組件中應用這些技術,從而提升開發效率與程式的可讀性。
Thumbnail
本文介紹了 Vue 的模板語法及虛擬 DOM 概念。學習如何使用 Vue 進行聲明式渲染,以及模板如何轉換為高效的 JavaScript 代碼。探討各種綁定方法、指令及安全注意事項,幫助開發者構建高效動態用戶界面並提升應用性能。文章深入淺出,適合想進一步瞭解 Vue 的開發者。
Thumbnail
本文介紹了 Vue 的模板語法及虛擬 DOM 概念。學習如何使用 Vue 進行聲明式渲染,以及模板如何轉換為高效的 JavaScript 代碼。探討各種綁定方法、指令及安全注意事項,幫助開發者構建高效動態用戶界面並提升應用性能。文章深入淺出,適合想進一步瞭解 Vue 的開發者。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News