概述
vue.js作為現在筆記熱門的JS框架，使用比較簡單易上手，也成為很多公司首選的JS框架。 但是對於初學者可能學起來有些麻煩，所以推出《從零開始學Vue》系列博客，本系列計划推出19篇博客文章，這是最簡單的入門第一篇！ 如下是暫定的系列博客目錄，歡迎有興趣的同學關注學習~~
系列博客目錄一覽（暫定）
01 Vue.js入門
02 Vue.js實例
03插值、指令
04過濾器Filters
05計算屬性Computed
06 Class與Style綁定
07 監聽屬性 Watch
08 條件渲染
09 列表渲染v-for
10 事件處理
11 初識組件
12 命令行工具(CLI)搭建
13 介紹vue-cli工程目錄結構
14 組件嵌套/組件CSS作用域Scoped
15 Props屬性傳值
16 傳值與傳址
17 自定義事件傳值
18 生命周期鈎子
19 路由
1.1 Vue.js 概念
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
1.2 起步
官方指南假設你已了解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。
1.3 初試Vue.js
1.3.1 聲明式渲染：模板語法——插值（文本）
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
HTML：
<div id="app"> {{ message }} </div>
JS：
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
瀏覽器輸出內容：Hello Vue!
除了文本插值，我們還可以像這樣來綁定元素特性：
HTML：
<div id="app-2"> <span v-bind:title="message"> 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！ </span> </div>
JS：
var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } })
注意：這里我們遇到了一點新東西。v-bind 特性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。
1.3.2 模板語法——條件v-if與循環v-for
控制切換一個元素是否顯示也相當簡單：
HTML：
<div id="app-3"> <p v-if="seen">現在你看到我了</p> </div>
JS：
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
瀏覽器輸出打印：現在你看到我了
注意：這個例子演示了我們不僅可以把數據綁定到 DOM 文本或特性，還可以綁定到 DOM 結構。
還有其它很多指令，每個都有特殊的功能。例如，v-for 指令可以綁定數組的數據來渲染一個項目列表：
HTML：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
JS：
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } })
在控制台里，輸入 app4.todos.push({ text: '新項目' })，你會發現列表最后添加了一個新項目。
1.3.3 模板語法——處理用戶輸入
為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法：
HTML：
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div>
JS：
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
注意：在 reverseMessage 方法中，我們更新了應用的狀態，但沒有觸碰 DOM——所有的 DOM 操作都由 Vue 來處理，你編寫的代碼只需要關注邏輯層面即可。
1.3.4 雙向數據綁定
Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。
HTML：
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
JS：
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
1.3.5 組件化應用構建
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中注冊組件很簡單：
// 定義名為 todo-item 的新組件 Vue.component('todo-item', { template: '<li>這是個待辦項</li>' })
現在你可以用它構建另一個組件模板：
<ol> <!-- 創建一個 todo-item 組件的實例 --> <todo-item></todo-item> </ol>
但是這樣會為每個待辦項渲染同樣的文本，這看起來並不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個 prop：
Vue.component('todo-item', {
// todo-item 組件現在接受一個
// "prop"，類似於一個自定義特性。
// 這個 prop 名為 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
現在，我們可以使用 v-bind 指令將待辦項傳到循環輸出的每個組件中：
<div id="app-7"> <ol> <!-- 現在我們為每個 todo-item 提供 todo 對象 todo 對象是變量，即其內容可以是動態的。 我們也需要為每個組件提供一個“key”，稍后再 作詳細解釋。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } })
盡管這只是一個刻意設計的例子，但是我們已經設法將應用分割成了兩個更小的單元。子單元通過 prop 接口與父單元進行了良好的解耦。我們現在可以進一步改進 <todo-item> 組件，提供更為復雜的模板和邏輯，而不會影響到父單元。
在一個大型應用中，有必要將整個應用程序划分為組件，以使開發更易管理。在后續教程中我們將詳述組件，不過這里有一個 (假想的) 例子，以展示使用了組件的應用模板是什么樣的：
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>