前端JavaScript框架--Vue介紹

阿新 • • 發佈：2021-12-18

1 前端發展介紹

1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 
  -> 給後端(PHP、Python、Go、Java)  後端嵌入模板語法、後端渲染完資料
  -> 返回資料給前端 -> 在瀏覽器中檢視

2.Ajax的出現 -> 後臺傳送非同步請求，Render+Ajax混合

3.單用Ajax（載入資料，DOM渲染頁面）：前後端分離的雛形

4.Angular框架的出現（1個JS框架）：出現了“前端工程化”的概念（前端也是1個工程、1個專案）

5.React、Vue框架：當下最火的2個前端框架（Vue：國人喜歡用，React：外國人喜歡用）

6.移動開發（Android+IOS） + Web（Web+微信小程式+支付寶小程式） + 桌面開發（Windows桌面）：前端 -> 大前端

7.一套程式碼在各個平臺執行（大前端）：谷歌Flutter（Dart語言：和Java很像）可以執行在IOS、Android、PC端

8.在Vue框架的基礎性上 uni-app：一套編碼 編到10個平臺

9.在不久的將來 ，前端框架可能會一統天下

2 Vue介紹

# 是基於JavaScript的 構建使用者介面的漸進式框架 
    就是前端專案可以區域性使用，也可以整個專案(前端工程)都使用
    
# 版本
Vue：1.x  2.x(使用)  3.x

# 優點：
1.單頁面開發 - 硬體要求低,比如手機
2.元件化開發
3.資料驅動      
4.資料的雙向繫結  
5.虛擬DOM
    把整個頁面的dom載入到記憶體中，再把整個專案再對映到真實的dom（硬體的檔案中），基於快取機制。
6.輕量級   
    ps：angular 超大型專案比較合理   react做原生的移動端更好

2.1 MVVM介紹

# MVVM介紹   mvc(後端架構)   mvvm(前端架構)    mvp(安卓架構)	
  Model-View-ViewModel 的縮寫
    
    -Model ：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中
    
    -View  ：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS）
    
    -ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，
    所以前面程式碼中，data裡面的資料 被顯示在p標籤中 就是vm物件自動完成的
    	(雙向資料繫結：JS中變數變了，HTML中資料也跟著改變)

2.2 元件化和單頁面開發

# 元件化開發：
    就是類似python-DTL中的include，把頁面一些固定的部分做成一個個的元件，每個元件的內容都可以被替換和複用
    
# 單頁面開發：
    只需要一個頁面，結合元件化開發來替換頁面中的內容，頁面的切換隻是元件的替換，頁面還是隻有1個index.html
    
    個人理解：整個前端工程只有一個index頁面，訪問不同的頁面內容(首頁，文章等),會將內容全部弄成一個由元件化組成的dom文件，再整體替換到index頁面中。

3 Node.js介紹

# 1.由來：
    JavaScript 是一門解釋型語言，正常只能執行在瀏覽器中(瀏覽器中有它的直譯器)
    前端工程師為了能夠正常編寫後端，就開發了一個能夠執行在作業系統之上的軟體(JavaScript直譯器)，就是把Chrome的V8引擎拎出來，再用c語言寫了一些底層包實現的
    
# 2.Node.js 是寫JavaScript的直譯器 

Node.js ====類似====  python
npm     ====類似====  pip  用來安裝第三方依賴包

4 關於編輯器的選擇

-AndroidStudio：
    谷歌公司出錢買了jebrains版權+ADT
    
-webstorm： 收費
    jebrains公司出的(pycharm，goland，idea，phpstorm)
    
-vscode：微軟 免費

-sublime text：收費

# 咱們使用pycharm，裝一個外掛開發vue

5 第一個hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>{{name}}</h1>
</div>

</body>

<script>
    var vm = new Vue({
        el:'#app',  //id為app的div，被vue託管了
        data:{
            name:'hello world'
        }
    })
</script>
</html>