vue第十三单元(指令的作用,指令的钩子函数)
2024-10-21 07:55:59
第十三单元(指令的作用,指令的钩子函数)
#课程目标
1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数
#知识点
#一、认识自定义指令
除了核心功能默认内置的指令 (v-model
和 v-show
),Vue 也允许注册自定义指令。
举例说明:当页面加载时,input就将获得焦点 。
1、全局定义指令:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2、局部定义指令:
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
3、自定义指令的使用:
<input v-focus>
1
#二、钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
#三、钩子函数的参数
el
:指令所绑定的元素,可以用来直接操作 DOM 。- binding:一个对象,包含以下属性:
name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
注:除了 el
之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset
来进行。
举例:
<template>
<div>
<h1 v-color:bg="'red'">自定义指令-参数演示</h1>
<h1 v-color:font="'red'">自定义指令-参数演示</h1>
</div>
</template>
<script>
export default {
directives: {
color: {
//设置文字颜色指令
inserted: (el, binding) => {
console.log(el, binding);
if(binding.arg==='bg'){
el.style.backgroundColor=binding.value
}else{
el.style.color=binding.value
}
}
}
}
};
</script>
效果展示:
参数对比:
#授课思路
#案例作业
1、自定义指令实现登录框的校验
代码参考:
<template>
<div>
<p>
<input type="text" placeholder="6-8位数字字母" v-input="/^[0-9a-zA-Z]{6,8}$/" />
<span v-if="show&&flag" style="color:green">成功</span>
<span v-if="show&&!flag" style="color:red">失败</span>
</p>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
show: false
};
},
directives: {
input: {
bind: (el, binding, vnode) => {
let _this = vnode.context; //获取当前vm实例
el.addEventListener("blur", () => {
_this.show = true;
if (binding.value.test(el.value)) {
el.style.border = "1px solid green";
_this.flag = true;
} else {
el.style.border = "1px solid red";
_this.flag = false;
}
});
}
}
}
};
</script>
2、通过指令实现画布的绘制
最新文章
- JavaFx导出文件
- MySQL Range Optimization
- HTTP 响应头信息
- 实例讲解表单验证插件Validation的应用
- C#中结构体与字节流互相转换
- 透过表象看本质!?之二——除了最小p乘,还有PCA
- java系列-JDBC的封装
- 四,ESP8266 TCP服务器
- Sampling
- webpack4学习笔记
- OSGI企业应用开发(十五)基于Spring、Mybatis、Spring MVC实现一个登录应用
- 快学Scala 第6章 对象 - 练习
- bootloader研究最后一关(上)
- [转帖]Tomcat目录结构详解
- Linux中常用的50个命令
- C# 将本地文件远程拷贝到其他电脑(转)
- Linux之IRQ domain
- PB程序调用C++ COM生成对象发回-2问题
- Knockout学习之表单绑定器(下)
- Alpha 冲刺报告8
热门文章
- 【Azure Redis 缓存 Azure Cache For Redis】使用Redis自带redis-benchmark.exe命令测试Azure Redis的性能
- Folx专业版智能速控功能详解
- H5系列之video自己编写控制栏
- yum安装软件时报错libmysqlclient.so.18()(64bit)
- 第四章:动态规划I
- 简化的鸿蒙WiFi接口,仅需几行代码,简单易用!
- C语言讲义——dll调用
- CentOS下构建Shell简易分发系统
- 微信小程序 下拉刷新
- bypass disable_function