自定义指令的意义:对普通DOM元素进行底层操作;
作用 :可以获取到底层的dom,拿到想要的节点,从而进行操作;
实际应用:可以通过指令知道什么时候dom创建完成,从而进行依赖dom的库的初始化工作;
- <div id="box">
- <div v-hello>11111div>
- div>
-
- <script>
- Vue.directive("hello",{
- //指令的生命周期函数
- inserted(el){
- console.log("inserted",el)
- }
- })
- new Vue({
- el: "#box",
- data: {
-
- }
- })
- script>
-
结果:
代码中:div标签里的 hello 是自定义的指令,在dom中用的时候就是:v-指令;
定义hello指令,通过Vue.directive(“指令名”,{}),和定义组件形式一样;
inserted()生命周期函数:
触发时间:节点第一次插入到父节点(页面)中会触发,只会触发这一次;
用法:inserted(接收dom节点的形参,接收指令参数的形参)
如何拿到底层dom节点呢:
inserted函数的参数el:
指令里面也可以传参数:
" 'yellow' ">11111</div>//yellow是参数
- 不加引号的,直接写在里面的,传的是状态,不是参数:
"yellow">11111</div>//yellow是状态
inserted接收参数: binding
- "box">
- <div v-hello=" 'yellow' ">11111div>
- Vue.directive("hello",{
- //指令的生命周期函数
- inserted(el,binding){
- console.log("inserted",binding)
- el.style.background = binding.value
- }
- })
- inserted第二个参数binding是接收“yellow”参数的,结果是对象:
- 结果:
- 对象里面的value值放的就是yellow属性,再把这个属性赋值给标签做样式,就很有用:
el.style.background = binding.value
update():更新时期的生命周期函数
- 如果想更改这个参数,也就是 指令接收的参数:v-hello=" 'yellow' ,会发现不好用,改不了,因为inserted生命周期函数只在节点插入父节点的时候,会自动执行一次,后面就不会再执行了;
- 如果想更改参数,可以用指令的生命周期函数update():
update():更新时期的生命周期函数
触发事件:当指令的参数或者状态有所更新就会触发
用法:update(接收dom节点的形参,接收指令参数的形参)
- update(el,binding){
- console.log("update",binding)
- el.style.background = binding.value
- }
完整代码:
- <div id="box">
- <div v-hello=" whichcolor ">11111div>
- div>
-
- <script>
- Vue.directive("hello",{
- //指令的生命周期函数
- inserted(el,binding){
- console.log("inserted",binding)
- el.style.background = binding.value
- },
- update(el,binding){
- console.log("update",binding)
- el.style.background = binding.value
- }
- })
- new Vue({
- el: "#box",
- data: {
- whichcolor:'blue'
- }
- })
- script>
-
结果:
以上两个生命周期函数有简写方式:
- Vue.directive("hello",()=>{
- //每次插入或者更新dom就会操作一次
- el.style.background = binding.value
- }),
就是把两个生命周期函数放在一起写;
当然这种简写方式只有不强调单独一个生命周期函数时,可以使用;让只想用单独的inserted函数这样的写法就不好了。
-
相关阅读:
鸿蒙开发之MPChart图表开发
通过制作llama_cpp的docker镜像在内网离线部署运行大模型
Unity3D学习笔记6——GPU实例化(1)
ddddocr1.4.8失效的解决方法
ctf-pikachu-XSS
888 案例:淘宝服饰精品案例,新浪下拉菜单案例(使用 jQuery)
数据结构与算法:树 二叉树入门(一)
基于QT的指挥猫猫打架玩耍的小游戏设计
网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2330)
《MongoDB入门教程》第13篇 限制返回结果数量
-
原文地址:https://blog.csdn.net/a1598452168YY/article/details/128076248