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绑定 新增.修改和删除数据 效果 ...
随机推荐
- C++ 临时对象的生存周期
C++ 临时对象的生存周期是一个不小的坑,参考 C++ standard 第十二章第二节,总结其规则如下: 基本原则:临时变量生存到其所在的完整表达式执行完毕之后(若作为函数参数,则以函数所在的完整表 ...
- VMware 问题
桥接模式下,小鸡上不了网问题 多网卡导致的问题 解决:编辑-虚拟网络编辑器 选择vmnet0,然后点击右下角更改设置 把自动改为指定要桥接的网卡,然后点击确定,测试看看.
- 012-zabbix主动模式
6.1 主动模式 zabbix agent检测分为主动(agent active)和被动(agent)两种形式,主动与被动的说法均是相对于agent来讨论的.简单说明一下主动与被动的区别如下: 主动: ...
- c++判断当前登录账户是否在域环境内
#include <Windows.h> #include <DSRole.h> #pragma comment(lib, "netapi32.lib") ...
- P1903 奖学金题解
众所周知,这是一道通过struct结构体进行排序的题目 思路:平常的输入.. 然后定义一个结构体grade,存放每个学生的学号.三科成绩.(也可以只存语文成绩和总分和学号) 自定义cmp函数,通过三层 ...
- JQuery 处理 微擎传递过去数据
JQuery 处理 微擎传递过去数据 PS:微擎得到的数据大多数是数组(我们这里处理数组) 将数组使用 json_encode() 函数处理成 JSON 格式 前端在 script 中使用 引号 将变 ...
- idea+maven3.6.1构建maven工程报PKIX：unable to find valid certification path to requested target
转载于 https://www.cnblogs.com/xiaoping1993/p/9717649.html 注意可能在idea工具执行java命令提示找不到类,返回类的最上层包路径 然后再执行j ...
- Java并发编程实战 第15章 原子变量和非阻塞同步机制
非阻塞的同步机制 简单的说,那就是又要实现同步,又不使用锁. 与基于锁的方案相比,非阻塞算法的实现要麻烦的多,但是它的可伸缩性和活跃性上拥有巨大的优势. 实现非阻塞算法的常见方法就是使用volatil ...
- maven pom文件标签含义
1.dependency里面的scope dependency里面的classifier dependency里面的type dependency里面的systemPath dependency里面的 ...
- 【leetcode】1191. K-Concatenation Maximum Sum
题目如下: Given an integer array arr and an integer k, modify the array by repeating it k times. For exa ...