面试官:你有写过自定义指令吗?自定义指令的应用场景有哪些?

news2024/11/13 9:12:22

一、什么是指令

开始之前我们先学习一下指令系统这个词

指令系统是计算机硬件的语言系统,也叫机器语言,它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力

vue中提供了一套为数据驱动视图更为方便的操作,这些操作被称为指令系统

我们看到的v- 开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能

除了核心功能默认内置的指令 (v-modelv-show),Vue 也允许注册自定义指令

指令使用的几种方式:

//会实例化一个指令,但这个指令没有参数 
`v-xxx`

// -- 将值传到指令中
`v-xxx="value"`  

// -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'"`
`v-xxx="'string'"` 

// -- 传参数(`arg`),如`v-bind:class="className"`
`v-xxx:arg="value"` 

// -- 使用修饰符(`modifier`)
`v-xxx:arg.modifier="value"` 

二、如何实现

注册一个自定义指令有全局注册与局部注册

全局注册主要是通过Vue.directive方法进行注册

Vue.directive第一个参数是指令的名字(不需要写上v-前缀),第二个参数可以是对象数据,也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})

局部注册通过在组件options选项中设置directive属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property,如下:

<input v-focus />

自定义指令也像组件那样存在钩子函数:

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用

  • unbind:只调用一次,指令与元素解绑时调用

所有的钩子函数的参数都有以下:

  • el:指令所绑定的元素,可以用来直接操作 DOM
  • binding:一个对象,包含以下 property
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnodeVue 编译生成的虚拟节点
  • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行

举个例子:

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
    Vue.directive('demo', function (el, binding) {
    console.log(binding.value.color) // "white"
    console.log(binding.value.text)  // "hello!"
    })
</script>

三、应用场景

使用自定义指令可以满足我们日常一些场景,这里给出几个自定义指令的案例:

  • 表单防止重复提交
  • 图片懒加载
  • 一键 Copy的功能

表单防止重复提交

表单防止重复提交这种情况设置一个v-throttle自定义指令来实现

举个例子:

// 1.设置v-throttle自定义指令
Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 节流时间
    if (!throttleTime) { // 用户若不设置节流时间,则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>

图片懒加载

设置一个v-lazy自定义指令完成图片懒加载

const LazyLoad = {
    // install方法
    install(Vue,options){
    	  // 代替图片的loading图
        let defaultSrc = options.default;
        Vue.directive('lazy',{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc);
            },
            inserted(el){
                // 兼容处理
                if('IntersectionObserver' in window){
                    LazyLoad.observe(el);
                }else{
                    LazyLoad.listenerScroll(el);
                }
                
            },
        })
    },
    // 初始化
    init(el,val,def){
        // data-src 储存真实src
        el.setAttribute('data-src',val);
        // 设置src为loading图
        el.setAttribute('src',def);
    },
    // 利用IntersectionObserver监听el
    observe(el){
        let io = new IntersectionObserver(entries => {
            let realSrc = el.dataset.src;
            if(entries[0].isIntersecting){
                if(realSrc){
                    el.src = realSrc;
                    el.removeAttribute('data-src');
                }
            }
        });
        io.observe(el);
    },
    // 监听scroll事件
    listenerScroll(el){
        let handler = LazyLoad.throttle(LazyLoad.load,300);
        LazyLoad.load(el);
        window.addEventListener('scroll',() => {
            handler(el);
        });
    },
    // 加载真实图片
    load(el){
        let windowHeight = document.documentElement.clientHeight
        let elTop = el.getBoundingClientRect().top;
        let elBtm = el.getBoundingClientRect().bottom;
        let realSrc = el.dataset.src;
        if(elTop - windowHeight<0&&elBtm > 0){
            if(realSrc){
                el.src = realSrc;
                el.removeAttribute('data-src');
            }
        }
    },
    // 节流
    throttle(fn,delay){
        let timer; 
        let prevTime;
        return function(...args){
            let currTime = Date.now();
            let context = this;
            if(!prevTime) prevTime = currTime;
            clearTimeout(timer);
            
            if(currTime - prevTime > delay){
                prevTime = currTime;
                fn.apply(context,args);
                clearTimeout(timer);
                return;
            }

            timer = setTimeout(function(){
                prevTime = Date.now();
                timer = null;
                fn.apply(context,args);
            },delay);
        }
    }

}
export default LazyLoad;

一键 Copy的功能

import { Message } from 'ant-design-vue';

