vue.js入门实例
（1）页面模板javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js--快速入门Demo</title>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
.......
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:''
})
</script>
</body>
</html>
(2)添加表格内容：v-for
<div id="app">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>做者</th>
<th>价格</th>
<th>操做</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books">
<td class="active">{{book.id}}</td>
<td class="success">{{book.name}}</td>
<td class="warning">{{book.author}}</td>
<td class="danger">{{book.price}}</td>
<td class="text-center">
<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
new Vue({
el:'#app',
data: {
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
}]
},
methods: {//方法
delBook:function(book){
/...../
}
}
});
</script>
(3) 删除按钮的事件:v-on:click或者@clickcss
methods: {
delBook:function(book){
this.books.$remove(book);
}
}（4）删除按钮单双行样式不一样：template,v-if
<template v-if="book.id%2==0"><!--模板-->
<td class="text-center">
<button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
</td>
</template>
<template v-else>
<td class="text-center">
<button type="button" class="btn btn-danger" @click="delBook(book)">删除</button>
</td>
</template>
(5)添加图书：v-modelhtml
<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" @click="addBook()">添加</button>
</div>
methods: {
addBook: function() {
//计算书的id
this.book.id = this.books.length + 1;
this.books.push(this.book);
//将input中的数据重置
this.book = '';
}
}
(6)过滤器，添加自定义排序功能：filter
vue
<tr v-for="book in books|orberBy sortparam">
<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>
data: {
sortparam: ''
},
methods:{
sortBy: function(sortparam) {
this.sortparam = sortparam;
}
}
(7)vue-resource: 经过 XMLHttpRequest 或 JSONP 发起请求并处理响应
new Vue({
el:'#app',
ready: function() {//页面加载完成时就去请求
this.$http.get('json/book.json').then(function(response){
// 响应成功回调
this.$set('books',response.data);
}, function(response){
// 响应错误回调
console.log('fail');
});
},
data:{
books:''
}