文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue自定义指令的使用实例介绍

2023-05-16 14:40

关注

何为自定义指令

通过前面的学习,我们都有了一定的Vue知识,我们都知道可以在Vue实例创建后,在template标签中写我们的界面,当我们需要控制某个dom元素的显示或者隐藏时,我们可以使用v-if指令。循环打印一个列表时,我们可以使用v-for指令等…,然而这些指令都是Vue给我们提供的,我们其实可以自己定义我们的指令,其实我理解这个自定义指令就是把某个功能做一个封装,以这个指令提供给调用者使用。减少相同代码的重复编写。在Vue中,自定义指令可以有全局定义和局部定义两种方式,下面我们一起看下如何定义自定义指令

实例解析

1.基本知识介绍

我们以一个简单的输入框自动焦的例子来演示Vue的自定义指令,具体的场景是:界面中有一个输入框,当界面加载出来后,让输入框自动获取焦点,我们先看下一般的实现方法,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>自定义指令</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    mounted(){
        this.$refs.input.focus();
    },
        template: 
        `
        <div>
            <input ref="input"/>
        </div>
        `
    });
    const vm = app.mount('#root');
</script>

运行结果读者可以自己运行看下效果,然后去掉focus函数调用,再运行看效果

我们在输入框中使用ref属性的方式,当页面加载完后,使用this.$refs.input.focus(),获取到input输入框,然后调用focus方法让输入框获取焦点。

使用上面的方法虽然能完成我们的需求,但是写起来比较麻烦,而且需要在我们的app实例的mounted()方法中增加聚焦的逻辑,使用自定义指令可以更简单的实现上面的输入框自动获取焦点的功能,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>自定义指令</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
       data(){
        return{
            display:true
        	}
       },
        template: 
        `
        <div v-show="display">
            <input v-focus/>
        </div>
        `
    });
    // 定义全局的自定义指令
    app.directive('focus',{
        mounted(el){
            console.log(el);
            el.focus();
            console.log('mounted');
        }
    });
    const vm = app.mount('#root');
</script>

如上面代码所示,使用app.directive(‘指令名称’,{ xxxx});的方式可以自定义的指令,使用时在对应的dom元素上添加v-指令名称就可以了,就如本例子中,调用的方法如下:

<input v-focus/>

这时候运行代码会发现效果和我们之前做的一模一样,这个写法更简单。在文中我们看到了mounted函数,这个函数是Vue生命周期的函数吗,意思是当界面挂载完成时会回调它,el参数就是我们使用自定义指令的那个Dom元素

 mounted(el){
            console.log(el);
            el.focus();
            console.log('mounted');
        }

其实定义自定义指令时不只可以重写mounted()函数,还可以重写其他的函数,如下所示:

    app.directive('focus',{
        beforeMount(el){
            console.log('beforeMount');
        },
        mounted(el){
            console.log('mounted');
        },
        beforeUpdate(){
            console.log('beforeUpdate');
        },
        updated(){
            console.log('updated');
        },
        beforeUnmount(){
            console.log('beforeUnmount');
        },
        unmounted(){
            console.log('unmounted');
        }
    });

在浏览器中运行上面代码,打开console,如下

我们可以在对应的生命周期回调中做对应的事情。

在上面的代码中我们定义自定义指令用的是全局的方式,其实我们还有局部的方式,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>自定义指令</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const direc = {
      focus:{
            mounted(el){
               el.focus();
            }
        }
    };
 const app = Vue.createApp({
       data(){
        return{
            display:true
        }
       },
       directives:direc,
        template: 
        `
        <div v-show="display">
            <input v-focus/>
        </div>
        `
    });
     const vm = app.mount('#root');
</script>

使用局部定义自定义属性的方式是:

 const direc = {
      focus:{
            mounted(el){
               el.focus();
            }
        }
    };

然后使用的时候需要加上:

 const app = Vue.createApp({
   ...
       directives:direc,
   ...
    });

2.使用自定义指令实现改变输入框位置

我们接下来使用Vue的自定义指令实现一个小功能,就是动态改变输入框的位置,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>自定义指令</title>
    <style>
        .header{
            position: absolute;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
    data(){
        return{
            pxValue:50
        }  
    },
        template: 
        `
        <div>
            <div v-pos:left="pxValue" class="header">
            <input />
            </div>
        </div>
        `
    });
    app.directive('pos',{
        mounted(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        },
        updated(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        }  
    });
    // 上面代码等价于下面注释掉的代码
    // app.directive('pos',(el,binding)=>{
    //     console.log(binding.arg,'binding')
    //     el.style[binding.arg]=(binding.value+'px');
    // })
    const vm = app.mount('#root');
</script>

首先我们定义一个样式,使用绝对定位的方式确定输入框的位置:

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

使用一个pxValue表示输入框位置的值,然后可以通过

v-pos:left="pxValue"的方式确定输入框是距离左边还是右边或者距离其他参照物。然后自定义指令的时候,拿到属性传过来的值和pxValue,改变输入框位置:

  app.directive('pos',{
        mounted(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        },
        updated(el,binding){
            el.style[binding.arg] = binding.value + 'px';
        }  
    });

这里也可以写成:

   app.directive('pos',(el,binding)=>{
        console.log(binding.arg,'binding')
        el.style[binding.arg]=(binding.value+'px');
    })

然后使用的时候就可以如下:

 <div v-pos:left="pxValue" class="header">
或者  <div v-pos:right="pxValue" class="header">
或者  <div v-pos:top="pxValue" class="header">

运行之后,可以修改对应的值查看效果,这里留给读者去自己体验:

总结

本文主要介绍了Vue使用自定义指令的两种方法,一种是全局自定义指令的使用方式,另一种是局部自定义指令的使用方式。需要注意的是,局部自定义指令定义完后需要在Vue.createApp({directives:局部自定义指令的变量名});才可以使用自定义指令。最后我们使用了一个动态改变输入框位置的例子展示了自定义指令的使用方式。

到此这篇关于Vue自定义指令的使用实例介绍的文章就介绍到这了,更多相关Vue自定义指令内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