Vue 3 安裝指南及語法知識點詳解
本文將詳細介紹 Vue 3 的所有安裝方式，并深入講解 Vue 3 的語法知識點。此外，還將提供一些綜合性案例，展示如何綜合運用 Vue 3 的各項功能。
一、安裝 Vue 3 的所有方式
Vue 3 提供了多種安裝方式，以適應不同的項目需求和開發環境。以下是主要的安裝方式：
1. 通過 CDN 引入
這是最簡單的方式，適用于快速原型開發或學習。
步驟：
- 在 HTML 文件中通過
<script>標簽引入 Vue 3 的 CDN 鏈接。 - 使用 Vue 全局變量進行開發。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 CDN 示例</title><!-- 引入 Vue 3 CDN --><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><p>{{ message }}</p><button @click="updateMessage">點擊更新消息</button></div><script>const { createApp } = Vue;createApp({data() {return {message: 'Hello Vue 3!'}},methods: {updateMessage() {this.message = '消息已更新！';}}}).mount('#app');</script>
</body>
</html>
2. 使用 NPM 安裝
適用于基于模塊化打包工具（如 Webpack, Vite）的項目開發。
步驟：
-
初始化項目：
npm init -y -
安裝 Vue 3：
npm install vue@next -
安裝構建工具（如 Vite）：
npm install vite --save-dev -
配置項目結構：
- 創建
index.html,src/main.js,src/App.vue等文件。
- 創建
-
運行項目：
npx vite
示例項目結構：
my-vue-app/
├── index.html
├── package.json
├── vite.config.js
└── src/├── main.js└── App.vue
3. 使用 Vue CLI
Vue CLI 是 Vue 官方的腳手架工具，適用于需要復雜配置的項目。
步驟：
-
全局安裝 Vue CLI：
npm install -g @vue/cli -
創建新項目：
vue create my-vue-app -
選擇配置選項（默認或自定義）。
-
進入項目目錄并運行：
cd my-vue-app npm run serve
4. 使用 Vite 創建 Vue 3 項目
Vite 是一個更快的構建工具，官方推薦用于 Vue 3 項目。
步驟：
-
使用 Vite 創建 Vue 3 項目：
npm init vite@latest my-vue-app -- --template vue -
進入項目目錄并安裝依賴：
cd my-vue-app npm install -
運行項目：
npm run dev
5. 官方腳手架 create-vue
npm init vue@latest
# 按照提示操作
二、Vue 3 語法知識點及使用方法
1. 創建 Vue 應用
語法：
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');
說明：
createApp用于創建 Vue 應用實例。mount方法將應用掛載到指定的 DOM 元素上。
案例代碼：
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 創建應用示例</title><script type="module" src="./src/main.js"></script>
</head>
<body><div id="app"></div>
</body>
</html>
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
<!-- src/App.vue -->
<template><div><h1>{{ title }}</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {title: '歡迎使用 Vue 3!',message: '這是一個 Vue 3 應用。'}}
}
</script>
2. 組件基礎
語法：
<!-- MyComponent.vue -->
<template><div><h2>{{ heading }}</h2><p>{{ content }}</p></div>
</template><script>
export default {props: {heading: {type: String,required: true}},data() {return {content: '這是組件的內容。'}}
}
</script>
說明：
- 使用
props接收父組件傳遞的數據。 data函數返回組件的響應式數據。
案例代碼：
<!-- src/components/Greeting.vue -->
<template><div><h2>{{ greeting }}</h2><p>{{ message }}</p></div>
</template><script>
export default {props: {greeting: {type: String,required: true}},data() {return {message: '這是一個組件。'}}
}
</script>
<!-- src/App.vue -->
<template><div><Greeting greeting="你好，Vue 3!" /></div>
</template><script>
import Greeting from './components/Greeting.vue';export default {components: {Greeting}
}
</script>
3. 響應式數據
語法：
import { reactive, ref } from 'vue';const state = reactive({count: 0
});const counter = ref(0);
說明：
reactive用于創建響應式對象。ref用于創建響應式引用（適用于基本類型和對象）。
案例代碼：
<!-- src/components/Counter.vue -->
<template><div><h2>計數器</h2><p>當前計數: {{ count }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
}
</script>
<!-- src/App.vue -->
<template><div><Counter /></div>
</template><script>
import Counter from './components/Counter.vue';export default {components: {Counter}
}
</script>
4. 計算屬性與偵聽器
語法：
import { computed, watch } from 'vue';const fullName = computed(() => `${firstName.value} ${lastName.value}`);watch(fullName, (newVal, oldVal) => {console.log(`姓名從 ${oldVal} 變為 ${newVal}`);
});
說明：
computed用于定義計算屬性，基于依賴進行緩存。watch用于偵聽數據變化，執行副作用。
案例代碼：
<!-- src/components/FullName.vue -->
<template><div><h2>姓名</h2><input v-model="firstName" placeholder="名" /><input v-model="lastName" placeholder="姓" /><p>全名: {{ fullName }}</p></div>
</template><script>
import { ref, computed, watch } from 'vue';export default {setup() {const firstName = ref('');const lastName = ref('');const fullName = computed(() => `${firstName.value} ${lastName.value}`);watch(fullName, (newVal, oldVal) => {console.log(`姓名從 ${oldVal} 變為 ${newVal}`);});return {firstName,lastName,fullName};}
}
</script>
5. 生命周期鉤子
語法：
import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('組件已掛載');});onUnmounted(() => {console.log('組件已卸載');});}
}
說明：
onMounted在組件掛載后調用。onUnmounted在組件卸載前調用。
案例代碼：
<!-- src/components/Lifecycle.vue -->
<template><div><h2>生命周期示例</h2><p>打開控制臺查看生命周期鉤子輸出。</p></div>
</template><script>
import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('組件已掛載');});onUnmounted(() => {console.log('組件已卸載');});return {};}
}
</script>
三、綜合性案例
案例 1：Todo List 應用
功能：
- 添加待辦事項
- 刪除待辦事項
- 顯示待辦事項列表
代碼：
<!-- src/components/TodoList.vue -->
<template><div><h2>Todo List</h2><input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待辦事項" /><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="removeTodo(index)">刪除</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {const todos = ref([]);const newTodo = ref('');const addTodo = () => {if (newTodo.value.trim() !== '') {todos.value.push(newTodo.value.trim());newTodo.value = '';}};const removeTodo = (index) => {todos.value.splice(index, 1);};return {todos,newTodo,addTodo,removeTodo};}
}
</script>
<!-- src/App.vue -->
<template><div><h1>Vue 3 Todo List</h1><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue';export default {components: {TodoList}
}
</script>
案例 2：動態表單
功能：
- 動態添加表單字段
- 表單驗證
- 顯示提交數據
代碼：
<!-- src/components/DynamicForm.vue -->
<template><div><h2>動態表單</h2><form @submit.prevent="submitForm"><div v-for="(field, index) in fields" :key="index"><input v-model="field.value" :placeholder="field.label" /><button type="button" @click="removeField(index)">刪除</button></div><button type="button" @click="addField">添加字段</button><button type="submit">提交</button></form><div v-if="submittedData"><h3>提交的數據:</h3><pre>{{ submittedData }}</pre></div></div>
</template><script>
import { ref } from 'vue';export default {setup() {const fields = ref([{ label: '姓名', value: '' },{ label: '郵箱', value: '' }]);const addField = () => {fields.value.push({ label: '新字段', value: '' });};const removeField = (index) => {fields.value.splice(index, 1);};const submitForm = () => {// 簡單驗證const data = {};fields.value.forEach(field => {if (field.value.trim() !== '') {data[field.label] = field.value.trim();}});alert(JSON.stringify(data));submittedData.value = data;};const submittedData = ref(null);return {fields,addField,removeField,submitForm,submittedData};}
}
</script>
<!-- src/App.vue -->
<template><div><DynamicForm /></div>
</template><script>
import DynamicForm from './components/DynamicForm.vue';export default {components: {DynamicForm}
}
</script>
案例 3：天氣預報應用
功能：
- 輸入城市名稱獲取天氣信息
- 顯示當前天氣狀況
- 顯示未來幾天的天氣預報
代碼：
<!-- src/components/Weather.vue -->
<template><div><h2>天氣預報</h2><input v-model="city" @keyup.enter="fetchWeather" placeholder="輸入城市名稱" /><button @click="fetchWeather">查詢</button><div v-if="weather"><h3>當前天氣</h3><p>城市: {{ weather.name }}</p><p>溫度: {{ weather.main.temp }}°C</p><p>天氣狀況: {{ weather.weather[0].description }}</p></div><div v-if="forecast"><h3>天氣預報</h3><ul><li v-for="(day, index) in forecast.list" :key="index">{{ formatDate(day.dt) }}: {{ day.weather[0].description }}, {{ day.main.temp }}°C</li></ul></div></div>
</template><script>
import { ref } from 'vue';
import axios from 'axios';export default {setup() {const city = ref('');const weather = ref(null);const forecast = ref(null);const fetchWeather = async () => {if (city.value.trim() === '') return;try {const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city.value}&appid=YOUR_API_KEY&units=metric`);weather.value = response.data;const forecastResponse = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${city.value}&appid=YOUR_API_KEY&units=metric`);forecast.value = forecastResponse.data;} catch (error) {console.error(error);alert('獲取天氣信息失敗');}};const formatDate = (timestamp) => {const date = new Date(timestamp * 1000);return date.toLocaleDateString();};return {city,weather,forecast,fetchWeather,formatDate};}
}
</script>
<!-- src/App.vue -->
<template><div><Weather /></div>
</template><script>
import Weather from './components/Weather.vue';export default {components: {Weather}
}
</script>
注意： 請將 YOUR_API_KEY 替換為實際的 OpenWeatherMap API 密鑰。
四、總結
本文詳細介紹了 Vue 3 的安裝方式、語法知識點及其使用方法，并通過具體的案例代碼展示了如何應用這些知識。通過學習這些內容，讀者可以快速掌握 Vue 3 的基礎和進階功能，進而構建功能豐富的現代 Web 應用。
以下是一些關鍵點：
- 安裝方式：根據項目需求選擇合適的安裝方式，如 CDN, NPM, Vue CLI 或 Vite。
- 組件化開發：理解組件的概念，掌握組件的創建和使用。
- 響應式數據：利用
reactive和ref實現數據的響應式更新。 - 計算屬性與偵聽器：使用
computed和watch處理復雜的邏輯和數據變化。 - 生命周期鉤子：理解組件的生命周期，合理使用生命周期鉤子處理副作用。
- 綜合應用：通過綜合性案例，理解如何將各項功能組合在一起，構建完整的應用。
通過不斷實踐和深入學習，讀者可以進一步掌握 Vue 3 的高級特性，如 Vue Router, Vuex 或 Pinia 等狀態管理工具，以及 Vue 3 的組合式 API 等。
)
![【playwright篇】教程(十七)[html元素知識]](http://pic.xiahunao.cn/【playwright篇】教程(十七)[html元素知識])
