vue--自定义指令

Posted zouzou-busy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue--自定义指令相关的知识,希望对你有一定的参考价值。

自定义指令

除了内置指令外,Vue也允许注册自定义指令。有的情况下,你仍然需要对普通的DOM元素进行底层操作,这时候使用自定义指令更方便。

官方文档:https://cn.vuejs.org/v2/guide/custom-directive.html

全局指令

案例:将字母转为大写,颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-upper-text="msg">xxxxx</p>
        
    </div>
    
    <script>
        // 注册全局自定义指令,可以在多个Vue管理的入口下使用该指令
        // 第一个参数为指令名,但是不要有v-开头
        Vue.directive(upper-text,{
            //一般对样式 的操作在bind中,bind函数只调用一次
            bind: function (el) {
                el.style.color = red
            },
            //一般对js操作在inserted中,inserted也是只调用一次
            // el是当前指令作用的那个Dom元素,
            // binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
            inserted: function (el, binding) {
                // 将所有字母文本内容转换为大写
                el.innerHTML = binding.value.toUpperCase()
            }
        })


        new Vue({
            el: #app,
            data: {
                msg: hello world
            }
        })
    </script>
</body>
</html>

局部指令

局部指令只能在当前vue实例中使用,如果有个id为app2的div,则不生效

案例:刷新之后自动获取输入框焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        自动获取焦点:<input type="text" v-focus>
    </div>
    
    
    <script>

        new Vue({
            el: #app,
            data: {
                message: hello world
            },
            //注册局部自定义指令:只能在当前Vue实例管理的入口 下引用这个指令
            directives: {
                focus: { // 指令名,
                    bind: function () {

                    },
                    // 刷新页面自动获取焦点
                    inserted: function (el, binding) {
                        //被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
                        el.focus()
                    }
                }
            }
        })

     
    </script>
</body>
</html>

以上是关于vue--自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家