一、vue的基本簡介

1. 什么是vue?

Vue (發音為 /vju?/，類似?view) 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。

2. 漸進式框架

Vue 是一個框架，也是一個生態。其功能覆蓋了大部分前端開發常見的需求。但 Web 世界是十分多樣化的，不同的開發者在 Web 上構建的東西可能在形式和規模上會有很大的不同。考慮到這一點，Vue 的設計非常注重靈活性和“可以被逐步集成”這個特點。根據你的需求場景，你可以用不同的方式使用 Vue：

• 無需構建步驟，漸進式增強靜態的 HTML
• 在任何頁面中作為 Web Components 嵌入
• 單頁應用 (SPA)
• 全棧 / 服務端渲染 (SSR)
• Jamstack / 靜態站點生成 (SSG)
• 開發桌面端、移動端、WebGL，甚至是命令行終端中的界面

3.?單文件組件

在大多數啟用了構建工具的 Vue 項目中，我們可以使用一種類似 HTML 格式的文件來書寫 Vue 組件，它被稱為單文件組件?(也被稱為?*.vue?文件，英文 Single-File Components，縮寫為?SFC)。大家可以認為vue只要一個頁面（一個HTML文件），頁面的跳轉和切換都是在這個頁面上，基于路由來進行vue組件的切換。

二、怎么創建第一個vue項目

1、確保存在nodejs,可以通過npm -v測試，沒有需要npm install,（如果已經安裝，控制臺不能使用，需要配置環境變量）

?如果沒有下載通過一下代碼下載：

npm install

2、?npm create vue@latest：創建一個最新版本的vue項目

 npm create vue@latest

3、cd? 項目名:切換到當前項目

4、npm install(簡寫：install i)：在項目中安裝nodejs

5、npm run dev:啟動項目

6. 創建成功效果

三、項目結構解析

了解一門技術的最簡單的方法就是了解項目的目錄結構，這里就為大家詳細的介紹一下項目結構：

?四、基礎頁面樣式和基礎內容的格式化

?打開終端打開項目網頁的頁面查看：

?頁面并不是空的，原因是每次創建一個新項目的時候都會有自己的基礎頁面，我們可以把基礎樣式的壓面內容和樣式刪掉，接來就帶大家刪除：

刪除和注釋后的樣子：

刪除App根組件的代碼：

保留結構層（html底代碼），樣式層（css樣式代碼），邏輯層（te/js代碼）的基本代碼：

?再打開?打開終端打開項目網頁的頁面查看：

這樣原來的頁面和基礎樣式就被清除了。?

五、選項式 API?(Options API)?和組合式 API(Composition API)

1. 基本概念

其實我相信大家看見聽見選項式API和組合式API大家肯定會都會有個問題：

①這個兩個到底是什么？

• 選項式 API（Options API）：是 Vue2 中主要的編程方式，在 Vue3 中也保持兼容。它通過在組件對象中定義?data、methods、computed、watch?等選項來組織代碼，每個選項對應組件的不同功能模塊。
• 組合式 API（Composition API）：是 Vue3 引入的新特性，以?setup?函數為入口，通過?ref、reactive、computed?等函數來創建響應式數據和邏輯，允許將相關功能的代碼聚合在一起，更靈活地組織組件邏輯
• 總的來說：選項式 API（vue2：） 和組合式 API(vue3)是vue的兩種不同的寫法，都能通過他們來寫頁面，但是新技術肯定要比舊技術要好，所以我們以后還是主要學習組合式 API。

②有什么區別嗎？

③都要學嗎？

對于新手，可先掌握選項式 API 建立基礎，再逐步學習組合式 API；對于有經驗的開發者，建議重點掌握組合式 API 以充分發揮 Vue3 的優勢。

2. vue的子組件的創建和頁面渲染的原理

2.1?創建子組件

創建選項式子組件：

創建組合式子組件：（代碼更加簡介）

?2.2?單頁面渲染的原理

大家仔細閱讀了前面的內容應該知道vue只有一個頁面，渲染的基本步驟是：

components的子組件==>App根組件==>main.ts渲染==>index頁面

①子組件寫入基本文字提示

②導入App.vue根組件?

?③main.ts渲染到index

3. 選項式API示例

<template><div class="person"><h2>姓名：{{ name }}</h2><h2>年齡：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯系方式</button></div>
</template>
<script lang="ts">
export default {name: 'App',data() {return {name: '張三',age: 18,tel: '13888888888'}},methods: {changeName() {this.name = 'zhang-san'},changeAge() {this.age += 1},showTel() {alert(this.tel)}}
}
</script>
<style scoped>
</style>

4. 組合式API實例

<script setup lang="ts">import { ref } from 'vue'let name = ref('張三')let age = ref(18)let tel = ref('12345678901')function changeName() {name.value = '李四'}function changeAge() {age.value++}function showTel() {alert(tel.value)}
</script><template><h1>組合式API寫法</h1><div class="person"><h2>姓名：{{ name }}</h2><h2>年齡：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年齡+1</button><button @click="showTel">點我查看聯系方式</button></div>
</template><style scoped></style>

運行結果：

六、總結

Vue3 作為 Vue.js 的重大更新，帶來了性能的顯著提升、源碼的優化、更好的 TypeScript 支持以及眾多新特性。在項目創建方面，Vite 作為新一代構建工具，相比 vue - cli 具有更快的啟動速度和更好的開發體驗，是創建 Vue3 項目的推薦選擇。

通過本文的介紹，我們了解了 Vue3 的核心特性、項目創建方法、第一個應用的實現以及實際案例解析。希望這些內容能幫助你快速上手 Vue3，并在實際開發中充分發揮其優勢。無論是從 Vue2 遷移到 Vue3，還是直接學習 Vue3，都能感受到它帶來的便利和提升。