1、什么是Vue
????????Vue是一款用于構建用戶界面的JavaScript框架。它基于標準HTML、CSS和JavaScript構建，并提供了一套聲明式的、組件化的編程模型，可以高效地開發用戶界面。
????????Vue.js是一套構建用戶界面的漸進式框架，采用自底向上增量開發的設計，核心庫只關注視圖層。
????????另一方面，Vue完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用，其特點綜合了angular（模塊化開發MVVM）和react（虛擬DOM，在內存中模擬DOM操作）的優點。
? ? ? ? 中文官網：Vue.js - 漸進式 JavaScript 框架 | Vue.js
2、MVVM
? ? ? ? 1、什么是MVVM ？
????????????????MVVM? 是 ?Model-View-ViewModel? 的縮寫，它是一種用于構建 ?用戶界面（UI）?? 的 ?軟件架構模式（設計模式）?，主要用于實現 ?數據與視圖的雙向綁定，讓開發者更高效地構建交互式前端應用。
? ? ? ? ? ? ? ? MVVM源于MVC（Model-View-Controller）模式。
? ? ? ? 2、核心組成：
? ? ? ? ????????M：Model? 模型層，這里表示 JavaScript對象
? ? ? ? ????????V：View 視圖層，這里表示DOM（HTML操作的 元素）?，即用戶看到的界面
? ? ? ? ????????VM：ViewModel? ?連接視圖和數據的中間件，負責 ?數據綁定、狀態管理、邏輯處理，并實現 ?View 和 Model 的解耦，Vue.js就是 MVVM中ViewModel層的實現者
? ? ? ? ? ? ? ? 在MVVM 架構中，是不允許“數據”和“視圖”直接通信，只能通過ViewModel來通信，ViewModel其實就是定義了一個OBserver觀察者?
? ? ? ? 3、核心思想：
????????????????數據變化自動更新視圖，用戶操作自動更新數據，實現雙向綁定。?
? ? ? ? 4、數據流向：
????????????????Model → ViewModel → View
????????????????????????數據從 Model 傳到 ViewModel，再通過數據綁定顯示到 View（界面）
?????????????????View → ViewModel → Model
????????????????????????用戶在界面上的操作（比如輸入、點擊）會通過 ViewModel 更新 Model 中的數據
? ? ? ? 5、核心特性：
| 特性 | 說明 |
|---|---|
| 數據綁定? | 數據變化時，UI 自動更新；用戶修改 UI，數據也自動同步 |
| 雙向綁定? | 最典型的 MVVM 特性，比如 Vue 中?v-model?實現輸入框和數據的雙向同步 |
| ?視圖與邏輯分離? | View 不直接操作 Model，而是通過 ViewModel 交互，提高可維護性 |
| UI 自動更新? | 當數據（Model）發生變化時，UI（View）自動重新渲染，無需手動操作 DOM |
| 邏輯集中管理? | ViewModel 負責處理業務邏輯、狀態管理、數據轉換等 |
? ? ? ? 6、模式圖示：
+-------------+| View | <---> 用戶看到的界面（HTML/CSS）+-------------+↑ | 雙向綁定| ↓+-------------+| ViewModel | <---> 處理數據綁定、業務邏輯、狀態管理+-------------+↑ || ↓+-------------+| Model | <---> 數據層（業務數據、API 數據等）+-------------+? ? ? ? 7、MVVM 與其他架構模式對比：
| 模式 | 全稱 | 核心思想 | 常見應用 / 框架 |
|---|---|---|---|
| ?MVC? | Model-View-Controller | View 通過 Controller 操作 Model，適合傳統服務端渲染 | AngularJS（早期）、Backbone.js、Ruby on Rails |
| ?MVP? | Model-View-Presenter | Presenter 負責更新 View，適合測試驅動開發 | 一些早期的桌面 / 移動應用 |
| ?MVVM? | Model-View-ViewModel | 雙向綁定，View 和 Model 解耦，數據驅動視圖 | ?Vue.js、Knockout.js、WPF、Android Jetpack |
? ? ? ? 8、MVVM 的優點：
| 優點 | 說明 |
|---|---|
| UI 和邏輯分離? | 前端開發者可以更專注于數據和交互邏輯，而不是手動操作 DOM |
| 雙向綁定? | 數據和視圖自動同步，減少大量冗余的 DOM 操作代碼 |
| 提高開發效率? | 借助框架的響應式機制，可以更快速構建交互式應用 |
| ??可維護性強? | 代碼結構清晰，便于協作和后期維護 |
| ??適合復雜交互應用? | 特別適合數據頻繁變化、需要實時更新 UI 的現代 Web 應用 |
? ? ? ? 9、MVVM 的缺點
| 缺點 | 說明 |
|---|---|
| 學習成本? | 對初學者來說，理解數據綁定、響應式原理可能需要一定學習 |
| 調試困難? | 數據變化自動更新視圖，有時難以追蹤數據變化的來源 |
| ??過度依賴框架? | 框架通常對 MVVM 實現有高度封裝，更換框架可能需要重構 |
????????????????
??????ViewModel 能夠 觀察到數據的變化，并且對視圖對應的內容進行更新
? ? ? ?ViewModel?能夠監聽到視圖的變化，并能夠通知數據發生改變
? ? ? ?Vue.js就是一個MVVM的實現者，核心就是實現了DOM的監聽與數據的綁定
3、項目導入vue
? ? ? ? 1、CDN方式
? ? ? ? ? ? ? ? 百度搜索vue.js CDN選擇任意一個引入項目即可
? ? ? ? 2、官網下載
? ? ? ? ? ? ? ? 地址：Vue.js - 漸進式 JavaScript 框架 | Vue.js
? ? ? ? ? ? ? ? 以下是vue2的下載方式
? ? ? ? 3、項目引入vue
<script src="js/vue.js"></script>4、第一個vue項目
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script>
</head>
<body>
<!--view層，模板-->
<div id="app">{{msg}}
</div><script>var vm = new Vue({el: "#app", //element對象，綁定的對象// model層：數據data: { //要賦予的數據msg: "hello vue!"}});//viewModel層，當通過頁面控制臺直接vm.msg="你好！"改變值變化時，頁面展示的值也會隨之變化，這就是雙向綁定
</script>
</body>
</html>
![[Element-plus]動態設置組件的語言](http://pic.xiahunao.cn/[Element-plus]動態設置組件的語言)
