Table of contents
2. Custom instructions using hook functions
3. Vue implements a simple student information management system
In addition to the default built-in directives for core functionality, Vue.js allows registration of custom directives. There are two ways to add a custom directive:
(1) Register a global directive through the Vue.directive() function
(2) Add a local instruction to the component through the component directives attribute
1. Custom command v-mycolor
Example:
<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>Results of the:
Through the above example, you can see that "Hello" on the webpage is red, indicating that the custom instruction has played a role.
In a custom directive, three parameters can be passed:
el: The element bound to the instruction, which can be used to directly manipulate the DOM.
binding: An object that contains a lot of information about the instruction.
vnode: The virtual node generated by Vue.js compilation.
Custom directive life cycle:
(1) bind: only called once, when the instruction is bound to the element for the first time, this hook function can be used to define an initialization action that is executed once when binding
(2) nserted: Called when the bound element is inserted into the parent node (it can be called if the parent node exists, and does not need to exist in the document).
(3) update: Called when the template bound to the element is updated, regardless of whether the bound object changes. Unnecessary template updates can be ignored by comparing bound values before and after the update.
(4) componentUpdated: Called when the template where the bound element is located completes an update cycle.
(5) unbind: called only once, when the instruction is unbound from the element
2. Custom instructions using hook functions
The parameters of the hook function are as follows:
el: As described above, el is the element bound to the instruction and can be used to directly manipulate the DOM;
Example:
<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>Results of the:
After running, the browser will pop up "Inserted is called when binding to a node", at this time the color of the text will turn red, and the browser control will output:
When the "Add" button is clicked, the browser will pop up "3-Call update when the component is updated", at this time the text will change from "10" to 11, and the font color will change to green:
3. Vue implements a simple student information management system
Realize the function of addition, deletion, modification and paging of student information, and sort descending order, ascending order and original order according to the age of students
Full source code:
<!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>Results of the:
The picture above only shows the main interface, please copy and paste other functions into vscode for modification!