Vue.js--自定义指令

最新推荐文章于 2024-03-04 22:44:14 发布

请叫我杰拉德6

最新推荐文章于 2024-03-04 22:44:14 发布

阅读量327

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_46505015/article/details/118976517

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在Vue中自定义指令分为：全局自定义指令和局部自定义指令

1.全局自定义指令
①首先自定义一个叫’focus’的自定义指令，使用时候加 v-focus 即可，加上v-focus，执行时候会干一件事情，会有一个叫 mounted 生命周期函数，指的是当这个指令挂载到某个dom节点上，mounted函数会自动执行，并且接收第一个参数el（当前挂载dom节点），然后开始自动执行el.focus()
②不管是全局自定义指令和局部自定义指令，里面都可以调用Vue生命周期函数，比如mounted（），beforemounted（），updated（）等函数

<body>

    <div id="root"></div>

    <script src="../Vue day01/vue.global.js"></script>
    <script>
        
        const app = Vue.createApp ({
            template:`
               <div>
                <input v-focus />
               </div> 
            `
        });

        //定义全局自定义指令，获取input输入框焦点
        app.directive ('focus', {
            mounted(el) {
                el.focus();
            }
        });
        
        const vm = app.mount('#root');

    </script>
</body>

运行效果：
在这里插入图片描述

③binding参数

    <style>
        .header {
            position: absolute
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script src="../Vue day01/vue.global.js"></script>
    <script>

        const app = Vue.createApp({
            data() {
                return {
                    top: 110,
                }
            },
            template: `
               <div>
                    <div v-pos='top' class='header'>
                        <input  />
                    </div>
                       
               </div> 
            `
        });
        
        //binding 是个对象，包含name和value等属性，在这里value的值就是v-pos等号右边top值400
        app.directive('pos', {
            mounted(el, binding) {
                el.style.top = (binding.value + 'px')
            }
        });

        const vm = app.mount('#root');

    </script>
</body>

运行效果：
在这里插入图片描述
④自定义参数，控制左右上下等

    <style>
        .header {
            position: absolute
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script src="../Vue day01/vue.global.js"></script>
    <script>

        const app = Vue.createApp({
            data() {
                return {
                    distance: 110,
                }
            },
            template: `
               <div>
                    <div v-pos:left='distance' class='header'>
                        <input  />
                    </div>
                       
               </div> 
            `
        });
        
        //binding 是个对象,里面还有个arg，在这里指的是left
        app.directive('pos', {
            mounted(el, binding) {
                el.style[binding.arg] = (binding.value + 'px')
            }
        });

        const vm = app.mount('#root');

    </script>
</body>

运行效果·：
在这里插入图片描述
在这里打印输出一下binding.arg

        app.directive('pos', {
            mounted(el, binding) {
                console.log(binding.arg , binding);
            }
        });

输出结果：
在这里插入图片描述
函数参数说明：
el:指令所绑定的dom元素，可以直接操作元素。
binding:一个对象，包含以下property

name:指令名，不包含’v-'前缀
value:指令的绑定值，即通过v-demo=“参数”，参数(计算后)传过来的计算结果
oldValue:指令绑定的前一个值，仅在update 和 componentUpdated 钩子中可用。无论值是否改变都可用
expression:字符串形式的指令表达式，v-demo=“1 + 1” ,这里参数值就是"1 + 1"。
arg:传给指令的参数，可选。例如v-demo:foo,这里的参数值就是’foo’
modifiers:一个包含修饰符的对象，例如v-demo.a.b,参数的值为{a:true,b:true}
vnode:vue编译生成的虚拟节点
oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子函数中可用

2.局部自定义指令
①局部自定义指令，只对当前vm模板有效
②函数参数跟全局自定义指令是一样的，也有el，binding

<body>
    <div id="root"></div>
    <script src="../Vue day01/vue.global.js"></script>
    <script>
        //定义一个局部指令
        const directives = {
            focus:{
                mounted(el){
                    el.focus();
                }
            }
        };

        const app = Vue.createApp({
            //使用局部指令，当2者名称相同时候，可以省略，只写一个directives
            directives: directives,
            template: `
               <div>
                  <input v-focus />
               </div> 
            `
        });
 
        const vm = app.mount('#root');

    </script>
</body>

运行效果：
在这里插入图片描述

请叫我杰拉德6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue.js--自定义指令

在Vue中自定义指令分为：全局自定义指令和局部自定义指令1.全局自定义指令①首先自定义一个叫’focus’的自定义指令，使用时候加 v-focus 即可，加上v-focus，执行时候会干一件事情，会有一个叫 mounted 生命周期函数，指的是当这个指令挂载到某个dom节点上，mounted函数会自动执行，并且接收第一个参数el（当前挂载dom节点），然后开始自动执行el.focus()②不管是全局自定义指令和局部自定义指令，里面都可以调用Vue生命周期函数，比如mounted（），before
复制链接

扫一扫