vue自定义指令

最新推荐文章于 2024-05-20 09:30:28 发布

进阶的菜熊

最新推荐文章于 2024-05-20 09:30:28 发布

阅读量268

点赞数

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

本文链接：https://blog.csdn.net/qq_44998582/article/details/122526726

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

自定义指令

通过directives关键字进行定义

directives:{
dir(element,binding){
    console.log(element,binding)
}
}

自定义的指令会自动接收两个参数，第一个为指令所在的html标签（DOM元素），第二个为指令的相关信息

自定义指定何时会被调用？

指令与元素成功绑定时
指令所在的模板被重新解析时

例子：定义一个v-cut指令，每点击一次按钮显示一个值

<body>
    <div id="app">
        <button @click='show'>点我呀</button>
        <div v-cut="str1"></div>
    </div>
</body>
<script>
    //定义一个v-cut指令，每点击一次按钮显示一个值
    let app = new Vue({
        el: "#app",
        data: {
            str: "我是中国人，我爱中国！！",
            str1: '',
            n: 0
        },
        methods: {
            show() {
                if (this.n < this.str.length)
                    this.str1 += this.str[this.n++]
            }
        },
        directives: {
            cut(element, binding) {
                element.innerText = binding.value
                //binding.value值就是指定所绑定的str1的值
            }
        }
    })

</script>

⚠️小芝士：在实现cut函数的时候，我最初用了element.innerText = this.str1去改变div中的文字，发现并没有将str1显示到页面中去，后来发现自定义指令中this的指向的是window而不是vue实例，也正是如此才使得str1不能正常显示，这是需要注意的事情。在div标签中用v-cut绑定了str1，我们只需要在cut函数中使用binding.value就能获得vue实例中的str1

自定义指令详细写法

例子：定义一个v-focus指令,让其所绑定的input元素默认获取焦点。

上面这个例子先用已经撑握的知识来实现一下

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
</body>
<script>
    //定义一个v-focus指令,让其所绑定的input元素默认获取焦点。
    let app = new Vue({
        el: "#app",
        data: {
        },
        directives: {
            focus(element, binding) {
                element.focus()
                console.log(element)

            }
        }
    })

</script>

定义了focus指令并且在函数中加入了element.focus，但是应用到input中时发现input并没有主动获取焦点。

这是什么原因造成的呢？其实这就有关于指令是什么时候被调用的了。我们知道指令只有在指令与元素成功绑定时以及指令所在的模板被重新解析时才会调用。根据这一知识我们回到上面的代码中分析，就会知道指令与元素绑定时focus函数就被调用了，而这个时候input元素并没有被渲染到页面中，element.focus()自然就不起作用。

找到了问题产生的原因，就可以轻松解决啦！

其实呢，directives中的自定义指令还可以写成对象的形式，并且还为其设置了一些函数，有点类似于vue的生命周期函数。它共有三个：bind、inserted、updated

bind:指令与元素成功绑定时触发
inserted:指令所在元素被插入到页面时触发
update:指令所在的模板被重新解析时触发

了解到上面的知识后，利用新知识来解决下上面代码中的问题

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
</body>
<script>
    //定义一个v-focus指令,让其所绑定的input元素默认获取焦点。
    let app = new Vue({
        el: "#app",
        data: {
        },
        directives: {
            focus: {
                inserted(element, binding) {
                    element.focus()
                }
            }
        }
    })

</script>

将element.focus()语句放到inserted函数中，可以看到成功实现想要的效果

全局自定义指令

Vue.directive('focus',{
             inserted(element, binding) {
                    element.focus()
                }
})

进阶的菜熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue自定义指令

自定义指令通过directives关键字进行定义directives:{dir(element,binding){ console.log(element,binding)}}自定义的指令会自动接收两个参数，第一个为指令所在的html标签（DOM元素），第二个为指令的相关信息自定义指定何时会被调用？指令与元素成功绑定时指令所在的模板被重新解析时例子：定义一个v-cut指令，每点击一次按钮显示一个值<body> &lt.
复制链接

扫一扫