目录

一、自定义指令v-mycolor

 自定义指令生命周期：

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

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

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

（1）通过Vue.directive()函数注册一个全局的指令

（2）通过组件directives属性，对该组件添加一个局部的指令

一、自定义指令v-mycolor

示例：

{{hello}}

执行结果：

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

在自定义指令中，可以传递是三个参数：

el：指令所绑定的元素，可以用来直接操作DOM。

binding：一个对象，包含指令的很多信息。

vnode：Vue.js编译生成的虚拟节点。

 自定义指令生命周期：

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

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

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

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

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

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

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

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

 

示例：

{{num}}

执行结果：

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

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

 

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

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

全部源代码：

Document

学生信息管理系统

添加信息



查询信息



序号学号姓名性别年龄创建时间操作
{{index+1}}{{student.id}}{{student.name}}{{student.sex}}{{student.age}}{{student.ctime | newTime}}

共计  {{count}}  人


当前是第{{ currentPage }}页 / 总共{{ totalPages }}页


修改信息







执行结果：

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

 

参考链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。