Vue框架
- Vue概念
- 漸進式框架
- Vue安裝
- 安裝配置npm
- 腳手架安裝
- 生成vue 專案
- Vue目錄結構
- 呼叫關系圖
- MVVM概念
- 特點
- MVC和MVVM框架區別
- 專案分析：
- Vue生命周期 lifecycle
- 組件化（Element-UI）
- 概念
- ElementUI 安裝
- 拓展：觀察者設計模式
- 總結
Vue概念
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，近年來發展非常迅速，標準也在不斷完善已經達到ES6時代，
ECMAScript 6.0（簡稱 ES6）是JavaScript語言的下一代標準，已經在 2015 年 6 月正式發布了，它的目標是讓JavaScript語言可以用來撰寫復雜的大型應用程式，成為企業級開發語言，洗白其一直被“鄙視”的腳本語言的前身，
隨著js的強大，三大巨頭橫空推出，形成鼎足之勢，前端新三大框架：Angular/React/Vue，三種是目前主流js框架，Angular全面，專案代碼多；Vue輕便，針對性解決問題，拿來就用，開發存在局限性，新手可以從vue上手，再去了解react和angular，
Vue是我們國人開發，作者：尤雨溪，是一個基于JavaScript的漸進式前端框架，更符合中國人習慣，在中國很多大型一線企業中廣泛應用，Vue3.0使用TypeScript，TypeScript是JavaScript的超集，微軟研發，語法更加細致嚴謹，改js腳本語言為向一線強語言java、c靠攏，可以構建大型專案，基于ES6標準，
漸進式框架
Vue是一個用于構建用戶界面的漸進式SPA單一頁面框架，與其他龐大而單一框架不同的是，Vue從一開始就被設計為可逐步采用，
- 可以只使用vue.js
- 可以只使用vue.js + components組件
- 可以只使用vue.js + components組件 + router路由
- 可以只使用vue.js + components組件 + router路由 + vuex狀態管理
- 構建大型vue專案：npm（包依賴） + webpack（打包、壓縮、合并等）
Vue安裝
安裝配置npm
驗證node.js 安裝：
dos命令提示符下執行（有版本號即安裝成功）：
node安裝（v8.11.3，至少8以上）
node -v
npm安裝（v5.6.0）
npm -v
參考博客：https://blog.csdn.net/weixin_53601359/article/details/115680033
安裝 cnpm
cnpm是一個完整 npmjs.org 鏡像，可以用此代替nodejs.org官方版本，同步頻率目前為10分鐘一次，以保證盡量與官方服務同步，（目的為了提高訪問、下載速度）
查看當前配置的鏡像源
npm config get registry
執行結果：
https://registry.npmjs.org/
或者
https://registry.npm.taobao.org/
npm切換到淘寶鏡像方式（提高下載速度）：
npm config set registry https://registry.npm.taobao.org
直接使用淘寶鏡像命令方式：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm版本，有版本號即安裝成功（直接支持cnpm命令，和npm一樣只是庫不同）
cnpm –v
腳手架安裝
vue-cli 腳手架工具安裝與配置（需要幾分鐘）
npm install vue-cli -g#安裝vue-cli腳手架
npm uninstall vue-cli -g#卸載vue-cli腳手架
查看版本（有版本號即安裝成功）：
vue --version# 2.9.6
vue -V
生成vue 專案
指定檔案下開啟cmd，project為自定義專案名稱，不可使用大寫
vue init webpack project
安裝成功：
To get started:
cd project進入專案
npm run dev啟動服務，ctrl+c停止
注意：埠號可能不同，默認為8080，如果發現埠占用npm會自動改變埠號，具體 以當前環境為準，
Vue目錄結構
這個目錄結構非常重要，就如你要生孩子去婦幼保健院，你要游泳去游泳館，規定好每個目錄的作用，方式和位置就約定統一了，有了這套規則，檔案就不會亂放，這樣找資源時就知道到哪里找，寫代碼檔案時就按功能放到指定的目錄中，這種方式已經非常常見，如Maven構建專案目錄有強制的約定，如Spring框架中約定大于配置，
- src 目錄是一個很大的目錄，包羅萬象
- components 把專案中所需要的組件都放在此目錄下，默認會創建一個HelloWorld.vue，我們可以自己添加，如添加Header.vue
- router 訪問的路徑，Vue提倡的是SPA（Single Page WebApplication）單頁面設計，這是以前舊頁面中如果包含其他資源，必然涉及到路徑問題，Html沒有很好的解決這個問題，而router它是一種解決路徑的新發明，很好的解決了多模塊頁面重繪問題，簡而言之就是給組件指明一個路徑，我們怎么去訪問它，不同組件是依靠配置的路徑router來訪問的，router非常強大，老系統是URL改變是在服務端進行重繪，而router支持在客戶端重繪，就是URL變化，頁面內容變化，但不請求服務器端，以前的程式是做不到的，
- view 就是用戶要訪問的頁面都存放在這個目錄下，如Index.vue
- static中保存一些靜態的資源，如jquery、css、圖片等
- package.json 各組件版本，特別啟動的引數
- build/webpack.dev.config.js 核心默認組態檔，啟動的配置引數
- build/webpack.base.conf.js 基礎組態檔
- index.html 首頁，Vue是SPA單頁面開發，頁面入口，定義div#app
- src/main.js 公共的組件就直接配置到這個檔案中，私有的就配置到view中
- src/App.vue 根組件
- src/router/index.js 引入子組件HellWorld.vue
呼叫關系圖
簡單來說專案加載的程序是：
index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue
可以看到Vue專案是自有一套規則，一套機制的，非常系統化的，有固定的檔案，有自定義的檔案，各自放在指定的目錄下，指定的檔案中，指定的地方，最終來實作用戶的需求，那在開發之前，你就必須了解這套機制，寫代碼的時候就規則清晰，如有神助，知道該如果寫代碼，知道為什么這么寫，代碼檔案該放在哪，它們是誰呼叫誰，互相怎么呼叫的了，
MVVM概念
和傳統框架不同，Vue采用了最新的MVVM框架，它最大的特點就是，傳統js機制操作的是頁面，像html+css+js專案，大家會發現頁面和頁面里的資料混雜在一起，
而MVVM框架體系引入后端早已深入人心的分層思想，是后端MVC框架的延伸，實作把資料和頁面分離，我們可以在頁面布局好后，只對資料進行操作，當資料改變，頁面上的內容會自動隨之改變，而無需開發者開發專門的代碼去改變，如之前ajax技術實作的區域重繪，
簡而言之，MVVM框架實作了頁面和資料的分離，代碼結構更加清晰，責任更加明確，同時實作自動化，資料變化，頁面隨之變化，無需寫代碼，非常棒的一個改進，這是javascript、jquery、bootstrap等無法做到的，也是前端為何開始推崇Vue這些框架的根本原因，也標示著jquery的終結，
特點
- 一個輕量級的mvvm框架，雙向系結，資料動態更新，gzip后大小只有20k+
- 其核心思想是資料驅動、組件化的前端開發
- 原生html頁面操作的是dom，而vue.js操作的是資料，從而屏蔽了復雜晦澀難懂的dom結構，和傳統前端開發開發的關注點完全不同，傳統方式關注的是都像的document結構的api，而vue關注的是組件，是資料，也更加符合面向物件的方式
MVC和MVVM框架區別
MVC全名是Model-View-Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟體設計典范，用一種業務邏輯、資料、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶互動的同時，不需要重新撰寫業務邏輯，
MVVM是Model-View-ViewModel的簡寫，它本質上就是MVC的改進版，MVVM就是將其中View的狀態和行為抽象化，讓我們將視圖UI和業務邏輯分開，當然這些事 ViewModel已經幫我們做了，它可以取出Model的資料同時幫忙處理View中由于需要展示內容而涉及的業務邏輯，
專案分析：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el : '#app',
data : {
message: "Hello Vue."
}
})
</script>
</html>
創建Vue匿名物件，直接引數就是一個物件，一個類似json格式的js物件，這樣的代碼結構更加簡潔，
Vue物件的引數：
- el： 系結到指定名稱的html標簽上
- data： 系結的資料，相當于給html中使用的時候所傳的值
Vue生命周期 lifecycle
使用vue做專案時，我們需要了解vue物件的生命周期和生命周期函式（Vue 實體從創建到銷毀的程序），這樣才能知道哪些事情應該在哪個函式里做，
如頁面創建時，頁面加載時，頁面更新時，頁面銷毀時？
在這程序中，我們在每個特定階段會觸發一些方法（這些方法具備一些功能），我們給這些方法起了名字叫做生命周期鉤子函式/組件鉤子，
生命周期函式：
- vue實體在某一個時間點會自動執行這些函式；
- 生命周期鉤子函式不允許寫成箭頭函式；
可以分為3個階段，一共8個鉤子：初始化階段（創建前/后, 載入前/后），運行中（更新前/后），銷毀（銷毀前/銷毀后）
細分每個程序：
| 默認值 | 取值范圍 |
|---|---|
| new Vue | 創建vue實體 |
| init events & lifecycle | 開始初始化 |
| beforeCreate | 組件剛被創建，組件屬于計算之前，如data屬性等 |
| init injections & reactivity | 通過依賴注入匯入依賴項 |
| created | 組件實體創建完成，屬性已系結，此時DOM還未生成 |
| el 屬性 | 檢查vue配置，即new Vue()里面的el項是否存在，有就繼續檢查template項，沒有則等到手動系結呼叫v.$mount() |
| template | 檢查配置中的template項，如果沒有，則被系結區域的el物件的outHTML（即整個#app DOM ，包括
和
標簽）都作為被填充物件替換掉填充區域 |
| beforeMount | 模板編譯、掛載之前 |
| create v$el and replace el | 編譯、并替換了被系結元素 |
| mounted | 編譯、掛載 |
| befor update | 組件更新之前 |
| updated | 組件更新之后 |
| destroy | 當v.$destroy()被呼叫，開始拆卸組件和監聽器，生命周期終結 |
組件化（Element-UI）
概念
組件 (Component) 是 Vue.js 最強大的功能之一，在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能，可以理解為組件是對HTML元素的擴展，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意型別的應用界面都可以抽象為一個組件樹，
Element：一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，界面優美，瀏覽器兼容，事半功倍，
官網地址：
https://element.eleme.cn/#/zh-CN #首頁
https://element.eleme.cn/#/zh-CN/component/layout #組件頁
https://unpkg.com/browse/element-ui@2.15.1/ 組件下載地址
ElementUI 安裝
在Vue專案目錄下運行CMD
npm i element-ui -D
將element-ui檔案放到rc目錄下：
包含：js腳本、css樣式檔案、.ttf、.woff字體檔案
拓展：觀察者設計模式
設計模式是最精髓的東西，是軟體思想的體現，是軟體的靈魂，如三大框架SSM只所以傲視群雄，它的傲嬌就來自對經典設計模式的應用，所以如果只會應用不懂其義，那你只是個碼農；如何能領會設計模式的奧義，你就有了高級程式員的潛力；如果你能自己仿寫，你就有了架構師的入門證，
Vue這類為何稱之為框架，就是其不是簡單的編程，而是應用了經典的設計模式，那它應用了什么什么模式呢？它應用了“觀察者設計模式”，
那什么是觀察者設計模式呢？
觀察者模式定義了一種一對多的依賴關系，讓多個觀察者物件同時監聽某一個目標物件，當這個目標物件的狀態發生變化時，會通知所有觀察者物件，使它們能夠自動更新，
- 頁面data中的address就是資料
- get為獲取當前資料，set為設定資料新值
- 觀察者watcher就為那多個插值運算式和input文本框，在頁面加載時這些關系進行雙向系結
- 當我們讓資料變化時，如input文本框修改內容，其就呼叫資料的set的方法，把資料進行更新，其更新就被vue框架通知notify眾多的觀察者，如眾多的插值運算式就會觸發trigger，進行再次渲染re-render，修改虛擬dom樹，最終vue框架區域宣傳頁面
- 同樣，當我們利用谷歌瀏覽器改變資料v.address賦值時，就呼叫資料的setter方法進行資料更新，資料更新后，通知眾多的觀察者，觀察者更新如上面的流程
可以看出Vue設計非常巧妙，我們頁面展現的資料，必然會涉及到資料的讀寫，于是Vue實作了一整套機制，這套機制監控資料的獲取（get），資料的更新（set），這樣當資料變化，Vue就能知道，它知道有什么用呢？它就能控制當資料變化時就能重新進行頁面的渲染，從而用戶看到頁面展現新的內容，
總結
可以看到Vue這類為何稱為框架，名副其實，當之無愧，寫javaScript時，我們要先去學習其復雜的api（document.getElementById()），寫jQuery時，又學一套復雜的api(一堆的選擇器)，特別它的寫法雖然簡潔，卻晦澀難懂，需要死記大量英文單詞，初學者極易寫錯，門檻很高，就現在很多企業的程式員依然被絆倒，說不明白，講不清楚，使用中bug滿天飛，一堆糊涂蟲，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276211.html
標籤：其他
上一篇：CSS快速入門及優勢（前端基礎）
下一篇：前路漫漫，寫給初級前端的學習指南