Vue自定义指令

小白学习日记

已于 2022-02-13 13:40:12 修改

阅读量144

点赞数

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

于 2022-02-13 13:37:28 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46533814/article/details/122908058

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue.js中自定义指令的创建和使用，包括`v-big`指令用于数值放大和`v-fbind`指令实现输入框自动聚焦。通过示例代码展示了如何定义及绑定这些指令，并详细解释了指令的生命周期回调函数，如`bind`、`inserted`和`update`。文章强调了在定义和使用自定义指令时应注意的细节，如指令命名规范和作用时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令：

需求

定义一个v-big指令，把绑定的值放大10倍
v-fbind指令，和v-bind类似，可以让绑定的input元素默认获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    
</body>
<div id="app">
    <h2>当前值： <span v-text="n"></span></h2>
    <h2>放大后的n： <span v-big="n"></span></h2>
<!--    <h2>放大后的n： <span v-big-number="n"></span></h2>-->
    <button @click="n++">点击n+1</button>
    <hr>
    <!--autofocus属性可以自动获取焦点-->
    <input type="text" v-fbind:value="n" >
</div>
<script>
 /*
    //全局自定义fbind指令
    Vue.directive('fbind',{//指令与元素成功绑定时
        bind(element,binding){
            element.value = binding.value
            console.log(this)//指令回调的this是window
        },
        //指令所在元素被插入页面时
        inserted(element,binding){
            //获取焦点
            element.focus()
        },
        //指令所在模板被重新解析时
        update(element,binding){
            element.value = binding.value

        }})

 */
    let app = new Vue({
        el: '#app',
        data: {
            n: 1
        },
        //自定义指令
        directives: {
            //另一种写法：限于较复杂的指令，不可用驼峰
            // 'big-number'(element,binding){
            //     element.innerText = binding.value * 10
            //     console.log(element,binding.value)
            // },
            //自定义指令,何时调用？
            //1.指令与元素成功绑定时
            //2.指令所在模板被重新解析时
            big(element,binding){
                element.innerText = binding.value * 10
                console.log(element,binding.value,this)
            },
            //局部自定义指令
            fbind: {
                //指令与元素成功绑定时
                bind(element,binding){
                    element.value = binding.value
                    console.log(this)//指令回调的this是window对象，不是vue实例
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    //获取焦点
                    element.focus()
                },
                //指令所在模板被重新解析时
                update(element,binding){
                    element.value = binding.value

                }
            }
        }
    })
</script>
</html>

测试：
在这里插入图片描述

总结：

指令语法
定义语法：
局部指令：
new Vue({
directives: {指令名：配置对象}
})
或
new Vue({
directives{指令名：回调函数}
})
全局指令：
1.Vue.directive(指令名,配置对象)
2.Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用
注意：
1.指令定义时不加v-，但使用时要加v-
2.指令名如果是多个单词，使用kebab-case命名方式,不要用camelCase驼峰命名