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 ...
随机推荐
- 2017-10271weblogic漏洞exp测试及补丁测试
靶机:weblogic12.1.3.0 战斗机:kali 导弹:burpsuite 1.首先开启kali某端口监听 2.向靶机发送exp 3.查看kali监听 打码保平安~~ 4.打上补丁 5.验证补 ...
- 摄像头驱动的使能配置、V4L2编程接口的设计应用
摄像头采集子系统 一.摄像头驱动的使能配置 摄像头软件驱动构架 摄像头采集系统由上图所示,硬件(摄像头) -> 驱动(Linux内核配置中,选择支持V4L2的驱动选项) -> V4L2接口 ...
- 算法学习笔记，几个简单的Demo
算法初学的一些心得 前言:现在工作也快一年多了,有时间下班回家会学学算法,陆陆续续也接触了一些 貌似我知道的就冒泡排序其他的都不是很了解 最近买了一本书,边学边记录吧! 一些常用的方法 暴力破解 下面 ...
- Orleans 知多少 | 2. 核心概念一览
Orleans 术语解读 上面这张图中包含了Orleans中的几个核心概念: Grain Silo Orleans Cluster Orleans Client 从这张图,我们应该能理清他们之间的关系 ...
- java多线程调用run和不调用run的区别
当在java程序中创建一个线程的时候,会三种情况: 1,只运行run方法 2,先执行start,再执行run方法 3,只运行start方法 三者的区别如下: 运行方式 区别 只运行run 只运行run ...
- 模板配置教程：Phpcms v9怎么更换模板
先分享下大概的步骤: 1.上传模版文件到服务器: 2.在站点管理 里边[模板风格配置]选择新模板: 3.设置不同模型对应模板: 4.修改现有的栏目,匹配新模板: 5.更新栏目缓存.系统缓存,更新HTM ...
- HTML--CSS样式表--格式与布局
一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如: <head> <title>网页标题</title> <s ...
- linux初学者-正则表达式
在windows中,是没有办法批量处理文件的,但是在linux系统中,可以通过命令直接处理一系列文件,这些文件的处理就需要用到正则表达式.这同样可以应用与目录. 1.处理多个文件 正则表达式中批量 ...
- Linux/UNIX编程：使用C语言实现简单的 ls 命令
刚好把 Linux/UNIX 编程中的文件和IO部分学完了,就想编写个 ls 命令练习一下,本以为很简单,调用个 stat 就完事了,没想到前前后后弄了七八个小时,90%的时间都用在格式化(像 ls ...
- Linux vi/vim使用
vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令. 1.vi的基本概念 基本上vi ...