vue從入門到精通教程（學vue必備哪些基礎）

原文地址：
       https://www.cnblogs.com/caolidan/p/7719121.html

1、首先，vue是什麼?

我們看官網上的介紹:vue.js 是一套構建使用者介面的漸進式js框架。那麼什麼叫漸進式框架呢？所謂漸進式就是一步一步的用嘛，比如你只想在頁面上渲染一些簡單資料，那你只用它的核心程式碼就好。如果你想更進一步用到元件，那你需要用vue的元件系統。如果專案更大,那你需要用到路由啊,構建工具等等。專案需要哪塊就用哪塊，這樣自底向上增量開發的設計，加上與單檔案元件和 Vue 生態系統支援的庫結合，使得Vue 也完全勝任複雜的單頁應用程式，而且上手也很容易了。

2、vue的兩個核心點

介紹核心點之前我們先寫個小例子吧。

頁面中引入vuejs ,可以去官網上下載開發版本,也可以採用CDN方式直接引入

vuejs{{ content }}let data = { content:"Hello World!" } var vm = new Vue({ el:"#app", data:data });

最好,還是手動敲一遍吧，你就會知道你會犯多少低階錯誤。在瀏覽器中檢視例項，開啟控制檯，輸入vm.content = "Hi, vue!",回車頁面立馬輸出變為HI,vue! 這說明資料改變,頁面也自動改變。那就引出了Vue的第一個核心點——響應式的資料繫結。是不是很AngularJS很像?他兩的實現原理不同:

髒值檢查（angular.js）

思路：angular.js 是通過髒值檢測的方式比對資料是否有變更，來決定是否更新檢視，最簡單的方式就是通過 setInterval() 定時輪詢檢測資料變動，angular只有在指定的事件觸發時進入髒值檢測，大致如下：

• DOM事件，譬如使用者輸入文字，點選按鈕等。( ng-click )
• XHR響應事件 ( $http )
• 瀏覽器Location變更事件 ( $location )
• Timer事件( $timeout , $interval )
• 執行 $digest() 或 $apply()

資料劫持（Vue.js）

思路： vue.js 則是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。

具體怎麼使用Object.defineProperty()實現響應式資料繫結,可以看這裡:
       http://www.jb51.net/article/106484.htm

第二個核心點——組合的檢視元件

vue寫頁面時，我們可以頭部一個元件，側邊一個元件，中間內容區域另外一個元件。vue將我們的頁面對映為元件樹。這樣做元件可重用，好處很多。

3、虛擬DOM

首先我們定義的模板（無論是html模板,字串模板還是render函式定義的模板），編譯呼叫內部的渲染函式(createElement)形成圖二的資料結構，經過render生成虛擬DOM樹，這個虛擬的DOM樹存在記憶體中,經過內部的編譯器最後形成真實的DOM。

那麼虛擬DOM有什麼好處呢？我們知道執行js很快,但是大量操作DOM就會很慢,我們在更新一個元素的值後,經常要重新整理整個DOM,這樣造成了資源的浪費。有了虛擬DOM，當某個DOM節點的屬性值發生變化後，只更新這一小塊的節點，這樣大大提高了效能。虛擬DOM這塊，還有好多演算法，有機會再開部落格總結，自己可以先研究一下。

4、MVVM模式

M 代表資料模型，V 檢視，VM檢視模型。我們從model層拿到資料以後，通過vm層到view檢視層進行渲染，vm層幫我們幫資料進行繫結，它就是m層和v層之前的橋樑，把他兩聯絡起來。具體到專案中，我們可以看剛才的例項：