在學習vue之前，想必大家對於網頁還是有一定的瞭解的，在效能方面，vue更能夠讓大家容易接受。這裡我們先比較一下現在主流的開發工具。

現在主流的開發工具有：Vue、React、Angular等。

這裡我們只比較Vue和Angular

Vue與Angular的比較：

在Vue中，有許多方法和Angular相似，這主要是因為Angular是Vue早期開發的靈感來源。然而，Augular中存在許多問題，在Vue中已經得到解決。

• 在API中
  Vue相比Angular更加的簡練

• 在資料的繫結方面
  Vue的方法是在不同元件間使用了單項資料流(引用型別除外),很好的處理了主模組中的資料沒有被汙染。而Angular使用的是雙向資料繫結

• 在效能方面
  在Vue方面，很容易就可以進行優化，因為它不需要使用到髒查詢
  而Angular則不同，它使用到了髒查詢，而隨著我們使用的watcher使用的越多，就需要重新計算。如果watcher涉及到了其他的更新操作，那麼髒查詢可能就需要更多。更有可能使用到許多不常用的技術，讓你去查詢API文件，從這點上看我更喜歡Vuejs

好了，比較就到這裡。現在開始介紹一下Vue的一些基礎功能。

首先，我們需要使用到的是用一個簡潔的模板來宣告式的允許Vue將資料進行DOM渲染操作。

HTML:

<!-- Vue例項最外層 -->
<div id="app">
    <!-- 和angularjs一樣，使用
 
{{}}包裹變數 -->
    <h1>{{hello}}</h1>
</div>

JAVASCRIPT:

// 建立模板對應的例項
var app = new Vue({
    el : '#app',//el：elements Vue對應的根標籤
    data : {//對應的資料
        hello : ' Hello Vue! '
    }
})

Vue中的方法大多與Angular中的相似，就像v-model和ng-model都是一樣的雙向資料繫結：

<div id="app2">
    <!-- 使用v-model可以進行資料的雙向繫結 -->
 

    <input type="text" v-model="name">
    <h1>{{name}}</h1>
</div>

//javascipt:
var vm2 = new Vue({
    el: '#app2',
    data : {
        name : 'xiaoming'
    }
})

在這裡許多與Angular的方法我就不一一舉例了，

我們現在來看一下什麼是Vue的單向資料流：

在Vue中，向其他的例項傳遞資料的話需要使用到props，而props傳入的值為布林型別，數值型別或是字元型別等的話，在主資料中顯示的依舊是起先傳入的值。

但是，如果傳入的是引用型別的話，那麼主資料就會隨著你這個例項中的值改變而改變。

這裡要想講清這個概念的話就必須要說道棧問題了，在瀏覽器中，如果你要使用引用型別以外的型別的話，瀏覽器會劃分兩個不同的區域，來承接其資料,而賦值時只會進行一次賦值操作，所以說如果我們在其賦值操作後給其中一個重新賦值，那麼它們兩個變數就不會相等。

var a = 10;
var b = a;
a = 20;
console.log(b,a);
//10,20

而引入型別則不同，它在瀏覽器劃分區域時，如果兩個變數指向的是同一個區域，所以它們的值進行了一個相等的賦值後，那麼這兩個的值一致相等。

var arr1 = [1,2,3,4,5];
var arr2 = arr1;
arr2.splice(1,1);
console.log(arr1,arr2); 

//[1, 3, 4, 5] [1, 3, 4, 5]

所以說這裡需要注意的一點。