Vue——学生信息管理系统

Posted 2020-12-08 macro-renzhansheng

## 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() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 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