# 需求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在不同的时刻帮我调用不同的函数
扫一扫
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
