Vue 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，但可以與第三方庫或既有項目整合。
尤雨溪 是Vue.js框架的作者，HTML5版Clear的打造人。他認為，未來App的趨勢是輕量化和細化，能解決問題的應用就是好應用。而在移動互聯網時代大的背景下，個人開發者的機遇在門檻低，成本低，跨設備和多平台四個方面。
嘗試 Vue.js
可以創建一個 .html 文件，然后通過如下方式引入 Vue：
<!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 或者： <!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
學習視頻： https://scrimba.com/playlist/pXKqta
聲明式渲染
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作。
現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。打開你的瀏覽器的 JavaScript 控制台 (就在這個頁面打開)，並修改 app.message 的值，你將看到上例相應地更新。
除了文本插值，我們還可以像這樣來綁定元素特性：
<div id="app-2"> <span v-bind:title="message"> 鼠標懸停幾秒鍾查看此處動態綁定的提示信息！ </span> </div>
var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } })
這里我們看到的 v-bind 特性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。
條件與循環
使用 v-if 控制切換一個元素是否顯示也相當簡單：
<div id="app-3"> <p v-if="seen">現在你看到我了</p> </div>
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
繼續在控制台輸入 app3.seen = false，你會發現之前顯示的消息消失了。
這個例子說明了我們不僅可以把數據綁定到 DOM 文本或特性，還可以綁定到 DOM 結構。
v-for 指令可以綁定數組的數據來渲染一個項目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } })
在控制台里，輸入 app4.todos.push({ text: '新項目' })，你會發現列表最后添加了一個新項目。
處理用戶輸入
為了讓用戶和你的應用進行交互，我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法：
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div>
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 來處理，你編寫的代碼只需要關注邏輯層面即可。
Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
組件化應用構建
組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。
幾乎任意類型的應用界面都可以抽象為一個組件樹：
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中注冊組件很簡單：
// 定義名為 todo-item 的新組件 Vue.component('todo-item', { template: '<li>這是個待辦項</li>' })
現在你可以用它構建另一個組件模板：
<ol> <!-- 創建一個 todo-item 組件的實例 --> <todo-item></todo-item> </ol>
但是這樣會為每個待辦項渲染同樣的文本，這看起來並不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個 props：
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>
ue 組件非常類似於自定義元素——它是 Web 組件規范的一部分，這是因為 Vue 的組件語法部分參考了該規范。例如 Vue 組件實現了 Slot API 與 is 特性。Vue 組件還提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流、自定義事件通信以及構建工具集成。