一、 Vue.js是什么

Vue.js是一套構建用戶界面（view）的MVVM框架。Vue.js的核心庫只關注視圖層，並且非常容易學習，非常容易與其他庫或已有的項目整合。

1.1 Vue.js的目的

Vue.js的產生核心是為了解決如下三個問題：

解決數據綁定的問題；
Vue.js框架生產的主要目的是為了開發大興單頁面應用（SPA：Single Page Application）

Angular.js中對PC端支持的比較良好，但是對移動端支持就一般。而Vue.js主要支持移動端，也支持PC端。

3. 它還支持組件化。也就是可以將頁面封裝成若干個組件，采用積木式編程，這樣是頁面的復用度達到最高（支持組件化）。

1.2 Vue.js特性

MVVM模式

M: model 業務模型，用處：處理數據，提供數據

V: view 用戶界面、用戶視圖

業務模型model中的數據發生改變的時候，用戶視圖view也隨之變化。用戶視圖view改變的時候，業務模型model中的數據也可以發生改變。

組件化
指令系統
Vue.js 2.0開始支持虛擬DOM（Vue.js 1.0 是操作的真是DOM，而不是虛擬DOM）

虛擬DOM可以提升頁面的刷新速度。

二、Vue.js起步

每個 Vue 應用都需要通過實例化 Vue 來實現。

語法格式如下：

var vm = new Vue({
  // 選項
})

第一個Vue實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實例 </title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>uname: {{uname}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                uname: "老李頭",
                url: "www.baidu.com",
                alexa: "10000"
            },
            methods: {
                details: function() {
                    return  this.uname+ " - 掉坑里了！";
                }
            }
        })
    </script>
</body>
</html>

可以看到在 Vue 構造器中有一個el 參數，它是 DOM 元素中的 id。在上面實例中 id 為 vue_det，在 div 元素中：

<div id = "vue_det"></div>

這意味着我們接下來的改動全部在以上指定的 div 內，div 外部不受影響。

接下來我們看看如何定義數據對象。

data 用於定義屬性，實例中有三個屬性分別為：site、url、alexa。

methods 用於定義的函數，可以通過 return 來返回函數值。

{{ }} 用於輸出對象屬性和函數返回值。

<div id="vue_det">
    <h1>uname: {{uname}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

當一個 Vue 實例被創建時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的所有的屬性。當這些屬性的值發生改變時，html 視圖將也會產生相應的變化。

// 我們的數據對象 
var data = { 
　　uname: "老李頭", 
　　url: "www.baidu.com", 
　　alexa: 10000
} 
var vm = new Vue({ 
　　el: '#vue_det', 
　　data: data 
}) 
// 它們引用相同的對象！ 
document.write(vm.uname === data.uname) // true 
document.write("<br>")

// 設置屬性也會影響到原始數據 
vm.uname = "老鄧頭" 
document.write(data.uname + "<br>") // Runoob 
// ……反之亦然 
data.alexa = 1234 
document.write(vm.alexa) // 1234