什么是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 lang="en">
<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">
</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主页，所用的例子我也分享了，能够在这里检察并运转效果。
