vue入门demo：用户管理3
该入门demo是使用组件的方式实现，不涉及向后端发送请求
- 说明
把用户列表和添加用户拆分为两个组件，用户列表数据在父组件
- 获取用户列表：
用户列表组件获取父组件的用户列表（父组件向子组件传值）1-1 1-2 1-3- 添加用户：把添加到
添加用户组件的数据传给父组件，父组件再添加到数组 （子组件给父组件传值）2-1 2-2 2-3- 删除用户：把
用户列表组件id传给父组件，父组件再根据id查询到索引，删除对应的元素（子组件给父组件传值）3-1 3-2 3-3- 搜索用户：把
添加用户组件的keyword传给父组件，父组件再获取该keyword对列表进行过滤 4-1 4-2 4-3
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件综合实例</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;
margin: 5px;
}
</style>
</head>
<body>
<!-- 1.vue实例控制的页面区域 -->
<div id = "app">
<!-- -4使用添加用户的组件 <add-user> -->
<!-- 2-3 绑定子组件的事件到父组件获取子组件的方法 @getuser = "getUserFromAddUserComp" -->
<!-- 4-3 绑定子组件的事件到父组件获取子组件的方法 @getkeyword = "getKeywordFromUserListComp"-->
<add-user @getuser = "getUserFromAddUserComp" @getkeyword = "getKeywordFromUserListComp"></add-user>
<!-- -4.使用用户列表组件 <user-list> -->
<!-- 1-2 绑定来自父组件的数据 :fusers = "results" -->
<!-- 3-3 绑定子组件的事件到父组件获取子组件的方法 @getuserid = "getIdFromUserListComp" -->
<user-list :fusers = "results" @getuserid = "getIdFromUserListComp" ></user-list>
</div>
<!-- 3.组件模板 -->
<!-- 用户列表模板 -->
<template id = "userListTemp">
<div>
<table class="table table-bordered">
<thead>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 1-3 使用来绑定获取来自父组件数据的变量 fusers -->
<tr v-for = "user in fusers" :key = "user.id">
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.password }}</td>
<td><a href="javascript:void(0)" @click.prevent = "del(user.id)" >删除</a></td>
</tr>
</tbody>
</table>
</div>
</template>
<!-- 添加用户组件模板 -->
<template id = "addUserTemp">
<div>
<div class="form-inline mb-2">
<div class="form-group">
<label >用户名：</label>
<input class="form-control mr-2" type="text" v-model = "username">
</div>
<div class="form-group">
<label >密码：</label>
<input class="form-control mr-2" type="text" v-model = "password">
</div>
<div class="form-group">
<a href="javascript:void(0)" class="btn btn-outline-primary btn-sm mr-2" @click.prevent = "add">添加</a>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="search..." v-model = "keyword" @keyup.enter = "search">
</div>
</div>
</div>
</template>
<script>
//4.定义组件
// 定义用户列表组件
Vue.component('userList',{
template : '#userListTemp',
props:['fusers'], //1-1 定义接收父组件数据的变量 ，只能是小写
methods:{
del(userId){
//3-2 把userId传给父组件
this.$emit('getuserid',userId);//事件名只能是小写
}
}
});
// 定义添加组件
Vue.component('addUser',{
template : '#addUserTemp',
data(){
return {
username : '',
password : '',
nextId : 1,
keyword :''//定义搜索的关键字
};
},
methods:{
add(){
//添加对象到数组中
var user = {
id:this.nextId ++,
username:this.username,
password:this.password
};
//2-2.把对象数据传给父组件
this.$emit('getuser',user);
// 清空输入
this.username = this.password = this.keyword = '';
},
search(){
//4-2 把keyword传给父组件
this.$emit('getkeyword',this.keyword);
}
}
});
// 2.创建vue实例
var vue = new Vue({
el : '#app',
data : {
userList : [{id:0,username:'macy',password:'123'}],//存储用户信息
results:[{id:0,username:'macy',password:'123'}]//展示到页面的结果，提供搜索后的列表
},
methods:{
getUserFromAddUserComp(val){//2-1.定义从添加用户组件获取数据的方法
//把获取的来自添加用户组件的值添加到数组
this.userList.push(val);
//拷贝数组
this.results = this.userList;
},
getIdFromUserListComp(val){//3-1 定义从用户列表获取id的方法
console.log(val);
//根据来自用户列表组件的id查找对应的索引
var index = this.userList.findIndex((item,i,arr) => {
return item.id === val;
});
//从数组中剔除该索引对应的元素
this.userList.splice(index,1);
//拷贝数组
this.results = this.userList;
},
getKeywordFromUserListComp(val){//4-1 定义从用户列表获取的keyword方法
// console.log(val);
this.results = this.userList.filter((item,i,arr) => {
if (item.username.includes(val)){
return item;
}
});
}
}
});
</script>
</body>
</html>
- 效果
vue入门demo：用户管理3的更多相关文章
- vue入门：用户管理demo
该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...
- vue入门：用户管理demo1
该demo由前端请求后台服务器获取数据进行渲染 使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.ent ...
- linux入门之用户管理
用户管理 添加用户 以root用户执行 adduser 或 useradd [new_account] -u UID -d 指定家目录 -g GID 指定一个基本组ID -G指定一个附加组 ...
- Windows Server 2008 R2入门之用户管理
一.用户账户概述: ”用户”是计算机的使用者在计算机系统中的身份映射,不同的用户身份拥有不同的权限,每个用户包含一个名称和一个密码: 在Windows中,每个用户帐户有一个唯一的安全标识符(Secur ...
- vue 入门1 组件管理
全局 组件.局部组件 // Vue.component('todo-list',{ // template:'<li >item</li>' // }); //全局 // va ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- 一步步使用SpringBoot结合Vue实现登录和用户管理功能
前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...
随机推荐
- IMAPd - Internet 邮件存取协议服务器
总览 /usr/etc/imapd 描述 imapd 是个支持 IMAP4rev1 远程邮件存取协议(由RFC2060定义)的服务器. imapd 是由internet服务器(参见 inetd(8)) ...
- python子进程模块subprocess详解
subprocess--子进程管理器一.subprocess 模块简介subprocess最早是在2.4版本中引入的.subprocess模块用来生成子进程,并可以通过管道连接它们的输入/输出/错误, ...
- 第四小节之Java 集合类
Java的集合类就像一个容器,专门用来存储Java类的对象.这些类可以存储任意类型的对象,并且长度可变,统称为集合,这些类位于java.util包中,数组也可以保存多个对象,但在某些情况下无法确定到底 ...
- 安装与学习laravel
安装 composer cd /var/www/html curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/ ...
- Wannafly挑战赛22 B 字符路径 （ 拓扑排序+dp ）
链接:https://ac.nowcoder.com/acm/contest/160/B 来源:牛客网 题目描述 给一个含n个点m条边的有向无环图(允许重边,点用1到n的整数表示),每条边上有一个字符 ...
- Python socket服务
套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开.读写和关闭等操作. 1. 实现客户端发送字符,服务器返回大写的字符: 服务器: import soc ...
- feign 发送请求时，传多个参数时的写法
第一:传参方式写法,当参数个数大于2个时,需要用@RequestParam @PostMapping(value = "/configReader/configValue.do", ...
- gitlab搭建之互备模式
gitlab搭建之互备模式 gitlab搭建之互备模式 前言:gitlab目前默认的部署方式是本地单机部署,为了提高gitlab环境的可靠性和稳定性,必须构建一套互备搭建方案:借助gitolilt ...
- vue 路由拦截器和请求拦截器
路由拦截器 已路由为导向 router.beforeEach((to,from,next)=>{ if(to.path=='/login' || localStorage.getItem('to ...
- 镜像源操作-ananconda-docker
CentOS mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup CentOS 6 wget - ...