Vue2.0 Vue自定义指令_对象式

最新推荐文章于 2023-02-16 20:14:58 发布

结城明日奈是我老婆

最新推荐文章于 2023-02-16 20:14:58 发布

阅读量476

点赞数

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121904672

版权

vue2 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

# 需求2:定义一个v-fbind指令,和v-bind功能类似,但是可以让其所绑定的input元素默认获取焦点

不用自定义指令:

<input type="text" v-fbind:value="n" autofocus>

这样写自定义指令就玩不下去了,而且写这个不是什么浏览器都可以
方法有很多，但是现在还是自定义指令为主

fbind(element,binding){
    element.value = binding.value
    element.focus()
}

一开始没获取焦点，但是focus()是执行了,按下按键n+1又获取焦点了

写一个原生HTML

<!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>原生HTML写一个获取焦点</title>
    </head>
    <body>
        <button id="btn">点我创建一个输入框</button>
    </body>
    <script>
        const btn = document.getElementById('btn')
        btn.onclick = ()=>{
            const input = document.createElement('input')//创建input输入框
            document.body.appendChild(input)//在body中放入input
            input.focus()//focus API 获取焦点
        }
    </script>
</html>

可以点击就获取焦点。只能说input.focus()不是放在哪里都一样的

const input = document.createElement('input')
input.focus()
document.body.appendChild(input)

创建了元素、获取了焦点、放入body中然后呈现

就不行

有些元素得放入(document.body.appendChild(input))后才有效，有些元素在放入(document.body.appendChild(input))前就可以有效

不是代码错了,而是执行的时机有问题

所以就解释清楚了前面的element.focus() fbind,fbind只要一调用element.focus()就是在1.指令与元素成功绑定时这个问题上
指令: v-fbind
元素: input
成功绑定,没说放入页面
绑定仅仅代表了在内存里面建立了关系你的input并没有跑到页面
点击后element获取了input所以可以

在我们能够发现Vue不仅仅把指令和元素绑定成功了，而且Vue还把元素放入页面了后,在这个时候我们focus()就可以了,只要fbind写成函数,你就执行不来,只有俩个时候被调用，你根本拿不到那个时间点(就是vue把元素放到页面的时间点)，所以得这样:

directives:{
    fbind:{
        
    }
}

在这个对象里面你可以准备很多的函数
Vue给你个承诺:Vue会在特殊的时刻去帮你调特殊的函数
这些函数都有Vue给你定义好的名字，不能写错
这里面常用的有三个:

bind()

当指令与元素成功绑定时(一上来)调用

inserted()

指令所在的元素被插入页面时调用

update()

指令所在的模板被重新解析时调用

这三个执行的顺序

fbind:{
            //当指令与元素成功绑定时(一上来)
            bind(){
                console.log('bind')
            },
            //指令所在的元素被插入页面时
            inserted(){
                console.log('inserted')
            },
            //指令所在的模板被重新解析时调用
            update(){
                console.log('update')
            }
        }

先是bind -> inserted -> update

input.className = 'back'
input.value = 99

这种情况就等于bind区域

bind(element,binding){
    //console.log('bind')
    element.value = binding.value
},

inserted(element,binding){
    //console.log('inserted')
    element.focus()
},

update(element,binding){
    //console.log('update')
    element.value = binding.value
}

若是点击按键(失去焦点)也不会失去焦点

update(element,binding){
    //console.log('update')
    element.value = binding.value
    element.focus()
}

我们现有个大概的印象:
bind、inserted、update它们三个都是函数Vue在不同的时刻帮我调用不同的函数

结城明日奈是我老婆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue2.0 Vue自定义指令_对象式

Vue2.0 Vue自定义指令对象式写法,重点就是掌握bind()、inserted()、update()
复制链接

扫一扫

专栏目录