正文

Vue.js—实现图书管理系统

IP云
IP云V管理员/5 阅读
09/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

  前  言

今天我们主要一起来学习一个新框架的使用——Vue.js，之前我们也讲过AngularJS是如何使用的，而今天要讲的Vue.js的语法和AngularJS很相似，因为 AngularJS 是 Vue 早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流，这使应用中的数据流更加清晰易懂。

在实现图书馆系统之前，我们先学习一下Vue.js的一些基础语法的使用。

1   第一个Vue实例

每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的，当创建一个 Vue 实例时，你可以传入一个选项对象。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

Vue.js使用{{ }}绑定表达式，用于将表达式的内容输出到页面中。表达式可以是文字，运算符，变量等，也可以在表达式中进行运算输出结果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{message}}
</div> <script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//声明式渲染
var app = new Vue({ //创建Vue对象
el:"#app", //把当前Vue对象挂载到div标签上,#app是ID选择器
data:{
message:"Hello Vue!",//message是自定义的数据
} });
</script>
</body>
</html>

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；

data属性指向Model，data: message表示我们的Model是message对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

2   双向绑定实例

首先我们先解释一下什么是双向绑定， Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的。MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。将message绑定到文本框，当更改文本框的值时，{{ message }} 中的内容也会被更新。反之，如果改变message的值，文本框的值也会被更新。反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。

下面的栗子是在表单控件元素（input等）上创建双向数据绑定（数据源）；跟Angular中ng-model用法一样。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{message}} <input v-model="message" />
</div>
</body>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//声明式渲染
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue",
} });
</script>
</html>

3   Vue.js的常用指令

上面用到的v-model是Vue.js常用的一个指令，那什么是指令呢？

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性。

Vue.js提供了一些常用的内置指令，接下来就给大家介绍几个Vue中的常用指令：

1、v-if指令

2、v-else指令

3、v-show指令

4、v-for指令

5、v-on指令

6、v-bind 指令

3.1v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素,这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes</h1>
<h1 v-if="no">No</h1>
<h1 v-if="age >= 12">Age: {{ age }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 20,
}
})
</script>
</html>

3.2v-else指令

可以用 v-else 指令给 v-if 添加一个 "else" 块,条件都不符合时渲染。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="num>90">
{{score1}}
</div>
<div v-else>
{{bananer}}
</div>
</div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
num:98,
score1:"恭喜你是优秀哦！",
score2:"需要继续努力哦！"
}
});
</script>
</body>
</html>

3.3v-show指令

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。值得我们注意的是，v-show 不支持 <template> 元素，也不支持 v-else。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合实例</title>
</head>
<body>
<div id="app">
<h1 v-show="teng">这是个真理！</h1>
<template v-show="false">
<div>我好漂亮！</div>
<div>我非常漂亮！</div>
<div>我特别漂亮！</div>
</template>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
teng:true
}
})
</script>
</html>

3.4v-for指令

循环使用 v-for 指令,v-for 指令可以绑定数组的数据来渲染一个项目列表。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<ol>
<li v-for="teng in shuai">
{{ teng.name }}
</li>
</ol>
</div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
shuai: [
{ name: '帅！' },
{ name: '真帅！' },
{ name: '特别帅！' }
]
}
});
</script>
</body>
</html>

3.5v-on指令

事件监听可以使用 v-on 指令。

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。v-on 可以接收一个定义的方法来调用。除了直接绑定到一个方法，也可以用内联 JavaScript 语句.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p><input type="text" v-model="message"></p>
<p>
<!--click事件直接绑定一个方法-->
<button v-on:click="teng">我</button>
</p>
<p>
<!--click事件使用内联语句-->
<button v-on:click="say('帅！')">帅</button>
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js'
}, methods: {
teng: function() { alert(this.message)
},
say: function(msg) {
alert(msg)
}
}
})
</script>
</html>

3.6v-bind 指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.red {
width: 100px;
height: 100px;
background: green;
}
.style {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="class1"></div>
</div> <script>
new Vue({
el: '#app',
data: {
class1: {
red: true,
'style': true
}
}
})
</script>
</body>
</html>

4图书系统管理

根据上面我们所学习Vue的内容，我们来做一个图书管理系统进一步熟悉Vue.js的使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/vue.js"></script>
<style type="text/css">
#update-book{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1> <div id="app">
<table class="table table-hover ">
<br />
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in filterBooks">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.price}}</td>
<template v-if="book.id%2==0">
<td class="text-left">
<button type="button" class="btn btn-success" class="del" @click="delBook(book)">删除</button>
<button type="button" class="btn btn-success" @click="updataBook(book)">修改</button>
</td>
</template>
<template v-else>
<td class="text-left">
<button type="button" class="btn btn-danger" class="del" @click="delBook(book)">删除</button>
<button type="button" class="btn btn-danger" @click="updataBook(book)">修改</button>
</td>
</template>
</tr>
</tbody>
</table> <div id="add-book">
<div class="row" style="margin-bottom: 30px;">
<div class="col-md-3"style="text-align: right;font-size: 16px;line-height: 30px;">
请输入书名
</div>
<div class="col-md-5">
<input type="text"class="form-control" v-model="search"/>
</div>
</div> <h3>添加书籍</h3>
<hr />
<div class="form-group">
<label for="group">书名</label>
<input type="text" class="form-control" id="group" v-model="book.name">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" id="author" v-model="book.author">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" class="form-control" id="price" v-model="book.price">
</div>
<button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
</div> <div id="update-book">
<h3>修改书籍</h3>
<hr />
<div class="form-group">
<label for="group1">书名</label>
<input type="text" class="form-control" id="group1" v-model="book.name">
</div>
<div class="form-group">
<label for="author1">作者</label>
<input type="text" class="form-control" id="author1" v-model="book.author">
</div>
<div class="form-group">
<label for="price1">价格</label>
<input type="text" class="form-control" id="price1" v-model="book.price">
</div>
<button class="btn btn-primary btn-block" @click="updatasBook()">完成</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tushu.js" ></script>
</body>
</html>

JS代码：

var id=0;
new Vue({
el:'#app',
methods:{
addBook:function(){
this.book.id=this.books.length+1;
this.books.push(this.book);
this.book={};
},
delBook:function(book){
var blength=this.books.length;
this.books.splice(book.id-1,1);
for(var i=0;i<blength;i++){
if(book.id<this.books[i].id){
this.books[i].id-=1;
}
}
},
updataBook:function(book){
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id=book.id;
},
updatasBook:function(){
this.book.id=id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};
},
},
computed:{
filterBooks:function(){
var books=this.books;
var search=this.search;
// if(!search){
// return books;
// }
// var arr=[];
// for(var i=0;i<books.length;i++){
// var index=books[i].name.indexOf(search);
// if(index>-1){
// arr.push(books[i]);
// }
// }
// return arr; return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLowerCase())!=-1;
})
}
},
data:{
book:{
id:"",
author:"",
name:"",
price:""
},
books:[{
id:1,
author:"张三",
name:"张三自传漫画",
price:12.0
},
{
id:2,
author:"李四",
name:"李四自传漫画",
price:12.0
},
{
id:3,
author:"张三",
name:"张三自传漫画",
price:12.0
}
],
search:""
} })

增加数据：

修改数据：

查询和删除：