Vue.js 快速入門
什麼是Vue.js
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可元件化的MVVM庫，同時擁有非常容易上手的API。作者是尤雨溪,寫下這篇文章時vue.js版本為1.0.7
準備
我推薦使用sublime text作為編輯器，關于這個編輯器可以看我這篇文章。在package control中安裝
- Vuejs Snippets
- Vue Syntax Highlight
推薦使用npm管理,建立兩個檔案app.html,app.js,為了美觀使用bootstrap，我們的頁面模闆看起來是這樣:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
.......
</div>
</div>
</div>
</body>
</html>
安裝
使用npm安裝：
npm install vue 當然你也可以在github上clone最新的版本并作為單檔案引入，或者使用CDN:
http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js
HelloWorld
動手寫第一個Vue.js 應用吧。app.html:
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>
app.js:
new Vue({
el:'#app',
data: {
message:'hello vue.js.'
}
});
建立Vue執行個體
在使用Vue.js之前，我們需要先像這樣執行個體化一個Vue對象：
new Vue({
el:'#app'
}); 雙向資料綁定
就像HelloWorld展示的那樣，app.html是view層，app.js是model層，通過vue.js（使用v-model這個指令）完成中間的底層邏輯，實作綁定的效果。改變其中的任何一層，另外一層都會改變。
插值
相信你也注意到了，通過{{value}}的形式就能取到value的值，并與value進行綁定。HelloWorld中改變input中的值時相應也改變了app.js中的message，進而{{message}}也得到改變。上面的代碼改為這樣：
{{*message}} 則message不會随着資料的改變而更新。同時還支援一些簡單的表達式：
{{message + 'vue is awesome'}}
{{ message.split('').reverse().join('') }}
常用的指令
v-model
v-model可用于一些表單元素,常見的input,checkbox,radio,select:
<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
v-for
清單渲染在實際開發中非常常見，vue.js使用v-for這個指令就能完成，v-for取代了1.0以前版本中的v-repeat。在app.js中準備一些資料:
new Vue({
el: '#app',
data: {
book: {
id: 0,
author: '',
name: '',
price: ''
},
books: [{
id: 1,
author: '曹雪芹',
name: '紅樓夢',
price: 32.0
}, {
id: 2,
author: '施耐庵',
name: '水浒傳',
price: 30.0
}, {
id: '3',
author: '羅貫中',
name: '三國演義',
price: 24.0
}, {
id: 4,
author: '吳承恩',
name: '西遊記',
price: 20.0
}]
}
})
在data裡我們設定了兩個資料book和book[] books，在app.html中我們隻要這樣就能擷取到資料了:
<tr v-for="book in books ">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
</tr>
如果你比較細心的話，在資料還未加載完時是會有閃爍的情況出現，解決方法也很簡單，使用v-cloak,然後定義css:
[v-cloak] { display: none } v-on
vue.js通過v-on完成事件處理與綁定，比如為一個button綁定click事件，我們就可以這麼寫:
<button v-on:click="doSomething">doSomething</button>
也可以縮寫:
<button @click="doSomething">doSomething</button>
我們需要為v-on傳入事件參數,然後在vue的執行個體中聲明doSomething這個方法就可以調用了:
new Vue({
el: '#app',
methods: {
doSomething: function () {
/...../
}
}
})
接着上面書的例子，我們用v-model綁定form：
<div id="add-book">
<legend>添加書籍</legend>
<div class="form-group">
<label for="">書名</label>
<input type="text" class="form-control" v-model="book.name">
</div>
<div class="form-group">
<label for="">作者</label>
<input type="text" class="form-control" v-model="book.author">
</div>
<div class="form-group">
<label for="">價格</label>
<input type="text" class="form-control" v-model="book.price">
</div>
<button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
</div>
在app.js中增加我們的addBook方法:
methods: {
addBook: function() {
//計算書的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//将input中的資料重置
this.book = '';
}
}
我們再健全一下功能，增加一個删除按鈕:
<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
delBook方法：
delBook:function(book){
this.books.$remove(book);
} vue.js為數組擴充了$remove方法，查找并删除我們作為參數傳遞過去的book。
v-if/v-else/v-show
顧名思義，v-if用于條件判斷，和v-else是一對。用法也很簡單，下面的代碼是将id為偶數的操作按鈕換個樣式:
<template v-if="book.id%2==0">
<td class="text-right">
......
<button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
.....
</td>
</template>
<template v-else>
.....
<td class="text-right">
<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
</td>
....
</template>
這裡用到了<template>标簽，用于包含多個元素，當元素隻有一個時，直接在元素上用v-if即可:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-show作用與v-if類似，不同的是v-show的元素會始終渲染并保持在 DOM 中,且v-show不支援<template>标簽。
過濾器
與Linux中的管道類似，vue.js也使用的是|:
{{message | uppercase}} 這樣就能輸出message的大寫了,過濾器也能串聯在一起使用:
{{message | reverse | uppercase}} 這裡reverse并不是内建的過濾器，我們可以用Vue.filter自定義:
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
過濾器支援接收參數，比較常用的是orderBy [param]和filterBy [param],現在我們為表格增加自定義排序的功能，為表頭綁定click事件:
<th class="text-right" @click="sortBy('id')">序号</th>
<th class="text-right" @click="sortBy('name')">書名</th>
<th class="text-right" @click="sortBy('author')">作者</th>
<th class="text-right" @click="sortBy('price')">價格</th>
想sortBy傳遞列的參數,定義sortBy和data:
data: {
sortparam: ''
},
methods:{
sortBy: function(sortparam) {
this.sortparam = sortparam;
}
}
添加過濾器:
<tr v-for="book in books | orderBy sortparam">
計算屬性
計算屬性可以幫助我們完成一些複雜的邏輯計算，比如我們需要添加一個書的總價，在vue執行個體中添加computed:
new Vue({
/.../
computed: {
sum: function() {
var result = 0;
for (var i = 0; i < this.books.length; i++) {
result = Number(this.books[i].price) + result;
};
return result;
}
},
/.../
})
在app.html中使用插值表達式:
{{sum}} vue-resource
vue-resource作為vue插件的形式存在，通過 XMLHttpRequest 或 JSONP 發起請求并處理響應。在開發中也非常常見，現在我們用vue-resource來請求books:
引入
和vue類似：
npm install vue-resource --save
如果你的項目遵循CommonJS:
var Vue = require('vue');
Vue.use(require('vue-resource'));
也可以直接引入單檔案或者CDN。
get
在vue中新增ready對象，當頁面加載完成時就去請求:
new Vue({
el: '#app',
ready: function() {
this.$http.get('book.json', function(data) {
this.$set('books', data);
}).error(function(data, status, request) {
console.log('fail' + status + "," + request);
})
},
data: {
....
books:''
},
.....
為了示範，這裡将json格式的資料儲存在book.json中,這段資料你可以直接使用JSON.stringify()得到：
[{"id":1,"author":"曹雪芹","name":"紅樓夢","price":32},{"id":2,"author":"施耐庵","name":"水浒傳","price":30},{"id":"3","author":"羅貫中","name":"三國演義","price":24},{"id":4,"author":"吳承恩","name":"西遊記","price":20}]
接下來你需要将app.html中運作在一個伺服器中，否則由于浏覽器安全的限制，是無法直接讀取的，如果你嫌麻煩可以用這個參數啟動chrome。
.\chrome.exe --allow-file-access-from-files 如果你使用了npm，想要啟動一個伺服器就太簡單了:
npm install http-server -g
//在目前目錄
http-server
//然後通路localhost:8080/app.html
post
post的文法也很簡單：
this.$http.post(url,postdata,function callback） 在使用的時候遇到一個小坑,這個$http請求和jquery的ajax還是有點差別，這裡的post的data預設不是以form data的形式，而是request payload。解決起來也很簡單：在vue執行個體中添加headers字段:
http: {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}
後來翻了下vue-resource的源碼，發現有更加簡單的做法:
Vue.http.options.emulateJSON = true; 這裡隻簡單介紹下，詳細的文檔請大家移步 這裡 吧。
vue.js目前還有衆多的插件，詳情看 這裡 。
總結
這裡簡單介紹了下vue.js的基本用法，但隻僅僅介紹了一小部分作為庫使用的内容，想了解更多vue.js的内容，還是多多關注vue.js的 github首頁 ，所用的例子我也分享了，可以在 這裡 檢視并運作結果。
更多
- http://vuejs.org/
- https://github.com/vuejs/
- http://vegibit.com/vue-js-tutorial/
- http://www.zhihu.com/people/evanyou
- http://www.html-js.com/article/column/99
原文 http://www.open-open.com/lib/view/open1447060624960.html