使用vue.js原文介紹：Vue.js是一個構建數據驅動的web界面庫。Vue.js的目標是通過盡可能簡單的API實現響應式數據綁定和組合的視圖組件。vue.js上手非常簡單，先看看幾個例子：
例一：Helloworld
html代碼：
<div id="app"> {{ message }} </div>
js代碼：
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
例二：雙向綁定
說明：html中以v-開頭的標記都是vue.js提供的標記。v-model屬性表示數據模型。
html代碼：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
js代碼：
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
例三：渲染列表
說明：v-for表示遍歷集合數據，下面的代碼遍歷集合todos並輸出每項。
html代碼：
<div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div>
js代碼：
new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } })
例四：事件綁定
說明：v-on是vue.js特性，表示綁定事件方法。
html代碼：
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>
js代碼：
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
看完上面的4個例子，感覺vue.js挺容易入門，確實是這樣，不得不說vue.js深受開發人員喜愛，簡單易學。前面的例子只是展示了如何使用vue.js，但它到底包含了哪些功能？vue.js提供了兩大核心功能：響應的數據綁定、視圖組件化。接下來我們看看vue.js是怎么定義這兩大功能的。
兩大核心功能：響應的數據綁定、視圖組件化
響應的數據綁定：vue.js擁抱數據驅動的概念，一當DOM和數據綁定，Dom將會和數據保持同步，數據有變動DOM會立即渲染，在也不用擔心數據變更后DOM如何渲染的問題。並且如果手動修改數據綁定的DOM元素的值，數據模型也會被同步。因為vue.js支持雙向綁定。綁定過程如下圖所示：
視圖組件化：vue支持抽象組件化，我們整個系統可以使用若干個小的組件構造，例如下面是一個html頁面對應的摸快。整個系統可分為三個大的組件：app-nav、app-sidebar、app-content，app-sidebar下又包含兩個小組件，app-content下包含三個小組件。這些組件也相當於是自定義的DOM元素，我們可以直接使用。
html代碼：
<div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
前面簡單介紹了vue的主要功能，接下來我們詳細的看看在實際項目開發中，vue.js到底給我們提供了哪些方面的功能。
數據綁定語法
1.文本綁定：在html的文本字符串中，可以通過{{}}格式包含vue特性。
<span>Message: {{ msg }}</span>
2.單向綁定：只同步一次，如果msg特性值有變化，html中的文本不會被更新。
<span>This will never change: {{* msg }}</span>
3.輸出包含html的數據：1和2中的代碼不支持輸出html代碼，需要用下面的格式。
<div>{{{ raw_html }}}</div>
4.html屬性值綁定
<div id="item-{{ id }}"></div>
5.支持javascript表達式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
6.過濾器：vue提供了屬性過濾功能，下面的代碼message是一個特性，filterA是一個過濾函數，最終輸出為filterA(message)的結果。
{{ message | filterA }}
7.判斷語法：如果條件成立則輸出結果，條件不成立無任何輸出。
<p v-if="greeting">Hello!</p>
8.html屬性綁定：下面代碼和：<a href={{url}}”></a>和效果一樣，其實最終也會轉換為v-bind模式。
<a v-bind:href="url"></a>
9.事件綁定：使用v-on為html的事件屬性綁定方法。
<a v-on:click="doSomething">
10.v-bind縮寫：下面的第一段代碼為v-bind的完整寫法，第二段代碼為縮寫方式。
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- 完整語法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 縮寫 --> <button :disabled="someDynamicCondition">Button</button>
11.v-on縮寫：和v-bind相似，區別在於v-on用@符號表示，而v-bind用:表示。
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
vue提供的語法讓開發人員很方便的完成view和model的動態綁定，vue不僅提供特性和html元素屬性的綁定，它對css和style支持也比較完善。
Class與Style綁定
1.class綁定對象特性：vue綁定class支持直接綁定json字符串格式設置。下面代碼vue實例包含isA和isB兩個類型為布爾的屬性，可供元素的class直接綁定。下面的html代碼有人會有疑問：在div上寫了兩次class屬性。這個問題不用擔心，vue會自動把兩個class屬性合並成一個。
html代碼：
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
js代碼：
data: { isA: true, isB: false }
輸出結果：
<div class="static class-a"></div>
2.class字節綁定對象：vue支持直接給class屬性綁定對象，這樣寫也更靈活些。
html代碼：
<div v-bind:class="classObject"></div>
js代碼：
data: { classObject: { 'class-a': true, 'class-b': false } }
3.數組語法：class屬性可直接綁定一個數組，數組里邊的項為vue實例特性。
html代碼：
<div v-bind:class="[classA, classB]">
js代碼：
data: { classA: 'class-a', classB: 'class-b' }
條件渲染
1.v-if和v-else：下面代碼如果條件為true則輸出yes，否則輸出no。
<h1 v-if="state === 1">Yes</h1> <h1 v-else>No</h1>
2.template v-if輸出多條html元素：v-if和template標簽配合使用可嵌入多個html標簽，當着模板使用，最終輸出值包含html元素。
<template v-if="state === 1"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
3.v-show和v-else: 和v-if相似，都作為條件判斷，不同點在於渲染的區別。v-if只有等條件成立時才會渲染html元素，而v-show不管條件是否成立都會渲染，如果條件不成立則設置元素的display為none。
4.v-show和組件混合使用問題：將v-show用在組件上時，由於指令優先級v-else會出問題，所以不要使用v-else。下面代碼是錯誤的：
<custom-component v-show="condition"></custom-component> <p v-else>這可能也是一個組件</p>
應該這樣寫：
<custom-component v-show="condition"></custom-component> <p v-show="!condition">這可能也是一個組件</p>
列表渲染
1.語法v-for：通過v-for可遍歷js對象集合，然后用可以直接輸出每一項的數據。下面的代碼直接用文本輸出items的每項數據。
html代碼：
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
js代碼：
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
2.獲取遍歷項索引：使用v-for遍歷有時候想得到每一項的索引值，可通過$index直接獲取，$index是vue直接提供的特性。我們也可以給索引取別名：
<div v-for="(idx, item) in items"> {{ idx }} {{ item.message }} </div>
3.template和v-for：有時候我們想每次輸出多條html標簽，那么我們可通過v-for和template配合使用達到效果：
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul>
4.操作數組：vue提供了一些數組操作方法，包括push、pop、shift、unshift、splice、sort、reverse等。如果我要對vue實例example1的集合特性items添加項，可以使用:
example1.items.push({message: ‘Baz’});
如果要過濾數組選項，可以使用filter函數。例如下面的代碼找出item屬性message包含Foo的選項集合：
example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) })
5.數組操作問題
不能直接使用數組索引設置元素，例如vm.items[0] = {}，這樣設置的話，vue是不能檢測到數組的變化。可使用set方法：
example1.items. set(0, { childMsg: 'Changed!'})
不能直接修改數組長度，這樣設置后vue檢測不到變化。可直接使用一個空數組替換：
example1.items = [];
6.對象v-for:v-for也可直接遍歷對象屬性。
html代碼：
<ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul>
js代碼：
new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } })
方法與事件處理器
1.方法處理器：使用v-on監聽DOM事件，例如
html代碼：
<div id="example"> <button v-on:click="greet">Greet</button> </div
js代碼：
var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `methods` 對象中定義方法 methods: { greet: function (event) { // 方法內 `this` 指向 vm alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } } })
2.如何傳遞參數：可直接傳遞字符串或者對象，如果想傳遞事件對象可以使用$event：
<buttonv−on:click="say(′hello!′,eventHtml：<buttonv−on:click="say(′hello!′, event)">Submit</button>
js代碼和其他綁定一樣：
// ... methods: { say: function (msg, event) { // 現在我們可以訪問原生事件對象 event.preventDefault() } }
3.數據邏輯和事件邏輯隔離：為了讓數據模型只處理數據邏輯，而不混雜其他邏輯，vue.js提供了兩個事件修飾符.prevent和.stop。
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修飾符 --> <form v-on:submit.prevent></form>
4.按鍵修飾符：可以使用按鍵編碼或者別名。
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
vue.js提供的別名包括：enter、tab、delete、esc、space、up、down、left、Right。
vue.js也支持自定義別名，例如我們想控制F1按鍵事件，可以先給F1（編碼為112）定義一個別名：
// 可以使用 @keyup.f1 Vue.directive('on').keyCodes.f1 = 112
直接使用別名即可：
<input v-on:keyup.f1="doSomething">
表單控件綁定
1.text控件：如果修改了text控件的值，span綁定的message會不同更新。
<span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit me">
2.checkbox控件
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
多個checkbox綁定：每個checkbox綁定一個類型為數組的數據模型checkedNames。
html代碼：
input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames | json }}</span>
js代碼：
new Vue({ el: '...', data: { checkedNames: [] } })
3.radio
<input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span>
4.select
單選：
<select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span>
多選：
<select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected | json }}</span>
select的option也可以動態通過v-for方式渲染。
html代碼：
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>
js代碼：
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
以上的內容都是本人跟着官網學習記錄的筆記，內容都比較偏向基礎，如有哪些地方介紹有誤望各位指正。vue.js還有一個比較重要的知識點：組件。下篇內容應該主要分享vue.js組件，有需要的同學可關注下。
如果本篇內容對大家有幫助，請點擊頁面右下角的關注。如果覺得不好，也歡迎拍磚。你們的評價就是博主的動力！下篇內容，敬請期待！