Vue实战之CURD

#hello world
找到Vue创建的模板项目根目录的index.html
--html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
</body>
</html>

--启动本地服务

npm run dev

--在浏览器输入默认地址

http://localhost:8080/

--view

hello world

#ToDoList

--html

<div id="app">
<form>
<table style="300px;border-collapse:collapse" border="1">
<tr>
<th>title</th>
<th>desc</th>
</tr>
<tr v-for="todoItem in todolist">
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
</tr>
</table>
<input type="text" v-model="title"><br>
<input type="text" v-model="desc"><br/>
<input type="button" value="add todoItem" v-on:click="addItem()"/>
</form>
</div>

v-model：实现双向数据绑定
v-on：事件绑定指令，click是参数，可以缩写为@click
--js

var todoItem=function(title,desc){
this.title=title;
this.desc=desc;
}
new Vue({
el:'#app',
data:{
todolist:[],
titel:'',
desc:''
},
methods:{
addItem:function(){
this.todolist.push(new todoItem(this.title,this.desc));
this.title='';
this.desc='';
}
}
})

data：数据绑定
methods：属性绑定，事件绑定的回调函数都代理在methods中

刷新运行，在表单中输入后，点击add按钮，向数组添加元素同时刷新了列表
要从数据驱动UI的方式来思考，接下来增加删除功能
--html

<td><input type="button" value="remove" @click="remove(index)"/></td>
--js
methods:{
remove:function(index){
this.todolist.splice(index,1);
}
}

引入bootstrap美化页面
--html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body class="container">
<div id="app" class='row'>
<div class="col-md-6">
<table class="table table-bordered">
<tr>
<th>title</th>
<th>desc</th>
<th></th>
</tr>
<tr v-for="(todoItem,index) in todolist">
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
<td><input type="button" value="remove" @click="remove(index)" class="btn btn-danger" /></td>
</tr>
</table>
</div>
<div class="col-md-6">

<div class="form-inline">
<label for="title" class="control-label col-md-4">title:</label>
<input type="text" v-model="title" class="form-control col-md-8">
</div>
<div class="form-inline">
<label for="desc" class="control-label col-md-4">desc</label>
<input type="text" v-model="desc" class="form-control col-md-8">
</div>
<div class="form-inline">
<input type="button" value="OK" v-on:click="addItem()" class="btn btn-primary offset-md-10" />
</div>
</div>
</div>
</body>

--js

<script>
var TodoItem = function (title, desc) {
this.title = title;
this.desc = desc;
}
new Vue({
el: '#app',
data: {
todolist: [],
title: '',
desc: ''
},
methods: {
addItem: function () {
this.todolist.push(new TodoItem(this.title, this.desc))

this.title = this.desc = '';

},
remove: function (index) {
this.todolist.splice(index, 1);
}

}
})
</script>

刷新运行看下效果，接下来增加编辑按钮，先增加自增ID

--html

<div class="col-md-6">
<table class="table table-bordered">
<tr>
<th></th>
<th>title</th>
<th>desc</th>
<th></th>
</tr>
<tr v-for="(todoItem,index) in todolist">
<th>{{todoItem.id}}</th>
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
<td><input type="button" value="remove" @click="remove(index)" class="btn btn-danger" /></td>
</tr>
</table>
</div>
<div class="col-md-6">
<div class="form-inline">
<label for="title" class="control-label col-md-4">title:</label>
<input type="hidden" v-bind:value="todoItem.id" />
<input type="text" v-model="todoItem.title" class="form-control col-md-8">
</div>
<div class="form-inline">
<label for="desc" class="control-label col-md-4">desc</label>
<input type="text" v-model="todoItem.desc" class="form-control col-md-8">
</div>
<div class="form-inline">
<input type="button" value="OK" v-on:click="addItem()" class="btn btn-primary offset-md-10" />
</div>
</div>

--js

var todoItem=(function(){
var id=1;
return function(title,desc){
this.title=title;
this.desc=desc;
this.id=id++;
}
})();

data:{
todolist:[],
todoItem:{
id:'',
title:'',
desc:''
}
}

methods:{
addItem:function(){
this.todolist.push(
new todoItem(
this.todoItem.title,
this.todoItem.desc
)
);
this.dodoItem={};
}
}

刷新看效果，接下来添加编辑按钮

--html

<input type="button" value="edit" @click="edit(todoItem.id)" class="btn btn-info"/>

--js

methods:{
edit:function(id){
var obj=this.todolist.filter(v=>v.id===id)[0];
this.todoItem=obj;
}
}

刷新运行，编辑后在没有点击OK按钮，表单中的变化已经体现在列表中

原因是：this.todoItem=obj 这句代码是引用赋值，所以todoItem和obj指向的是同一个地址，对this.todoItem的修改会直接反应到obj上，修改代码
--js

var obj=this.todolist.filter(v=>v.id===id)[0];
this.todoItem={
id:obj.id,
title:obj.title,
desc:obj.desc
};

但是现在修改还是新增操作，需要修改OK按钮的事件绑定方式为save，通过id判断新增还是修改操作：

--html

<input type="button" value="OK" v-on:click="save()" class="btn btn-primary offset-md-10" />

--js

methods:{
save:function(){
if(this.todoItem.id){
//编辑
var obj=this.todolist.filter(v=>v.id===this.todoItem.id)[0];
obj.title=this.todoItem.title;
obj.desc=this.todoItem.desc;
}else{
//新增
this.todolist.push(
new totoItem(
this.todoItem.title,
this.todoItem.desc
)
);
}
//重置表单
this.todoItem={};
}
}

