Vue小案例（一）
案例需求：
创建一个品牌展示表格，表头有编号（id），品牌名称（name），创建时间（time）和操作，需要实现的功能是对数据的增删操作，和时间的格式化。
思路分析：
在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能，把案例分成以下几个部分来开发：
- 展示数据，需要使用v-for指令
- 删除数据，需要使用v-on绑定一个事件
- 添加数据，需要使用双向数据绑定
- 时间的格式化，需要使用过滤器
实现步骤：
1、开发静态模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
} .left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
} .left input {
padding: 2px;
margin-top: 10px;
} .right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
} .right table {
border-collapse: collapse;
width: 580px;
} .right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
} .right table tr {
text-align: center;
} .right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>宝马</td>
<td>2017-12-27</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
2、使用v-for指令展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
} .left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
} .left input {
padding: 2px;
margin-top: 10px;
} .right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
} .right table {
border-collapse: collapse;
width: 580px;
} .right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
} .right table tr {
text-align: center;
} .right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
list:[
{"id":1,"name":"宝马","time":new Date()},
{"id":2,"name":"奔驰","time":new Date()}
]
}
})
</script>
</body>
</html>
3、删除数据，在methods中定义删除方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
} .left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
} .left input {
padding: 2px;
margin-top: 10px;
} .right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
} .right table {
border-collapse: collapse;
width: 580px;
} .right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
} .right table tr {
text-align: center;
} .right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" />
<input type="text" placeholder="输入名称" /><br />
<input type="button" value="添加数据" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
}
}
})
</script>
</body>
</html>
4、添加数据，使用双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
} .left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
} .left input {
padding: 2px;
margin-top: 10px;
} .right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
} .right table {
border-collapse: collapse;
width: 580px;
} .right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
} .right table tr {
text-align: center;
} .right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date().toLocaleString()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
}
})
</script>
</body>
5、格式化时间，使用过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
} .left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
} .left input {
padding: 2px;
margin-top: 10px;
} .right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
} .right table {
border-collapse: collapse;
width: 580px;
} .right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
} .right table tr {
text-align: center;
} .right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {
var result = "";
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
var hour = input.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = input.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
if (formatstring == 'yyyy-mm-dd') {
result = year + "-" + month + "-" + day;
} else {
result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
return result;
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
}
})
</script>
</body>
</html>
至此，一个关于Vue的小案例开发就成功开发了，是不是非常的简单？
6、增加搜索数据功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
}
.left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
}
.left input {
padding: 2px;
margin-top: 10px;
}
.right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
}
.right table {
border-collapse: collapse;
width: 580px;
}
.right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
}
.right table tr {
text-align: center;
}
.right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
<input type="text" placeholder="搜索数据" v-model="search" />
</div>
<div class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in searchData">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
<td>
<a href="javascript:void(0)" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</div>
</div>
</div> <script>
//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {
var result = "";
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
var hour = input.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = input.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
if (formatstring == 'yyyy-mm-dd') {
result = year + "-" + month + "-" + day;
} else {
result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
return result;
})
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
search: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
},
computed: {
searchData: function () {
var search = this.search;
if (search) {
return this.list.filter(function (name) {
return Object.keys(name).some(function (key) {
return String(name[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.list;
}
}
})
</script>
</body>
</html>
Vue小案例（一）的更多相关文章
- Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式
代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过 ...
- vue小案例--简易评论区
一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件. ...
- VUE小案例--简易计算器
这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> & ...
- VUE小案例--跑马灯效果
自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <me ...
- Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由
一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数 ...
- Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能
一.前言 1.用vuex实现加入购物车操作 2.购物车详情页面 3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...
- Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- Vue(小案例_vue+axios仿手机app)_购物车
一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...
- Vue(小案例_vue+axios仿手机app)_公共组件（路由组件传参）
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
随机推荐
- 分享一个电子发票信息提取工具(Python)
电子发票太多,想统计下总额异常困难,网上工具不好用,花了2个小时实现一份,测试过中石油.京东开具的电子发票还行,部分发票名称失败有问题不影响统计,有需要的小伙伴自己拿去改吧. import cmd i ...
- Mac 10.12搭建OpenVPN服务器以及客户端的使用
说明:我未实践,大概就是这几个步骤,建议服务器在Linux下搭建效果会更好. 1.用brew下载openvpn brew install openvpn 2.命令行输入 openvpn --versi ...
- Mac下运行git报错"xcrun: error: invalid active developer path .."
错误:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...
- Mac下安装eclipse（Mac 10.12/JDK/tomcat）
1.到官网https://www.eclipse.org/downloads/eclipse-packages/下载安装包 2.安装 注意:安装ecllipse时一定要安装JDK先,最新版本的ecli ...
- 什么是 JWT -- JSON WEB TOKEN
看链接:http://www.jianshu.com/p/576dbf44b2ae 来个工具类: import java.io.Serializable; import java.util.Date; ...
- (转载)GRASP职责分配原则
GRASP (职责分配原则) 要学习设计模式,有些基础知识是我们必须要先知道的,设计模式是关于类和对象的一种高效.灵活的使用方式,也就是说,必须先有类和对象,才能有设计模式的用武之地,否则一切都是空谈 ...
- R语言提取字符串的一部分substring函数
这个函数提取字符串的一部分. 语法 substring()函数的基本语法是: substring(x,first,last) 以下是所使用的参数的说明: x - 是字符向量输入. first - 是第 ...
- 分层 DAO层，Service层，Controller层、View层
前部分摘录自:http://blog.csdn.net/zdwzzu2006/article/details/6053006 DAO层:DAO层主要是做数据持久层的工作,负责与数据库进行联络的一些任务 ...
- [转]emailjs-smtp-client
本文转自:https://github.com/emailjs/emailjs-smtp-client/blob/master/README.md SMTP Client SMTP Client al ...
- Windows窗体技术及基础控件
创建winform程序 Visual studio是一套完整的开发工具集 RAD 工具(rapid application development) 创建用户界面时,把控件从工具箱拖放到窗体上,把它们 ...