Vue学习:自定义指令2

¡Venceremo

于 2023-02-16 20:14:58 发布

阅读量120

点赞数

分类专栏： Vue 文章标签：学习 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129068553

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

v-fbind指令，和v-bind功能类似但是可以让其所绑定的Input元素获取默认焦点

使用和前面类似的方法但是需要点击后才能获取焦点

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


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

原因：举例子


可以成功有焦点
<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)
       

    }

所以：我们知道只有将输入框放到页面了才进行创造焦点才有效（但是不是所有的都需要这么做）

添加样式设置值点击事件在加入元素前添加是可以的

    <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()

失败：不可以在之前添加父元素的样式需要先放入

使用函数的方法无法实现元素与页面一开始绑定的时间点

            /*有问题
            使用函数的方法 无法实现元素与页面一开始绑定的时间点
            */
            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命名

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习:自定义指令2

new Vue({ directives: {指令名：配置对象} }) new Vue({ directives: {指令名：回调函数} }) Vue.directive(指令名,配置对象) Vue.directive(指令名,回调函数) bind: 指令与元素成功绑定（一开始就建立关系） inserted: 指令所在的元素被插入页面时使用-命名不能使用大写
复制链接

扫一扫

专栏目录