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) => {})：查询符合条件的元素索引，符合条件时返回索引值，不满足条件时返回 -1

arr.filter((item,index) => {})：查询符合条件的元素数组，符合条件时返回元素数组，不满足条件时返回空数组

arr.forEach((item,index) => {})：遍历数组

str.includes(s)：字符串中是否包含子字符串

str.indexOf(s)：子字符串在字符串中首次出现的位置，区分大小写，不匹配时返回-1

str.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">&times;</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 ...

随机推荐

Python爬虫学习代码
[1]用一个简单的程序来显示Python的数字类型. code: class ShowNumType(object): def __init__(self): self.showInt() self. ...
搭建oj平台
欢迎使用https://github.com/QingdaoU/OnlineJudgeDeploy
洛谷P3150 pb的游戏（1）题解
题目链接: https://www.luogu.org/problemnew/show/P3150 分析: 这道题是一道典型的入门博弈论.我们可以进行如下考虑: 先引入一个奇偶的性质: 奇数=奇数+偶 ...
nginx(二)
nginx rewrite Nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向.rewrite只能放在server{},location{},if{}中,并且 ...
vue教程(五)--路由router介绍
一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...
Redis 学习笔记（篇六）：数据库
Redis 是一个使用 C 语言编写的 NoSql 的数据库,本篇就讲解在 Redis 中数据库是如何存储的?以及和数据库有关的一些操作. Redis 中的所有数据库都保存在 redis.h/redi ...
【iOS】iOS main() 简介
C 语言编写的程序,其执行入口都是 main(). 用 Objective-C 语言编写的程序也是这样. main.m 中的代码如下: int main(int argc, char * argv[] ...
Linux 清理空间
背景: 在使用Linux服务器的时候,经常会碰到服务器上的磁盘空间满了,在该种情况下,必须进行磁盘空间清理. 解决方法: 示例:需要/tmp下空出至少1G的可用空间分别执行的命令如下: df /tm ...
自定义SWT控件五之自定义穿梭框
5.自定义穿梭框 package com.view.control.shuttlebox; import java.util.ArrayList; import java.util.HashMap; ...
pod指定node运行
1.给node打上label kubectl label nodes cn-hongkong.i-j6c5pm0b59y9kaos565o apptype=monitoring 2.查看结果kubec ...

vue入门：用户管理demo

vue入门：用户管理demo的更多相关文章

随机推荐

热门专题