Vue自定义指令

乌秋

已于 2023-09-19 21:11:06 修改

阅读量321

点赞数

文章标签： vue.js 前端 javascript

于 2023-09-16 16:39:28 首次发布

本文链接：https://blog.csdn.net/weixin_46372993/article/details/132920263

版权

文章目录

前言
总结

前言

Vue中的自定义指令是一种扩展Vue.js功能的方法。通过自定义指令，您可以直接操作DOM元素，添加特定的行为和功能。要创建自定义指令，您可以使用Vue.directive方法。指令可以在Vue实例的模板中以v-开头的形式使用。

一、全局注册

1、语法模块

 Vue.directive('指令名称', {
            //指令选项
        });

2、代码示例：自定义全局注册 v-focus 指令

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.directive('focus', {
            inserted:function(el) {
                el.focus()
            },
        });
        new Vue({
            el:'#app'
        })
    </script>
</body>

二、局部注册

1、语法模块

var app = new Vue({
            el: '#app',
            directive: {
            // 指令名称：指令的配置项
                指令名称: {
                    //指令选项
                }
            }
        })

2、代码示例：自定义局部注册 v-focus 指令

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            directives: {
                focus: {
                    inserted: function (el) {
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>