Vue 教程第一篇——基礎概念

認識 Vue

關於 Vue 的描述有很多，不外乎都會拿來與 Angular 和 React 對比，一樣頭頂 MVVM 雙向數據驅動設計模式光環的 Angular 天然被對比的最多，但到目前爲止，Angular 在熱度上已明顯不及 Vue，性能已成爲最大的詬病。

在我看來，Vue 和 Angular 的對比有種早些年 Java 和 ASP.NET 的對比，對於開發者而言，ASP.NET 官方自己已實現好了大量的框架和功能，使用起來很是的方便快捷，同時也提供了無限的可擴展性，對比起 Java 而言，後者在自己框架和功能上都不及 ASP.NET，但一樣都擁有無限的可擴展性，相比之下，原本 ASP.NET 頗有一統天下的可能，但現實終歸現實，ASP.NET 自己的框架和功能實現並無換來多少稱讚，反在性能和安全性方面被詬病。回看 Vue 和 Angular 的陣營，我也總有這麼一種感受。

因此，在這個開源的年代，我認爲一個框架功能不須要有多麼強大，再強大再完善的功能都抵不上「適合」兩字，反而輕量級且有無限可擴展性會成爲全部開發者的追求。

關於 Vue、React 和 Angular，其實都是在原生 JS 基礎上，對面向對象不同的實現方式而已，因此要想使用這三者中的任意一種，首先要有必定的 JS 基礎和對面向對象有必定的認識。

在代碼層面，Vue 只是一個構造函數，整個 Vue 的實現都在實例化這個構造函數開始。

<script src="https://unpkg.com/vue/dist/vue.js"></script>

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

var vm = new Vue({
    el: '#app'// Vue 實例元素
    data: {
      //數據
    }
    ...
  })

認識數據驅動模式

開始接觸前端編程的基本上都是先學習 DOM 節點操做，jQuery 在這一領域上一度成爲了標準，因此在前端編程的領域中，jQuery 幾乎是每一個開發者的標配。隨着先後端分離的成熟，產品或項目都趨於分佈式部署，開發者已不知足於操做 DOM 節點， 設計模式便慢慢的被前端化。

數據驅動的設計模式在思惟邏輯上與 DOM 節點操做徹底不同。

<div id="div1"></div>
  <div id="app">
    <span>{{message}}</span>
  </div>

//DOM 節點操做
  document.getElementById('div1').innerText = '節點被動改變'  

  //Vue 數據驅動： 當 message 發生改變的時候，span 會相應的發生改變，而不須要手動去改變 span。
  var vm = new Vue({
    el: '#app',
    data: {
      message: '我是經過映射顯示的文本'
    }
  })

認識 MVVM 模式

M：Model，稱之爲數據模型，在前端以對象的形式表現。

var data = {message: '我就是一個數據模型'}

V：View，視圖，也就是 HTML

<div id="app">
    <span>我是視圖</span>
  </div>

VM：ViewModel，就是鏈接數據和視圖的橋樑，當 Model 發生改變的時候，ViewModel 便將數據映射到視圖。

那麼數據驅動模式和 MVVM 模式有什麼關係，換句話說，MVVM 是數據驅動模式的一種實現，Vue 是 MVVM 的一種實現。