Vue.js自定义指令及用Vue实现简单的学生信息管理系统

àì夳堔傛蜴生んèń 2024-03-22 14:53 37阅读 0赞

![a87fabc651564152a9b43782bfbe82d1.gif][]

**目录**

一、自定义指令v-mycolor

自定义指令生命周期：

二、使用钩子函数的自定义指令

三、Vue实现简单的学生信息管理系统

--------------------

除了核心功能默认内置的指令，Vue.js允许注册自定义指令。添加一个自定义指令，有两种方式：

> （1）通过Vue.directive()函数注册一个全局的指令
> 
> （2）通过组件directives属性，对该组件添加一个局部的指令

## 一、自定义指令v-mycolor ##

示例：

<div id="root">
            <div v-mycolor="color" id="demo">
                {
       {hello}}
            </div>
        </div>
        <script>
            Vue.config.productionTip = false;
            Vue.directive('mycolor', function(el, binding, vnode) {
                    el.style = 'color:' + binding.value;
            });
            const vm = new Vue({
                el: '#root',
                data: {
                    hello:"你好",
                    color:'red'
                },
                methods: {
    
                }
            })
        </script>

执行结果：

![0a545303b56046e5a599da75ce1e4264.png][]

通过以上示例，可以看到网页上的"你好"是红色，说明自定义指令起到了作用。

> 在自定义指令中，可以传递是三个参数：
> 
> el：指令所绑定的元素，可以用来直接操作DOM。
> 
> binding：一个对象，包含指令的很多信息。
> 
> vnode：Vue.js编译生成的虚拟节点。

### 自定义指令生命周期： ###

（1）bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作

（2）nserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在与document中）。

（3）update：被绑定于元素所在的模板更新时调用，而无论绑定至是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

（4）componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

（5）unbind：只调用一次，指令与元素解绑时调用

## 二、使用钩子函数的自定义指令 ##

钩子函数的参数如下所示：

> el：与上面介绍的一样，el是指令所绑定的元素，可以用来直接操作DOM；

示例：

<div id="root">
            <div v-mycolor="color" id="demo">
                {
       {num}}
            </div>
            <div>
                <button @click="add">Add</button>
            </div>
        </div>
        <script>
            Vue.config.productionTip = false;
            Vue.directive('mycolor',{
                bind:function(){
                    console.log('1-绑定时调用bind');
                },
                inserted:function(el,binding,vnode){
                    alert('绑定到节点时调用inserted');
                    console.log('2-绑定到节点时调用inserted');
                    el.style='color:'+binding.value;
                },
                update:function(el,binding,vnode){
                    alert('3-组件更新时调用update');
                    console.log('3-组件更新时调用update');
                    el.style='color:green';
                },
                componentUpdated:function(){
                    console.log('4-组件更新完成时调用componentUpdated');
                }
            })
            const vm = new Vue({
                el: '#root',
                data: {
                    num:10,
                    color:'red'
                },
                methods: {
                    add:function(){
                        this.num++;
                    }
                }
            })
        </script>

执行结果：

运行后，浏览器会弹出"绑定到节点时调用inserted"，这时文字的颜色会变成红色，且浏览器的控制中输出：

![6f122813d0794809b28e64c03aecc6eb.png][]

![809a07799aee4cef9fce5c08ee969e03.png][]

当点击"Add"按钮时，浏览器会弹出"3-组件更新时调用update"，这时文字会由"10"变成11，字体颜色会变成绿色：

![b9ca88d42139471fbd5d79cd21a40af4.png][]

![2f105028e74d4c6a84ac0278895b9c68.png][]

## 三、Vue实现简单的学生信息管理系统 ##

> **实现学生信息的增删改查和分页功能，及按照学生年龄进行降序排序，升序排序和原顺序**

