Vue.js是一個漸進式的基于MVVM設(shè)計模式的純前端javascript框架。

適用于以數(shù)據(jù)增刪改查操作為主的項目。

中文官網(wǎng)：https://cn.vuejs.org/

優(yōu)點：（1）漸進式：不要求整個項目都用Vue做，可以和個別技術(shù)混搭；

? ? ? ? ? ?（2）純前端js框架：與nodejs無關(guān)！單靠瀏覽器就可以運行；

? ? ? ? ? ?（3）便于大項目的開發(fā)，避免重復編碼，提高開發(fā)效率。

使用：（1）直接下載，并使用script引入vue.js文件；

? ? ? ? ? ?（2）使用Vue-Cli腳手架工具。

MVVM設(shè)計模式是對前端三大部分代碼的重新劃分。

原理：訪問器屬性+觀察者模式+虛擬Dom樹

（1）View——界面/視圖

包括傳統(tǒng)的HTML+CSS，增強了HTML的功能：

比如：HTML中可以寫變量，js表達式，分支和循環(huán)等程序。

（2）Model——模型

程序中創(chuàng)建的或從服務端獲取的數(shù)據(jù)，一般用JS中的一個對象來保存。

模型對象中保存著一個頁面所需要的所有變量。

（3）ViewModel——視圖模型

替代手寫的Dom/Jquery操作，把模型中的數(shù)據(jù)和界面中的HTML元素 “綁定” 在一起。

可讓頁面元素內(nèi)容和js程序中的數(shù)據(jù)聯(lián)動變化，自動同步數(shù)據(jù)和頁面元素。

Tips：

（1）定義界面的時候，整個界面只能包含在一個統(tǒng)一的父元素下。

????????<div id="app">......</div>

（2）new Vue ( ) 將 data{ } 對象引入new Vue ( ) 中，并打散 data { } 對象，使 data { } 對象中的每個屬性都變?yōu)閱为毜膶傩?，直接隸屬于 new Vue( ) 對象下。

（3）new Vue ( ) 將 methods{ } 對象引入new Vue ( ) 中，并打散 methods { } 對象，使?methods { } 對象中的方法/函數(shù)直接隸屬于 new Vue( ) 對象下。

（4）methods { } 對象中的方法/函數(shù)和?data { } 對象中的每個屬性屬于平級，所以，在methods的方法中，可以直接用 "this.屬性名" 去操作data中的屬性。

（5）虛擬Dom樹（Virtaul Dom）

只保存可能變化的節(jié)點的簡化版Dom樹。

new Vue( ) 時，vue對象通過掃描真實的Dom樹，只將可能變化的元素保存到虛擬Dom樹上。

當收到變量改變的通知時，vue會快速遍歷虛擬Dom樹，找到受影響的元素，調(diào)用已經(jīng)封裝好的Dom函數(shù)，只更新頁面中受影響的元素，不受影響的元素，不會改變。

優(yōu)點：a.小，僅保存可能變化的元素，遍歷快，查找快！

? ? ? ? ? ?b.只更新受影響的元素，效率高！

? ? ? ? ? ?c.已經(jīng)封裝了Dom操作，自動修改頁面，避免大量重復的Dom操作。