概述
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：
varapp =new Vue({
? el: '#app',
? data: {
? ? message: 'Hello Vue!'? }
})
瀏覽器輸出內容：Hello Vue!
除了文本插值，我們還可以像這樣來綁定元素特性：
HTML：
<div id="app-2"><span v-bind:title="message">? ? 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
? </span></div>
JS：
varapp2 =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：
varapp3 =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：
varapp4 =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：
varapp5 =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：
varapp6 =new Vue({
? el: '#app-6',
? data: {
? ? message: 'Hello Vue!'? }
})
1.3.5?組件化應用構建
組件系統是?Vue?的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹：
在?Vue?里，一個組件本質上是一個擁有預定義選項的一個?Vue?實例。在?Vue?中注冊組件很簡單：
// 定義名為 todo-item 的新組件Vue.component('todo-item', {
? template: '
這是個待辦項
'})
現在你可以用它構建另一個組件模板：
<ol><!-- 創建一個 todo-item 組件的實例 --><todo-item></todo-item></ol>
但是這樣會為每個待辦項渲染同樣的文本，這看起來并不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個?prop：
Vue.component('todo-item', {
? // todo-item 組件現在接受一個// "prop"，類似于一個自定義特性。// 這個 prop 名為 todo。? props: ['todo'],
? template: '
{{ todo.text }}
'})
現在，我們可以使用?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?接口與父單元進行了良好的解耦。我們現在可以進一步改進??組件，提供更為復雜的模板和邏輯，而不會影響到父單元。
在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發更易管理。在后續教程中我們將詳述組件，不過這里有一個?(假想的)?例子，以展示使用了組件的應用模板是什么樣的：
<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view></div>
