案例篇：品牌管理案例实现
第一步--初始化：
- 引入资源：
<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
<script type="text/javascript" src="../../../js/vue.min.js" ></script>
- 创建容器
<div id="app"></div>
- 创建对应实例
<script type="text/javascript">
new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
第二步--案例需求分析：
第三步--编写HTML结构：
<div id="app">
<table class="table table-bordered table-hover tab table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Ope</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
第四步--添加功能：
- 编写HTML结构，用表格进行渲染；
- 在data中编写几组假数据；
- 通过v-for循环将假数据循环渲染到页面上；
- 获取到 id 和name，直接从data上面获取；
- 组织一个对象；
- 把这个对象，调用数组的相关方法，添加到当前data上的list中去
- 注意：在vue中已经实现了数据的双向绑定，每当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据映射到页面上。
- 当我们意识到上面的第四步，就证明你明白了vue的世界。我们更多的是在进行 VM 中model 数据的操作，同时，在操作model数据的时候，指定的业务逻辑操作。
add(){ //添加的方法
var car = {id:this.id,name:this.name,Ctins:new Date()}
this.list.push(car)
this.id=this.name=''
}
第五步--删除功能：
- 根据id删除数据；
- 如何根据id找到要删除这一项的索引；
- 如果找到了索引，直接调用数组的splice方法
- 在数组的
some方法中，如果return true，就会立即终止这个数组的后续循环；
del(id){//根据id删除数据
this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1)
return true
}
})
}
var index=this.list.findIndex(item=>{
if (item.id==id) {
return true
}
})
this.list.splice(index,1)
第六步--搜索功能：
- 之前 v-for 中的数据都是从data 上的list中直接渲染过来的。
- 现在，我们自定义了一个search 方法，同时把所有的关键字通过传参的方式传递给了search方法。
- 在 search 方法内部，通过执行for循环把所有符合搜索关键字的数据保存到一个新的数组中
search(keywords){//根据关键字搜索
var newList=[]
this.list.forEach(item=>{
if(item.name.indexOf(keywords)!=-1){ // 如果item包含
newList.push(item)
}
})
return newList
}
- 注意：foreach、some、filter、findIndex这些都属于数组的新方法，都会对数组进行遍历。执行相关操作。
- ES6 中为字符串提供了一个新方法，叫做
String.prototype.include(要包含的字符串)。
return newlist=this.list.filter(item=>{
if (item.name.includes(keywords)) {
return item
}
})
第七步--时间格式化功能：
Vue.filter('dataformat',function(datastr,pattern=""){
// 根据给定的时间字符串，得到特定的时间
//yyyy-mm-dd
var dt = new Date(datastr);//获取当前时间
var y = dt.getFullYear()//获取年
var m = dt.getMonth()+1;//获取月份
var d = dt.getDate()
// return y+'-'+m+'-'+d
// return `${y}-${m}-${d}`
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
var hh = dt.getHours()
var mm=dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/bootstrap.min.css" />
<script type="text/javascript" src="../../../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<!--form-inline 并排放置-->
<div class="panel-body form-inline">
<label>ID：
<input type="text" v-model="id" class="form-control"/>
</label>
<label>Name：
<input type="text" v-model="name" class="form-control"/>
</label>
<input type="button" class="btn btn-primary" value="添加" @click="add"/>
<label>搜索关键字：
<input type="text" v-model="keywords" class="form-control"/>
</label>
</div>
</div>
<table class="table table-bordered table-hover tab table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Ope</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.Ctins|dataformat() }}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
Vue.filter('dataformat',function(datastr,pattern=""){
// 根据给定的时间字符串，得到特定的时间
//yyyy-mm-dd
var dt = new Date(datastr);//获取当前时间
var y = dt.getFullYear()//获取年
var m = dt.getMonth()+1;//获取月份
var d = dt.getDate()
// return y+'-'+m+'-'+d
// return `${y}-${m}-${d}`
if(pattern.toLowerCase()==='yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
var hh = dt.getHours()
var mm=dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
new Vue({
el:'#app',
data:{
id:"",
name:"",
keywords:"",
list:[
{id:1,name:'奔驰',Ctins:new Date()},
{id:2,name:'宝马',Ctins:new Date()}
]
},
methods:{
add(){ //添加的方法
var car = {id:this.id,name:this.name,Ctins:new Date()}
this.list.push(car)
this.id=this.name=''
},
del(id){//根据id删除数据
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true
// }
// })
var index=this.list.findIndex(item=>{
if (item.id==id) {
return true
}
})
this.list.splice(index,1)
},
search(keywords){//根据关键字搜索
// var newList=[]
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords)!=-1){
// newList.push(item)
// }
// })
// return newList
//注意：foreach、some、filter、findIndex这些都属于数组的新方法
//都会对数组中的每一项，进行遍历
return newlist=this.list.filter(item=>{
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
</script>
</html>
