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 ...
随机推荐
- 高德网络定位之“移动WiFi识别”
导读随着时代的发展,近10年来位置产业蓬勃发展,定位能力逐渐从低精度走向高精度,从部分场景走向泛在定位.设备和场景的丰富,使得定位技术和能力也不断的优化更新.定位能力包括GNSS.DR(航迹推算).M ...
- C#3.0新增功能09 LINQ 基础06 LINQ 查询操作中的类型关系
连载目录 [已更新最新开发文章,点击查看详细] 若要有效编写查询,应了解完整的查询操作中的变量类型是如何全部彼此关联的. 如果了解这些关系,就能够更容易地理解文档中的 LINQ 示例和代码示例. ...
- C#3.0新增功能10 表达式树 05 解释表达式
连载目录 [已更新最新开发文章,点击查看详细] 表达式树中的每个节点将是派生自 Expression 的类的对象. 该设计使得访问表达式树中的所有节点成为相对直接的递归操作. 常规策略是从根节点 ...
- 解密Kafka吞吐量高的原因
众所周知kafka的吞吐量比一般的消息队列要高,号称the fastest,那他是如何做到的,让我们从以下几个方面分析一下原因. 生产者(写入数据) 生产者(producer)是负责向Kafka提交数 ...
- sqlmap续
sqlmap续 注入语句(知道绝对路径时候可用) http://192.168.99.171/test2/sqli/example10.php?catid=3’union select 1,’< ...
- Heap Greedy
1 239 Sliding Window Maximun 双端队列 public int[] maxSlidingWindow(int[] nums, int k) { if (nums == nul ...
- vue动态表单
项目需求,需要根据后台接口返回数据,动态添加表单内容 说明:此组件基于Ant Design of Vue 目前支持六种表单控件:文本输入框(TextInput).文本域输入框(TextArea).下拉 ...
- input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法
<el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...
- react开发中的小细节
目前开始使用react余遇到的问题还不是很多,但还是希望总结一下. react中的属性prop: 在react中组件的父子组件的通信是基于prop的,当然对于底层的东西不是特别了解,但可以说一说它的基 ...
- 自己动手，开发轻量级，高性能http服务器。
前言 http协议是互联网上使用最广泛的通讯协议了.web通讯也是基于http协议:对应c#开发者来说,asp.net core是最新的开发web应用平台.由于最近要开发一套人脸识别系统,对通讯效率的 ...