vue入门：用户管理demo
该demo纯前端实现
- 使用到vue技术点：
- 1.在该demo中使用到的vue指令：
{{}}、v-if、v-model、@click v-for- 2.在该demo中使用到的事件修饰符：
.prevent（阻止事件默认行为）- 3.在该demo中使用到的api:
arr.push(item,...)：向数组末尾添加一个或多个元素arr.splice(index,num)：删除并插入，删除指定索引和数量的元素，并添加新元素，参数1必须，参数2不给则清空数组，参数3不给则不添加新元素arr.findIndex((item,index) => {})：查询符合条件的元素索引，符合条件时返回索引值，不满足条件时返回 -1arr.filter((item,index) => {})：查询符合条件的元素数组，符合条件时返回元素数组，不满足条件时返回空数组arr.forEach((item,index) => {})：遍历数组str.includes(s)：字符串中是否包含子字符串str.indexOf(s)：子字符串在字符串中首次出现的位置，区分大小写，不匹配时返回-1str.padStart(length,value)：头部补全，参数1：补全后生效的长度,参数2：用来补全的字符串- 4.在该demo中定义了全局过滤器：
Vue.filter(过滤器名称,function(){});- 5.在该demo中使用了键盘修饰符：
@keyup.enter
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理demo</title>
<script src="./js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./css/bootstrap-4.3.1.css">
<style>
body{
font-size: 14px;
}
</style>
</head>
<body>
<div id = "app">
<!-- 提示信息 -->
<!-- 当提示信息不为空且昵称为空时，则显示 -->
<div class="alert alert-danger mt-2" v-if = "errMsg != '' && nickname === ''">
<span>{{ errMsg }}</span>
<!-- 把提示信息置为空，则不显示 -->
<button type="button" class="close" @click = "errMsg = ''">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 添加用户 -->
<form class="form-inline mb-2 mt-2">
<div class="form-group ml-2">
<label>昵称：</label>
<!-- 回车添加 -->
<input type="text" class="form-control" v-model = "nickname" @keyup.enter = "add">
</div>
<div class="form-group ml-2">
<input type="button" class="btn btn-primary btn-sm" value="添加" @click = "add">
</div>
<div class="form-group ml-2">
<!-- 键入搜索 -->
<input type="text" class="form-control" placeholder="search..." v-model = "keyword">
</div>
</form>
<!-- 显示用户列表 -->
<table class="table table-bordered" >
<thead>
<tr>
<th>编号</th>
<th>昵称</th>
<th>日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 加入了搜索，这里不再是简单的 item in userInfos -->
<tr v-for = "item in search(keyword)" :key = "item.id">
<td>{{ item.id }}</td>
<td>{{ item.nickname }}</td>
<!-- 使用过滤器对日期进行格式化 -->
<td>{{ item.date | dateFormat }}</td>
<td>
<!-- .prevent禁止默认行为，如果不加上，vue会报语法错误 -->
<a href="javascript:void()" class="btn btn-link btn-sm" @click.prevent = "del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
// 定义日期处理的全局过滤器
Vue.filter('dateFormat',function(input){
//es6字符串补全方法
/*
str.padStart(length,value) 头部补全
str.padStart(length,value) 尾部补全
参数1：补全后生效的长度
参数2：用来补全的字符串
*/
var date = new Date(input);
// 年
var year = date.getFullYear();
//月 0-11
var month = (date.getMonth() + 1).toString().padStart(2,"0");
//日
var day = date.getDate().toString().padStart(2,"0");
//时
var hour = date.getHours().toString().padStart(2,"0");
//分
var minute = date.getMinutes().toString().padStart(2,"0");
//秒
var seconds = date.getSeconds().toString().padStart(2,"0");
// return '${year}-${month}-${day} ${hour}:${minute}:${seconds}';
return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+seconds;
});
var vue = new Vue({
el :'#app',
data : {
nickname : '',
id : 2,//由于默认了一条用户数据，因此id从2开始
errMsg : '',//错误信息
keyword : '',//搜索的关键字
userInfos:[//用户信息数组
{
id : '1',
nickname : 'macy',
date : new Date()
}
]
},
methods:{
add(){
//判断用户输入
if (this.nickname === ''){
this.errMsg = '昵称不为空！！！';
return;
}
/* 把新增的用户push到数组 */
//1.创建用户
var newUser = {
id : this.id,
nickname : this.nickname,
date : new Date()
};
//2.添加到数组
this.userInfos.push(newUser);
//3.id加1
this.id ++ ;
//4.清空输入框和提示信息
this.errMsg = this.nickname = '';
},
del(id){
/* 把传进来的id与数组索引挂钩，从数组中剔除*/
//1.遍历数组，根据id获取对应的索引
/*
find() findIndex() filter() 接收3个参数，value(元素),index(索引),arr(被查找的数组)
find() 符合条件时返回满足条件的第一个元素，不满足条件时返回undefined
findIndex() 符合条件时返回索引值，不满足条件时返回 -1
filter() 符合条件时返回元素数组，不满足条件时返回空数组
*/
var i = this.userInfos.findIndex((item,index,arr) => {
return id === item.id;
});
//2.从数组中剔除元素
/*
splice(index,num) 参数1：删除的元素索引，参数2：删除的元素个数，如果没给定，则删除全部元素
*/
this.userInfos.splice(i,1);
},
search(keyword){
console.log(keyword);
//把关键字统一转小写
keyword = keyword.toLowerCase();
//判断关键字是否包含在数组的元素中
//方式1：forEach
/*
indexOf() 子字符串在字符串中首次出现的位置，区分大小写，不匹配时返回-1
*/
// var result = [];
// this.userInfos.forEach(item => {
// if(item.nickname.toLowerCase().indexOf(keyword) != -1){
// result.push(item);
// }
// });
// return result;
//方式2：filter()
/*
字符串中是否包含子字符串：incluces()
*/
// //新建一个数组
// var result = [];
// result = this.userInfos.filter((item,index,arr) => {
// if(item.nickname.toLowerCase().includes(keyword)){
// return item;
// }
// });
// return result;
//简化
return this.userInfos.filter((item,index,arr) => {
if(item.nickname.toLowerCase().includes(keyword)){
return item;
}
});
}
}
});
</script>
</body>
</html>
- 效果
- 小结
在该demo中，充分体现了mvvm的思想，即数据与html结构分离，使用vue作为调度的中间件在这两者中进行数据的存储与渲染
使用vue的指令省去了dom节点的操作，由于数据的双向绑定（从m中改变到v，从v中改变到m），则直接从data中获取数据进行操作
vue入门：用户管理demo的更多相关文章
- EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...
- 练习vue（用户管理）1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- vue实现图书管理demo
年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...
- 使用vue实现用户管理 添加及删除功能
简单的管理系统-增删改查 添加及删除功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- spring boot一个简单用户管理DEMO
概述 该Demo旨在部署一个简单spring boot工程,包含数据编辑和查看功能 POM配置 <?xml version="1.0" encoding="UTF- ...
- 【vue入门】日志demo，增删改查的练习（无vuex版本）
安装 1. 确定电脑已装node和npm 出现版本号则说明电脑已经安装好node和npm2. 创建一个基于webpack的项目 3. 在项目里安装依赖 4. 运行 配置路由为了动态渲染各个页面的组 ...
- vue入门：用户管理demo1
该demo由前端请求后台服务器获取数据进行渲染 使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.ent ...
- 一步步使用SpringBoot结合Vue实现登录和用户管理功能
前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...
随机推荐
- ubuntu18.04安装nvidia驱动总结经验
本人电脑是 DELL Inspiron 3670, 系统装的是ubuntu18.04, 显卡使用的是GeForce GTX 1050 Ti, 在安装nividia显卡的时候花费两天时间,感受颇深,顾总 ...
- 【Netty】使用解码器Decoder解决TCP粘包和拆包问题
解码器Decoder和ChannelHandler的关系 netty的解码器通常是继承自ByteToMessageDecoder,而它又是继承自ChannelInboundHandlerAdapter ...
- vs2005 打不开resoure view？
原来是破解版 vc助手惹的祸. 解决方法:卸载vc助手或者换一个注册的vc助手
- [leetcode] 456. 132 Pattern (Medium)
对一个三个元素以上的数组,如果存在1-3-2模式的组合,则返回true. 1-3-2模式就是值的排序是i<k<j但是下标排序是i<j<k. 解法一: 硬解,利用一个变量存储是否 ...
- pycharm编辑器配置（持续更新完善）
谨记:pycharm仅是一款编辑器,不要太依赖 pycharm的提示,不然后期换了编辑器就不行了 python解释器安装.多版本共存等 去python官网下载安装,配置环境变量.多版本共存等问题请参见 ...
- python调用WebService遇到的问题'Document' object has no attribute 'set'
代码: from suds import WebFault from suds.client import Client url = 'http://******/bns/PtDataSvc.asmx ...
- 如何更换织梦cms系统的网站小图标
织梦cms建站现在已经是很普遍的建站方式了,下面小编就分享一个简单的换网站小图标的方法! 一.登录自己网站的后台管理系统.在不修改织梦后台的情况下,默认的url是自己的网站后台dede目录下访问. 二 ...
- linux初学者-正则表达式
在windows中,是没有办法批量处理文件的,但是在linux系统中,可以通过命令直接处理一系列文件,这些文件的处理就需要用到正则表达式.这同样可以应用与目录. 1.处理多个文件 正则表达式中批量 ...
- Windows+Apache+Python+Django 踩坑记录
摘要 使用Python进行Web项目开发:相对于主流三大Web端解决方案(Java/.NET/PHP) Python在某些方面具有一定的优势,相对 Java/.NET 有更轻量级的部署方案,相对PHP ...
- 配置 IDEA 远程连接应用服务器
当调试 Web 应用时,经常需要使用 ide 远程连接,来进行 debug 调试.使用 Springboot 内置服务器和使用 Tomcat 服务器是常见的应用部署方式,可以用不同的配置方式来启动远程 ...