运行，已经完成了编辑功能

v-bind：一般用来传递属性参数，后面跟 :attr
我们试着添加disable属性，使OK按钮只有在title不为空的前提下可用
--html

<input type="button" value="OK" v-on:click="save()" class="btn btn-primary offset-md-10" :disabled='canSave'/>

--js

new Vue({
computed:{
canSave:function(){
return !this.todoItem.title||!this.todoItem.desc;
}
}
})

save: function () {
if (this.todoItem.id) {
//编辑
var obj = this.todolist.filter(v => v.id === this.todoItem.id)[0];
obj.title = this.todoItem.title;
obj.desc = this.todoItem.desc;
} else {
//新增
this.todolist.push(
new todoItem(
this.todoItem.title,
this.todoItem.desc
)
);
}
//重置表单
this.todoItem = {title:'',desc:''};
},

增加查询功能

--html

<div class="row toolbar">
<div class="col-md-8">
keyword:
<input type="text" v-model="keyword"/>
<input type="button" @click="query()" value="search" />
</div>
</div>

--js

//全局变量，用于缓存所有数据
var list=[];

data:{
todolist:[],
todoItem:{
id:'',
title:'',
desc:''
},
keyword:''
}

methods:{
remove: function (index) {
this.todolist.splice(index, 1);
list=this.todolist;
},
edit: function (id) {
var obj = this.todolist.filter(v => v.id === id)[0];
this.todoItem = {
id: obj.id,
title: obj.title,
desc: obj.desc
};
},
save: function () {
if (this.todoItem.id) {
//编辑
var obj = this.todolist.filter(v => v.id === this.todoItem.id)[0];
obj.title = this.todoItem.title;
obj.desc = this.todoItem.desc;
} else {
//新增
this.todolist.push(
new todoItem(
this.todoItem.title,
this.todoItem.desc
)
);
}
//重置表单
this.todoItem = {title:'',desc:''};
list=this.todolist;
},
query: function () {
//这里需要list全局变量过滤，而不能通过this.todolist，因为需要给this.todolist赋值，赋值后无法还原原来的列表
this.todolist = list.filter(v => v.title.indexOf(this.keyword) !== -1);
}
}

增删改查完成，完整代码

-html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">

</head>

<body class="container">
<div id="app">
<div class="row toolbar">
<div class="col-md-8">
keyword：
<input type="text" v-model="keyword" />
<input type="button" @click="query()" value="search" />
</div>
</div>
<div class='row'>

<div class="col-md-6">
<table class="table table-bordered">
<tr>
<th></th>
<th>title</th>
<th>desc</th>
<th></th>
</tr>
<tr v-for="(todoItem,index) in todolist">
<th>{{todoItem.id}}</th>
<td>{{todoItem.title}}</td>
<td>{{todoItem.desc}}</td>
<td>
<input type="button" value="remove" @click="remove(index)" class="btn btn-danger" />
<input type="button" value="edit" @click="edit(todoItem.id)" class="btn btn-info" />
</td>
</tr>
</table>
</div>
<div class="col-md-6">

<div class="form-inline">
<label for="title" class="control-label col-md-4">title:</label>
<input type="hidden" v-bind:value="todoItem.id" />
<input type="text" v-model="todoItem.title" class="form-control col-md-8">
</div>
<div class="form-inline">
<label for="desc" class="control-label col-md-4">desc</label>
<input type="text" v-model="todoItem.desc" class="form-control col-md-8">
</div>
<div class="form-inline">
<input type="button" value="OK" v-on:click="save()" class="btn btn-primary offset-md-10" :disabled='canSave' />
</div>
</div>


</div>
</div>
<script>
var list = [];
var TodoItem = (function () {
var id = 1;
return function (title, desc) {
this.title = title;
this.desc = desc;

this.id = id++;
}
})();
new Vue({
el: '#app',
data: {
todolist: [],
todoItem: {
id: '',
title: '',
desc: ''
},
keyword: ''
}, computed: {
canSave: function () {
return !this.todoItem.title || !this.todoItem.desc;
}
},
methods: {
query: function () {
//过滤title中不包含keyword的数据
//这里必须通过list全局变量过滤，而不能通过this.todolist,因为需要给this.todolist赋值，赋值后无法还原原来的列表。
this.todolist = list.filter(v => v.title.indexOf(this.keyword) !== -1);
},
edit: function (id) {
//找到id值等于所传参数的todoitem
var obj = this.todolist.filter(v => v.id === id)[0];
//对数据进行绑定，则数据会响应到表单上
this.todoItem = {
id: obj.id,
title: obj.title,
desc: obj.desc
};
},
save: function () {
if (this.todoItem.id) {
//编辑保存
var obj = this.todolist.filter(v => v.id === this.todoItem.id)[0];
obj.title = this.todoItem.title;
obj.desc = this.todoItem.desc;

} else {
//新增保存
this.todolist.push(
new TodoItem(
this.todoItem.title,
this.todoItem.desc
)
);
}
//重置表单
this.todoItem = { title: '', desc: '' };

list = this.todolist;
},

remove: function (index) {
this.todolist.splice(index, 1);
}

}
})
</script>
</body>

</html>

由于是用txt记录的没有截图，但是代码都是经过验证的~