Vue——学生信息管理系统

Posted macro-renzhansheng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue——学生信息管理系统相关的知识,希望对你有一定的参考价值。

## vue 响应原理

# 对象

    1;对象新增的属性,不具有响应式。

    2:对象本存在属性,具有响应式。

    3: 属性是数组,数组的普通元素通过索引修改 不会进行响应式;

        但如果数组元素也是一个对象,则该对象具有响应式。

    4: 属性值是数组,通过调用pushspliceshift...具有响应式,并且添加元素值是一个对象

        也具有响应式。

系统核心逻辑:

【1】布局

<div id="app">

<div class="addStu">

<label for="">编号: <input type="text" v-model="id" disabled=‘flag‘></label>

<label for="">姓名: <input type="text" v-model="name"></label>

<label for="">性别: <input type="text" v-model="sex"></label>

<button @click="handleAddStu">提交</button>

</div>

<table class="tabCont">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr :key=‘stu.id‘ v-for=‘stu in students‘>

<td>{{stu.id}}</td>

<td>{{stu.name}}</td>

<td>{{stu.sex}}</td>

<td><a href="" @click.prevent=‘toEdit(stu.id)‘>修改</a> | <a href="" @click.prevent=‘removeStu(stu.id)‘>删除</a> </td>

</tr>

</tbody>

</table>

</div>

【2】CSS

.addStu,

.tabCont {

width: 662px;

margin: 0 auto;

border-collapse: collapse;

        }

.addStu,

.tabCont th {

background-color: orange;

        }

.tabCont th,

.tabCont td {

height: 35px;

border: 1px dashed black;

padding: 10px;

text-align: center;

        }

【3】JS操作

//添加数据

handleAddStu() {

if (this.flag) { //修改数组中数据

this.students.some(item => {

if (item.id == this.id) {

item.name = this.name;

item.sex = this.sex;

return true;

                            }

                        });

this.flag = false;

                    } else {

//vue处理获得填写的数据

let stu = {

id: this.id,

name: this.name,

sex: this.sex

                        };

this.students.push(stu);

                    }

//清空表单元素

this.id = ‘‘;

this.name = ‘‘;

this.sex = ‘‘;

                },

//编辑学生信息

toEdit(id) {

//点击修改 禁止添加学生

this.flag = true;

//根据id查到对应学生的信息,然后填充到表单

console.log(id);

let student = this.students.filter(stu => {

return stu.id === id;

                    });

this.id = student[0].id;

this.name = student[0].name;

this.sex = student[0].sex;

                }

//删除学生信息

【1】方法1,splice

let index = this.students.findIndex(stu => {

return stu.id == id;

                    });

this.students.splice(index, 1);

【2】filter获取新的数组

this.students = this.students.filter(stu => stu.id != id);

补充:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start?
指定修改的开始位置(从0计数)

deleteCount:

整数,表示要移除的数组元素的个数。

如果 deleteCount 是 0 或者负数,则不移除元素。这种情况下,至少应添加一个新元素。

item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

slice() 方法返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。


## 模块化

    一个功能单独封装到一个模块中

## 浏览器

    AMD(require.js)

    CMD(Sea.js)

## 服务端

    commonjs

## es6模块化是浏览器与服务器通用的模块化方案

    每一个js文件也是一个模块

    import导入模块

    export导出模块

## 安装包

    npm i --save-dev

    @babel/core

    @babel/cli

    @babel/preset-env

    @babel/node

    npm i --save @babel/polyfill

    npx babel-node index

    html-webpack-plugin 生成一个预览页面

##

npm i --save-dev @babel/core

npm i --save-dev @babel/cli

npm i --save-dev @babel/preset-env

npm i --save-dev @babel/node

npm i --save @babel/polyfill


以上是关于Vue——学生信息管理系统的主要内容,如果未能解决你的问题,请参考以下文章

学生管理系统-明日学院的

讨论7

面向对象—学生信息

JAVAWEB实现增删查改(图书信息管理)之删除功能实现

Vue 教程学习——转换为数字

Java面向对象练习学生信息输出