1.前言：学习Vue.js做了一个简单的表单CRUD的demo,没有涉及服务器。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>demo2-cd</title>
<script src="e:\html\js\vue.js"></script>
<link href="e:\html\css\bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div id="app" class='row'>
<div class="col-md-6">
<div class="toolbar">
<label class="control-label col-md-4">keyword:</label>
<input type="text" v-model="keyword" />
<!--v-on:的缩写是@-->
<input type="button" @click="query()" value="search" />
</div>
<table class="table table-bordered">
<tr>
<th>id</th>
<th>title</th>
<th>desc</th>
<th>edit</th>
<th>delete</th>
</tr>
<!--v-for列表渲染 index为可选项-表示列表的下标-->
<!--v-show渲染display属性，优先级比v-for低-->
<tr v-for="(item,index) in items" v-show="item.view">
<!--{{Vue.js的代码}}-->
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.desc}}</td>
<th><input type="button" value="edit" @click="edit(item.id)" class="btn btn-warning btn-sm"/></th>
<th><input type="button" value="delete" @click="remove(item.id)" class="btn btn-danger btn-sm"/></th>
</tr>
</table>
</div>
<div class="col-md-6">
<div class="form-inline">
<label for="index" class="control-label col-md-4">id:</label>
<label type="text" class="control-label col-md-8">{{id}}</label>
</div>
<div class="form-inline">
<label for="title" class="control-label col-md-4">title:</label>
<!--v-model等价于v-bing:value 绑定的对象需要在Vue实例中data中定义-->
<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">
<label class="control-label col-md-9"></label>
<!--v-bind:的缩写是:,作用是对属性进行绑定-->
<input type="button" v-model="status" v-on:click="saveUpdate()" class="btn btn-primary" :disabled='canSave'/>
</div>
</div>
</div>
<script>
var id=0;
var Item=function(title,desc){
this.title=title;
this.desc=desc;
this.id=id++;
//是否可见
this.view=true;
};
new Vue({
//绑定该Vue组件对象
el:'#app',
//绑定的属性在这里定义
data:{
items:[],
title:'',
desc:'',
id:'',
status:'新增',
keyword:''
},
methods:{
//根据id是否有值，选择新增或者更新
saveUpdate:function(){
if(this.id!==''){
//写法1：
//var obj=this.items[this.index];
//写法2: 箭头函数---ES6的新特性
var obj=(this.items.filter(v => v.id === this.id))[0];
obj.title=this.title;
obj.desc=this.desc;
obj.id=this.id;
this.reset();
}else{
this.items.push(new Item(this.title,this.desc))
this.title=this.desc='';
console.log(JSON.stringify(this.items));
}
list=this.items;
},
//删除元素
remove:function(id){
var obj=(this.items.filter(v => v.id === id))[0];
var index=this.items.indexOf(obj);
this.items.splice(index,1);
this.reset();
},
//预编辑元素
edit:function(id){
var obj=(this.items.filter(v => v.id === id))[0];
this.id=obj.id;
this.title=obj.title;
this.desc=obj.desc;
this.status='编辑';
},
//重置预编辑
reset:function(){
this.id='';
this.status='新增';
this.title='';
this.desc='';
this.keyword='';
},
//查询视图
query:function(){
for(var i of this.items){
//隐藏不合关键词的结果
if(i.title.indexOf(this.keyword) ===-1){
i.view=false;
}else{
i.view=true;
}
}
this.reset();
}
},
//计算属性
computed:{
canSave:function(){
return !this.title||!this.desc;
}
}
})
</script>
</body>
</html>
2.学习的参考博客为：http://www.cnblogs.com/Johnzhang/p/7214215.html