全部源代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../../vue-2.7.14.js"></script>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #root {
                margin: 0px auto;
                width: 900px;
                height: auto;
                background-color: orange;
            }
    
            div {
                margin: 0px auto;
                border: 2px solid black;
                width: 98%;
                text-align: center;
                padding-top: 10px;
                padding-bottom: 10px;
            }
    
            table {
                width: 98%;
                margin: 1px auto;
                border: 2px solid black;
                border-collapse: collapse;
            }
    
            th,
            td {
                border: 2px solid black;
                padding: 5px;
            }
    
            label {
                margin-left: 10px;
            }
    
            input {
                height: 30px;
            }
    
            button {
                width: 100px;
                height: 30px;
            }
    
            span {
                margin-left: 50px;
                margin-right: 50px;
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <div>
                <h2>学生信息管理系统</h2>
                <div>
                    <h2>添加信息</h2><br>
                    <div>
                        <input type="text" placeholder="请输入学号" v-model="id">
                        <input type="text" placeholder="请输入姓名" v-model="name">
                        <input type="text" placeholder="请输入性别" v-model="sex">
                        <input type="text" placeholder="请输入年龄" v-model="age">
                        <button v-on:click="add">提交</button>
                    </div><br>
                    <div>
                        <h2>查询信息</h2><br>
                        <input type="text" placeholder="请输入要查询的姓名" v-model.lazy="keyword">
                        <button @click="search()">查询</button>
                    </div>
                </div><br>
                <div>
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(student,index) in dataShow" :key="student.id">
                            <td>{
       {index+1}}</td>
                            <td>{
       {student.id}}</td>
                            <td>{
       {student.name}}</td>
                            <td>{
       {student.sex}}</td>
                            <td>{
       {student.age}}</td>
                            <td>{
       {student.ctime | newTime}}</td>
                            <td>
                                <button @click.prevent='toEdit(student.id)'>修改</button>
                                <button @click.prevent="del(index)">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" colspan="7">共计  {
       {count}}  人</td>
                        </tr>
                    </table>
                </div><br>
                <div>
                    <select v-model="pageSize" v-on:change="changePageSize">
                        <option value="5">5页</option>
                        <option value="10">10页</option>
                        <option value="15">15页</option>
                        <option value="20">20页</option>
                    </select>
                    <button v-on:click="firstPage" :disabled="currentPage === 1">首页</button>
                    <button v-on:click="previousPage" :disabled="currentPage === 1">上一页</button>
                    <button v-on:click="nextPage" :disabled="currentPage === totalPages">下一页</button>
                    <button v-on:click="lastPage" :disabled="currentPage === totalPages">尾页</button>
                    <span>当前是第{
       { currentPage }}页 / 总共{
       { totalPages }}页</span>
                </div>
                <br>
                <div v-show="flag">
                    <h2>修改信息</h2>
                    <br><br>
                    <label>学号：<input type="text" placeholder="请输入学号" v-model="id2"></label>
                    <label>姓名：<input type="text" placeholder="请输入姓名" v-model="name2"></label>
                    <br><br>
                    <label>性别：<input type="text" placeholder="请输入性别" v-model="sex2"></label>
                    <label>年龄：<input type="text" placeholder="请输入年龄" v-model="age2"></label>
                    <br><br>
                    <button @click="add2(editIndex)">保存</button>
                </div>
                <div>
                    <span><button style="width: 150px;" v-on:click="sortType=2">按年龄升序</button></span>
                    <span><button style="width: 150px;" v-on:click="sortType=1">按年龄降序</button></span>
                    <span><button style="width: 150px;" v-on:click="sortType=0">原顺序</button></span>
                </div>
            </div>
        </div>
        <script>
            Vue.config.productionTip = false;
            Vue.filter("newTime", (value) => {
                year = value.getFullYear();
                month = value.getMonth() + 1;
                day = value.getDate();
                return `${year}年${month}月${day}日`;
                // return year + "年" + month + "月" + day + "日"
            })
            const vm = new Vue({
                el: '#root',
                data: {
                    flag: false,//true表示修改窗口展开，false表示窗口关闭
                    id: "",
                    name: "",
                    sex: "",
                    age: "",
    
                    id2: "",
                    name2: "",
                    sex2: "",
                    age2: "",
    
                    keyword: "",
                    time: "",
    
                    sortType: 0,//0表示原顺序，1表示降序，2表示升序
                    editIndex: null, // 保存正在编辑的对象的索引，初始值不能为0及0以上的数
    
                    students: [
                        { id: "00001", name: "张三", sex: "男", age: 20, ctime: new Date() },
                        { id: "00002", name: "李四", sex: "女", age: 19, ctime: new Date() },
                        { id: "00003", name: "王五", sex: "男", age: 18, ctime: new Date() },
                        { id: "00004", name: "赵六", sex: "男", age: 19, ctime: new Date() },
                        { id: "00005", name: "李力", sex: "男", age: 21, ctime: new Date() },
                        { id: "00006", name: "二狗", sex: "男", age: 17, ctime: new Date() },
                        { id: "00007", name: "狗蛋", sex: "女", age: 20, ctime: new Date() },
                        { id: "00008", name: "三炮", sex: "男", age: 19, ctime: new Date() },
                        { id: "00009", name: "刘仁", sex: "女", age: 19, ctime: new Date() },
                        { id: "00010", name: "四儿", sex: "男", age: 22, ctime: new Date() }
                    ],
                    newStudents: [],
                    currentPage: 1,//当前页数，默认为1
                    pageSize: 5,//每页显示数量
                },
                computed: {
                    //计算有几组学生信息
                    count() {
                        return this.fillPersons.length;
                    },
                    dataShow() {
                        let start = (this.currentPage - 1) * this.pageSize;
                        let end = Math.min((this.currentPage) * this.pageSize, this.count);
                        return this.fillPersons.slice(start, end);
                    },
                    //计算总页数
                    totalPages() {
                        return Math.ceil(this.count / this.pageSize) || 1;
                    },
                    //对学生信息进行排序
                    fillPersons() {
                        // 找到第一个满足条件的元素就终止过滤操作
                        const arr = this.students.filter((p) => {
                            return p.name.indexOf(this.keyword) !== -1;
                        });
                        //对学生信息进行升序降序和原顺序排序
                        if (this.sortType) {
                            arr.sort((p1, p2) => {
                                return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
                            });
                        }
                        return arr;
                    }
    
                },
                methods: {
                    //更改每页显示的记录数时更新当前页码，以确保在更改每页记录数后，
                    // 用户仍然可以看到正确的记录列表。
                    changePageSize() {
                        this.currentPage = 1;
                    },
                    //首页
                    firstPage() {
                        this.currentPage = 1;
                    },
                    //上一页
                    previousPage() {
                        this.currentPage -= 1;
                    },
                    //下一页
                    nextPage() {
                        this.currentPage += 1;
                    },
                    //尾页
                    lastPage() {
                        this.currentPage = this.totalPages;
                    },
                    //添加操作
                    add() {
                        //添加进对应的学生信息
                        this.students.push({
                            id: this.id,
                            name: this.name,
                            sex: this.sex,
                            age: this.age,
                            ctime: new Date()
                        });
                        //重新赋空值
                        this.id = "",
                            this.name = "",
                            this.sex = "",
                            this.age = ""
                    },
                    //删除操作
                    del(index) {
                        //根据下标删除对应的学生信息
                        this.students.splice(index, 1);
                    },
                    //查询操作
                    search() {
                        //判断是否输入查询内容
                        if (this.keyword) {
                            // this.students = this.newStudents;
                            //找到满足条件的元素并赋值
                            var list = this.students.filter(item => item.name.indexOf(this.keyword) > -1);
                            if (list.length != 0) {
                                alert("查询成功");
                                this.students = list;
                            } else {
                                alert("查询失败");
                                this.students = [];
                            }
                            this.keyword = ''
                        } else {
                            alert("请输入要查找的姓名");
                        }
                    },
                    // 修改操作
                    toEdit(id) {
                        //定位索引 
                        this.editIndex = id;
                        // flag 调成 true,调出修改操作窗口
                        this.flag = true;
                        // filter 操作：找到第一个满足条件的元素就终止过滤操作
                        let student = this.students.filter(stu => {
                            // 注意：此时的返回值 student 是一个对象
                            return stu.id == id;
                        });
    
                        // 此时在文本框中显示的是：已经选中的学生信息
                        this.id2 = student[0].id;
                        this.name2 = student[0].name;
                        this.sex2 = student[0].sex;
                        this.age2 = student[0].age;
                    },
                    // 修改保存操作
                    add2(editIndex) {
                        // flag 调成 false,就表示是关闭修改操作窗口
                        this.flag = false;
    
                        //查找需要修改的的下标
                        var index = this.students.findIndex((item) => {
                            if (item.id == this.editIndex) {
                                return true;
                            }
                        })
                        //删除对应下标的学生信息
                        this.students.splice(index, 1);
    
                        // //把最最新的学生信息重新添加
                        this.students.push({
                            id: this.id2,
                            name: this.name2,
                            sex: this.sex2,
                            age: this.age2,
                            ctime: new Date()
                        });
    
                        // //重新赋空值
                        this.id2 = "",
                            this.name2 = "",
                            this.sex2 = "",
                            this.age2 = ""
                    },
                }
            })
        </script>
    </body>
    
    </html>

执行结果：

![c1f83e7c17604c58986ae6d81a5b388d.png][]

上图只展示了主界面，其他功能请自行复制粘贴到vscode中执行修改！

[a87fabc651564152a9b43782bfbe82d1.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2198e093aff04177aeeef0d86e390dde.png
[0a545303b56046e5a599da75ce1e4264.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f53cd109bc5e4e1fa33920863a9c431d.png
[6f122813d0794809b28e64c03aecc6eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cb59cd19f89c4fbbaedd042a30bdd813.png
[809a07799aee4cef9fce5c08ee969e03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/efaa78f122044e2895b90858b1614479.png
[b9ca88d42139471fbd5d79cd21a40af4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/28b21fadb76344a9a8ccc0b0b4651026.png
[2f105028e74d4c6a84ac0278895b9c68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/29916833ee6d498f9721f87021521e59.png
[c1f83e7c17604c58986ae6d81a5b388d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/edd003dbdd9e4c9aadc539115f5d69f7.png