v-fbind指令,和v-bind功能类似 但是可以让其所绑定的Input元素获取默认焦点
使用和前面类似的方法 但是需要点击后才能获取焦点
<input type="text" v-fbind:value="n">
fbind(element, binding){
element.value = binding.value
element.focus()
}
![](https://i-blog.csdnimg.cn/blog_migrate/6c781355ae562b19e2a1b5e9900d38dd.png)
原因:举例子
可以成功有焦点
<button id="btn">点击创建输入框</button>
<script>
const btn=document.getElementById('btn')
btn.onclick=()=>{
const input =document.createElement('input')
document.body.appendChild(input)
input.focus()
}
//失败了创建焦点
const btn=document.getElementById('btn')
btn.onclick=()=>{
const input =document.createElement('input')
input.focus()
document.body.appendChild(input)
}
所以:我们知道只有将输入框放到页面了才进行创造焦点才有效(但是不是所有的都需要这么做)
![](https://i-blog.csdnimg.cn/blog_migrate/af20fb8d62662f43fca2f0ca2d99a502.png)
![](https://i-blog.csdnimg.cn/blog_migrate/be1b07f0ca67faa070b57c27c493e900.png)
添加样式 设置值 点击事件 在加入元素前添加是可以的
<style>
.demo {
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点击创建输入框</button>
<script>
const btn = document.getElementById('btn')
btn.onclick = () => {
const input = document.createElement('input')
input.className = 'demo'
input.value = 99
input.onclick = ()=>{
alert(1)
}
document.body.appendChild(input)
input.focus()
![](https://i-blog.csdnimg.cn/blog_migrate/18f4ad435da35af0c7c822473d3acbf4.png)
失败:不可以在之前添加父元素的样式 需要先放入
![](https://i-blog.csdnimg.cn/blog_migrate/0d892bb0f06124a67c2fb4217437be4f.png)
使用函数的方法 无法实现元素与页面一开始绑定的时间点
/*有问题
使用函数的方法 无法实现元素与页面一开始绑定的时间点
*/
fbind(element, binding){
//页面上仍然没有input
//但是第二次点击页面已经存在了焦点有效了
element.value = binding.value
element.focus()// 但是需要点击后才能获取焦点 没有进行元素与页面的绑定
}
使用对象的方法 实现自定义指令
fbind:{//使用的对象的方法 对绑定的事件进行细化 里面的函数名称不能写错
bind(element, binding){//指令与元素成功绑定(一开始就建立关系)
element.value = binding.value
},
inserted(element, binding){//指令所在的元素被插入页面时
element.focus()
},
update(element, binding){//指令所在的模板被重新解析时
element.value = binding.value
//点击的时候失去了焦点
}
}
写法
<input type="text" v-bi-g:value="n">
'bi-g':function(){
//完整写法 key包含-
}
'bi-g'(){
//完整写法 key包含-
}
<input type="text" v-biGg:value="n">
bigg:function(){
//完整写法 key包含-
}
bigg(){
//完整写法 key包含-
}
指令相关回调的this都是window,其次这些指令目前都是回调指令
全局指令:
/*对象的全局定义*/
Vue.directive('fbind',{//使用的对象的方法 对绑定的事件进行细化 里面的函数名称不能写错
bind(element, binding){//指令与元素成功绑定(一开始就建立关系)
element.value = binding.value
},
inserted(element, binding){//指令所在的元素被插入页面时
element.focus()
},
update(element, binding){//指令所在的模板被重新解析时
element.value = binding.value
//点击的时候失去了焦点
}
})
函数式
Vue.directive('big',function(element, binding){
element.innerText = binding.value * 10
}
)
1、局部指令
new Vue({ directives: {指令名:配置对象} }) new Vue({ directives: {指令名:回调函数} })
2、全局指令
Vue.directive(指令名,配置对象) Vue.directive(指令名,回调函数)
3、配置对象中常用的3个回调
bind: 指令与元素成功绑定(一开始就建立关系)
inserted: 指令所在的元素被插入页面时
update: 指令所在的模板被重新解析时
4、注意
指令定义不加v-,使用时加v-
指令名如果是多个单词,就要使用kebab-case命名方式 而不是camelCase命名