Vue.js 簡介與實作範例

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

Aniket Deole on Unsplash

網站性質

在 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 的特性可以幫助開發者快速構建動態和響應式的應用程序。接下來會介紹一些偏理論的知識以及其他應用。

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

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