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)分析:当渲染不同的轮 ...
随机推荐
- 10. JavaScript学习笔记——JSON
10. JSON ///[JSON是一种数据格式,不是JS 独有的] ///[JSON语法] /* 1.数据书写格式:"name":value,JSON要求给属性名加上[双引号], ...
- Zynq-7000 FreeRTOS(二)中断：PL中断请求
总结Zynq-7000的PL发送给PS一个中断请求,为FreeRTOS中断做准备. UG585的P225显示了系统的中断框图,如下图所示. 图:ZYNQ器件的中断框图 UG585的P227画出来中断控 ...
- AES对称加解密
简介设计思想加密模式ECB模式(电子密码本模式:Electronic codebook)CBC模式(密码分组链接:Cipher-block chaining)CFB模式(密文反馈:Cipher fee ...
- JVectorMap地图插件.Net版开源
jVectorMap地图插件只要浏览器技术JavaScript.CSS,HTML,SVG或VML就可以浏览使用,不需要Flash或其他专有的浏览 器插件.所以jVectorMap在所有现代移动浏览器上 ...
- Qt Creator中使用qss对界面美化没有作用（效果）的问题
最近在研究qt界面开发,发现使用qss对界面进行美化后效果不错,要比mfc效率高很多,美化效果也很出色.但是在使用qss文件对界面控件进行美化的过程中遇到了个很奇葩的问题,困惑了我好久,今晚又遇到了, ...
- 【Maven学习】maven基本命令
maven最主要的命令如下: mvn clean compile:告诉Maven编译项目主代码 mvn clean test:执行src/test/main下面的test方法,在执行测试之前,会自动执 ...
- 002javascript变量&数据类型
•变量 –JavaScript 是一种弱类型的脚本语言 –var c = 3:即变量的声明(变量使用之前必须加var声明,编程规范) –变量的命名规则! •1.变量命名必须以字母或是下标符号”_”或者 ...
- MYSQL 缓存
在PHP.INI中query_cache_type设置为1. 即 开始MYSQL全局SQL语句 都缓存.(0 不使用) 临时关闭查询缓冲的方法:1. SELECT SQL_NO_CACHE fi ...
- JavaScript数据结构-5.队列
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 错误：‘lock_guard’ 在此作用域中尚未声明
解决:修改报错文件,加入#include <boost/thread/lock_guard.hpp>