const vCopy = { //
  /*
    bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值,也就是我们要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
    el.handler = () => {
      if (!el.$value) {
      // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意
        Message.warning('无复制内容');
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('复制成功');
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件,就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候,移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};

export default vCopy;

关于自定义指令还有很多应用场景,如:拖拽指令、页面水印、权限校验等等应用场景

面试官VUE系列总进度:16/33

面试官:说说你对vue的理解?
面试官:说说你对双向绑定的理解?
面试官:说说你对SPA(单页应用)的理解?
面试官:v-show和v-if有什么区别?使用场景分别是什么?
面试官:Vue实例挂载的过程?
请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
面试官:为什么Vue中的v-if和v-for不建议一起用?
面试官:SPA(单页应用)首屏加载速度慢怎么解决?
面试官:为什么data属性是一个函数而不是一个对象?
面试官:Vue项目中有封装过axios吗?主要是封装哪方面的?
面试官:你了解axios的原理吗?有看过它的源码吗?
面试官:Vue组件之间的通信方式都有哪些?
面试官:Vue中组件和插件有什么区别?
面试官:Vue项目中你是如何解决跨域的呢?
面试官:动态给vue的data添加一个新的属性时会发生什么?怎样解决?
面试官:你了解vue的diff算法吗?说说看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2109600.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VMWARE VCENTER6.7 VCSA通过Web5480进行版本升级

VCENTER当前版本如下图 操作前先给VCENTER打一个快照&#xff0c;出问题可以立即回退 1、先下载VCSA镜像&#xff0c;并将VCSA镜像上传至DataStore中&#xff1b; 2、选中VCSA虚拟机&#xff0c;编辑配置 3、挂载新上传的VCSA镜像&#xff0c;一定要勾选“已连接”和“打开电源…

自定义string类

#include <iostream> #include <string> int main() { std::string str "Hello, World!"; // 使用 c_str() 将 std::string 转换为 C 风格字符串&#xff0c;并传递给 printf printf("The string is: %s\n", str.c_str()); // 尝试修改…

网络层 V(IPv6)【★★★★★★】

一、IPv6 的特点 IP 是互联网的核心协议。现在使用的 IP&#xff08;即 IPv4 ) 是在 20 世纪 70 年代末期设计的。互联网经过几十年的飞速发展&#xff0c;到 2011 年 2 月&#xff0c;IPv4 的地址已经耗尽&#xff0c; ISP 已经不能再申请到新的 IP 地址块了。我国在 2014 年…

全能与专精:探索未来AI模型的发展趋势与市场潜力

文章目录 每日一句正能量前言AI模型的全面评估和比较AI模型的专精化和可扩展性AI模型的合理使用和道德规范后记 每日一句正能量 一个人&#xff0c;如果没有经受过投资失败的痛楚&#xff0c;又怎么会看到绝望之后的海阔天空。很多时候&#xff0c;经历了人生中最艰难的事&…

告别繁琐切换,可道云teamOS让企业微信和钉钉无缝对接,爽到飞起

在当今快节奏的工作环境中&#xff0c;企业对于高效办公工具的需求日益增强。特别是企业微信和钉钉的普及&#xff0c;已成为许多企业日常沟通协作的基石。然而&#xff0c;传统企业网盘与这些平台的割裂&#xff0c;常常让工作流程变得繁琐。 幸运的是&#xff0c;teamOS的出…

vs2019编译opencv+contribute+gpu

1、提前准备 vs2019、opencv4.4.0、opencv-contribute4.4.0、CUDA Toolkit 11.8&#xff08;不能高于自己电脑的CUDA版本&#xff09;、CUDNN8.9.6 ps&#xff1a;先提前准备环境 1&#xff09;cmd中查看&#xff1a;nvidia-smi查看自己的显卡信息&#xff0c;不存在下述信息…

文本匹配任务(下)

文本匹配任务 1.文本匹配-深度学习1.1表示型1.1.1训练方式一1.1.2训练方式二&#xff08;Triplet Loss&#xff09; 1.2交互型1.3交互型和表示型对比 2.对比学习2.1图像中2.2NLP中 3.真实场景-海量向量查找3.1CD树3.1.1空间切割3.1.2Annoy 1.文本匹配-深度学习 简介&#xff1…

EasyExcel 文件导出 - 合并某些列值相同的行

文章目录 EasyExcel 文件导出 - 合并某些列值相同的行最终效果实现思路创建单元格合并的策略类使用 EasyExcel 文件导出 - 合并某些列值相同的行 在数据处理与文件导出的过程中&#xff0c;我们常常会遇到各种特定的需求。今天&#xff0c;我们就来探讨一下使用 EasyExcel 进行…

VsCode 联想路径配置

问题&#xff1a;举一个例子&#xff0c;引入文件 import store from ‘./store’&#xff0c;在输入 ./st 后会提示store。 配置路径别名后 webpack: {// 配置别名alias: {// 使用 表示 src 文件所在路径: path.resolve(__dirname, src)}}项目配置路径后输入 import store f…

JVM面试真题总结(一)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ Java主要是解释执行还是编译执行?请说明理由 Java既是解释执行的…

828华为云征文|部署私有云和文档管理系统 Kodcloud

828华为云征文&#xff5c;部署私有云和文档管理系统 Kodcloud 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 产品优势1.3 对比Flexus L实例和ECS 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Kodcloud3.1 Kodcloud 介绍3.2 Docker 环境…

Google数字车钥匙:引领汽车互动新纪元

在科技的浪潮中&#xff0c;Digital Car Key正以一种全新的姿态重塑我们与汽车的互动。告别传统的钥匙束缚&#xff0c;只需轻触手机应用&#xff0c;即可轻松掌控汽车。这一创新解决方案不仅大幅提升了安全性&#xff0c;更带来了前所未有的便捷&#xff0c;无论是城市通勤还是…

SSM校园兼职网站—计算机毕业设计源码25557

摘 要 当今人类社会已经进入信息全球化和全球信息化、网络化的高速发展阶段。丰富的网络信息已经成为人们工作、生活、学习中不可缺少的一部分。人们正在逐步适应和习惯于网上贸易、网上购物、网上支付、网上服务和网上娱乐等活动&#xff0c;人类的许多社会活动正在向网络化发…

Kafka【九】如何实现数据的幂等性操作

为了解决Kafka传输数据时&#xff0c;所产生的数据重复和乱序问题&#xff0c;Kafka引入了幂等性操作&#xff0c;所谓的幂等性&#xff0c;就是Producer同样的一条数据&#xff0c;无论向Kafka发送多少次&#xff0c;kafka都只会存储一条。注意&#xff0c;这里的同样的一条数…

C++ 在给定斜率的线上找到给定距离处的点(Find points at a given distance on a line of given slope)

给定二维点 p(x 0 , y 0 )的坐标。找到距离该点 L 的点&#xff0c;使得连接这些点所形成的线的斜率为M。 例子&#xff1a; 输入&#xff1a; p (2, 1) L sqrt(2) M 1 输出&#xff1a;3, 2 1, 0 解释&#xff1a; 与源的距离为 sqrt(2) &#x…

【C++二分查找】2594. 修车的最少时间

本文涉及的基础知识点 C二分查找 LeetCode2594. 修车的最少时间 给你一个整数数组 ranks &#xff0c;表示一些机械工的 能力值 。ranksi 是第 i 位机械工的能力值。能力值为 r 的机械工可以在 r * n2 分钟内修好 n 辆车。 同时给你一个整数 cars &#xff0c;表示总共需要修…

论文阅读笔记《面向集群协同的两点相对定位技术》

邓廷祥,任鹏,程甲,等.面向集群协同的两点相对定位技术[J].兵工学报,2023,44(S2):22-34. 摘要 无人机精确定位的三个难题&#xff1a; GNSS难以提供稳定准确的位置信息、难以部署辅助锚点、传统的相对定位方法大多存在节点数量限制。 本文针对上述问题&#xff0c;提出了一种GN…

Django 中的用户界面 - 创建速度计算器

在 Django 中创建一个用户界面来计算速度&#xff0c;可以通过以下步骤完成。这个速度计算器将允许用户输入距离和时间&#xff0c;计算并显示速度。 一、问题背景 一位 Django 新手希望使用 Django 构建一个用户界面&#xff0c;以便能够计算速度&#xff08;速度 距离/时间…

为什么 2!=false 和 2!=true 返回的都是true

前言 今天突然想起一个奇怪的问题&#xff0c;记录一下&#xff0c;我在控制台执行内容如下&#xff1a; 由上图可见&#xff0c;2 ! false 和 2 ! true 返回的值竟然都是true&#xff0c;那么为什么呢&#xff0c;请看下文&#xff1a; 1 ! 操作符的作用 ! 是“不等于”操作…

用了这个编程助手,“数学建模”真的太简单了~

目录 一、ChatGPT在数学建模中的价值1、学习和指导2、模型评估和改进3、算法设计和优化4、解释和文档生成 二、作为编程手如何正确使用ChatGPT1、阅读代码及优化代码2、执行脚本3、生成单测 三、编程手备战建模大赛的一些建议1、明确&#xff1a;如何去问一个问题2、程序设计能…