Vue是一個小巧輕便的JavaScript庫。它有一個簡單易懂的API，能夠讓開發者在開發web應用的時候更加簡易便捷。實際上，一直讓Vue引以為豪的是它的便捷性、執行力、靈活性。
這篇教程的目的就是通過一些例子，讓你能夠概覽一些基本的概念和特性。在接下來的其他教程裡，你會學到Vue更多的有用的特性，從而用Vue搭建一個可擴展的項目。
利用new Vue()創建一個Vue實例
我們可以先初始化一個html頁面，然後我們需要引入Vue 的 js 文件。引入的方式有很多，我們可以在script中引入Vue的cdn，或者去官網上下載Vue的min.js，或者用 npm 安裝一個Vue的依賴。方便起見，本文中就用cdn引入。
<!DOCTYPE html>
<html>
<head>
<title>從零開始學Vue</title>
</head>
<body>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</body>
</html>
當你在開發過程中，確保你使用的是沒有壓縮過的版本，因為沒有壓縮的版本會提供有用的詳細的警告，將會給你的代碼書寫節省很多時間。
我們先在body裡面寫入一個div，並且創建一個Vue實例，然後將實例和div綁定起來。
當你創建一個新的Vue實例的時候要使用Vue()構造器，然後在你的實例中指出你的掛載點。這個掛載點就是你想要劃分出來的Vue實例的邊界。掛載點和實例邊界是一一對應的，你只能在掛載點上處理你實例邊界內的事務，而不能在你的掛載點上處理實例邊界外的事務。
在Vue實例中設置掛載點的參數是 “ el ”，el 的值可以用dom元素定義。
<!DOCTYPE html>
<html>
<head>
<title>從零開始學Vue</title>
</head>
<body>
<div id="vueInstance">這中間就是實例掛載點的實例邊界</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
// 創建一個新的Vue實例，並設置掛載點
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
就像你在上面看到的那樣，new一個Vue()就能創建一個新的實例，然後指定一個DOM元素作為實例的掛載點。定義掛載點的時候，我們用到了css選擇器的id來定義。實例化的名字也可以自己來定義，以便之後調用。
利用v-model進行雙向數據綁定
我們可以用v-model對input輸入框進行綁定，從而我們可以使用動態的獲取數據對象的值。你可以認為v-model是一個指定的屬性，就像html元素的屬性。這裡的雙向數據綁定可以用在很多表單元素上，比如input、textarea、select。
Vue利用v-model這個指令綁定了一個數據，而這個數據是我們希望能夠通過用戶輸入操作而更新的數據。
比如我們下面這個例子，我們要在input標簽上綁定數據name，我們需要在Vue實例中的data對象中實現聲明。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//之後這行會省略
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
無論用戶輸入多少次，這個name都會被自動更新。並且，如果name的值被改變了，其他有映射name的地方的值也會被修改。這種input框和映射的同步修改的原因，就是利用v-model這個指令，讓數據通過底層的數據流進行綁定後直接修改。這就是數據的雙向綁定的概念。
為了證明這個概念，我們可以利用$data打印出數據的映射來看看。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
<p>{{ $data | json }}</p> //#1
<p>{{ name }}</p> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
1中：
$data是Vue實例觀察的數據對象，本質類型是一個對象，所以可以轉成json。可以用一個新的對象替換。實例代理了它的數據對象的屬性。
{{}}，利用兩個花括號進行插值。這裡插入的值是$data實時變化的值。
| json，只是一個更直觀的能讓數據展示出來的方法。也可以看做是一個過濾器，就像JSON.stringify()的效果一樣。
2中：{{ name }}，就是直接在插值表達式，兩個花括號中間插入數據變量，直接映射name的值。
Vue就是這麼簡單的進行數據的雙向綁定，只需要一個v-model指令就可以，而不需要利用js或者jq來控制數據。相信你能從上面的例子中理清邏輯。
利用v-on進行事件綁定
Vue是利用v-on指令進行事件監聽和事件分發的。你可以在Vue的實例中創建一個方法來綁定監聽事件，可以創建一個方法來分派一個點擊事件。
下面的例子中，我們將創建一個say方法，這個方法綁定在一個button上。點擊產生的效果就是彈出一個帶有用戶name的歡迎框。為了將這個方法指派給button，我們需要用v-on:click來進行事件綁定。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點擊</button> //#1
<button @click="say">歡迎點擊</button> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
},
methods : {
say : function(){
alert('歡迎' + this.name);
}
}
});
</script>
當然了，不僅是可以綁定click點擊事件，還可以綁定其他鼠標事件，鍵盤輸入事件等一些js的事件類型。比如v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其他的自定義事件。
在開發過程中，你可能會頻繁的用到事件綁定，v-on寫起來有點麻煩，所以上例中提供了兩種寫法，#2就是對#1寫法的縮寫。利用@代替v-on，這裡不多說。
利用v-if或者v-show進行條件判定
如果我們希望用戶在登錄之後才能看到歡迎彈窗，而如果沒有登錄則給它一個登錄界面。Vue會提供給我們v-if指令和v-show指令用來控制不同登錄狀態下的顯示內容。
利用先前的例子，我們可以用loginStatus的值來控制是否登錄，如果是true則顯示輸入框和按鈕讓他能夠看到歡迎彈窗，但如果是false（即未登錄），則只能看到輸入賬號、密碼的輸入框和提交按鈕（暫時不進行身份驗證，只改變登錄狀態）。
<div id="vueInstance">
//loginStatus為true時會顯示的section
<section v-if="loginStatus">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點擊</button>
<button @click="switchLoginStatus">退出登錄</button>
</section>
//loginStatus為false時會顯示的section
<section v-if="!loginStatus">
登錄用戶: <input type="text">
登錄密碼: <input type="password">
<button @click="switchLoginStatus">登錄</button>
</section>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian',
loginStatus : false
},
methods : {
say : function(){
alert('歡迎' + this.name);
},
switchLoginStatus : function(){
this.loginStatus = !this.loginStatus;
}
}
});
</script>
this的執行就是實例V。this的指向是一個需要自己去搞懂的問題，這裡不多說。在上述例子中，只要把V-if換成v-show，一樣可以獲得等同的效果。同時v-if和v-show他們都支持v-else，但是綁定v-else命令的標簽的前一兄弟元素必須有 v-if 或 v-show。
在上面的例子中，只要點擊“登錄”或者“退出登錄”按鈕都會觸發switchLoginStatus方法，只要觸發了這個方法就會導致loginStatus的狀態變化（在true和false中進行切換），從而改變了html中的v-if的判斷條件結果的變化，基於當前的loginStatus的布爾值的狀態，使得顯示的section是不同狀態下的section。
v-show和v-if之間有什麼區別呢?
在切換 v-if 塊時，Vue有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。
這個差別也許對你目前的開發來說並不重要，但是你還是要注意和留心，因為當你的項目開發變大的時候，這點會變得重要起來。
利用v-for輸出列表
如果你是經營一個電商平台的商人的話，你一定有很多頁面都需要渲染商品列表的輸出。v-for指令允許循環我們的數組對象，用 “element in arrayObj” 的方式，念作“循環arrayObj這個數據對象裡的每一個element”。
下面的例子中，我們將會利用v-for指令循環輸出一個商品列表。每一個商品都會在一個li中，li中輸出商品的名稱、價格和商品類型。
<div id="vueInstance">
<ul>
<li v-for="el in products">
{{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
</ul>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
products : [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
}
});
</script>
當然了，data中的數組對象，可以不用像上面這樣定義也可以，我們可以從數據庫導入，或者是利用ajax請求得到。這裡只是為了演示v-for。
有時候我們可能會需要拿到商品在數組對象裡的對應下標。我們可以用$index來獲得。
//#1
<li v-for="el in products">
{{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
//#2
<li v-for="(index,el) in products">
{{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
計算屬性Computed
計算屬性的應用場景，一般是在有一個變量的值需要其他變量計算得到的時候，會用到。
比如，例如用戶在輸入框輸入一個數 x，則自動返回給用戶這個數的平方 x²。你需要對輸入框進行數據綁定，然後當數據修改的時候，就馬上計算它的平方。
<div id="vueInstance">
輸入一個數字: <input type="text" v-model="value">
<p>計算結果：{{ square }}</p>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
value : 1
},
computed : {
square : function(){
return this.value * this.value;
}
}
});
</script>
計算屬性定義數值是通過定義一系列的function，就像我們先前定義methods對象的時候是一樣的。比如square方法是用來計算變量“square”的，其方法的返回值是兩個this.value的乘積。
接下來可以用computed做一個復雜一點例子。系統會隨機取一個1~10以內的數字，用戶可以在輸入框隨機輸入一個1~10之內的數字，如果剛好用戶的輸入和系統的隨機數剛好匹配，則游戲成功，反之失敗。
<div id="vueInstance">
輸入1~10內的數字: <input type="text" v-model="value">
<p>計算結果：{{ resultMsg }}</p>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
value : null,
randNum : 5//第一次隨機數為5
},
methods : {
getRandNum: function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
},
computed : {
resultMsg : function(){
if (this.value == this.randNum) {
this.randNum = this.getRandNum(1, 10);
return '你猜對了!';
} else {
this.randNum = this.getRandNum(1, 10);
return '猜錯了，再來!';
}
}
}
});
</script>
後記
到此為止，你就已經能夠掌握了Vue的基本使用，世界上最簡潔最漂亮的框架之一，它的構建有著自己完整的設計思想，而且越來越流行。這個框架足夠小而輕，在你的開發中會給你帶來更加流暢的用戶體驗，並有效提高開發效率。上文中舉了一系列例子，都掌握了嗎？
利用new Vue()創建一個新的Vue實例，並設置掛載點
利用v-model指令對表單控件進行雙向綁定
了解 $data , {{}} , $index 在輸出數據時的用法
利用v-on進行事件綁定，methods的用法
結合v-on，利用v-if或者v-show進行條件判定，並了解區別
利用v-for循環輸出列表
計算屬性Computed的基本應用
現在你已經基本掌握了Vue的基礎。接下來你要做的就是多看看Vue的一些最新時訊，或者跟我繼續了解Vue的旅程。
github地址:https://github.com/AppianZ/Close2Vue
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。