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)分析:当渲染不同的轮 ...
随机推荐
- Ubuntu里面vi编辑器在编辑文本时 如何在所有行行首或行尾插入字符
例如:我这里是在每一行行首插入new :%s/^/new 在20,50行首插入new :20,50s/^/new 在每一行行尾插入@@ :%s/$/@@ 在20到50行行尾插入## :20,50s/$ ...
- Sublime Text 3安装插件（Mac 10.12）
1.先安装Package Control,默认这个是没有安装的. 使用[control + -]打开控制台,输入以下代码: import urllib.request,os; pf = 'Packag ...
- MySQL中show语法
1. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称. 2. show databases; -- 显示mysql中所有数据 ...
- ACM练习网站
1.http://www.acmerblog.com/ Acm之家 2.http://acm.nyist.net/JudgeOnline/problemset.php 南阳理工学院
- mongo 与 传统mysql语法对比
MongoDB语法 MySql语法 db.test.find({'name':'foobar'})<==> select ...
- javac的词法分析
1.词法分析将Java源文件的字符流转变为对应的Token流. JavacParser类规定了哪些词是符合Java语言规范规定的词,而具体读取和归类不同词法的操作由Scanner类来完成. ...
- linux mint19 解决docker必须使用sudo问题
1 安装完docker 使用时,提示权限不够 ~$ docker info Got permission denied while trying to connect to the Docker da ...
- applets
Java Applet 可以大大提高Web页面的交互能力和动态执行能力.包含Applet的网页被称为Java-powered页,可以称其为Java支持的网页. Applet 当用户访问这样的网页时,A ...
- Visual Studio、.net framework、CLR与JDK、JRE、JVM、Eclipse
.net平台 java平台 开发工具 Visual Studio ...
- Angular2-给属性做双向绑定
呈现一个实体对象的DOM结构,这个DOM有个自定义属性是需要动态赋值的,比如说 item.data 要绑到自定义属性 data 上:你可能会这么写: data="{{item.data}}& ...