vue中的自定义指令

第1部分：引言

在Vue.js中，自定义指令提供了一种非常灵活的方式来扩展Vue的功能。它们允许开发者直接对DOM进行操作，响应数据变化，甚至与其他组件或库集成。

第2部分：Vue自定义指令概述

2.1 什么是Vue自定义指令

Vue自定义指令提供了一种强大的方法来扩展Vue的功能。它们允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。

2.2 自定义指令与内置指令的比较

Vue提供了一些内置指令，如v-model、v-if、v-for等，它们已经覆盖了很多常见的场景。然而，内置指令的功能是有限的，自定义指令则提供了更多的灵活性和控制力。以下是一些自定义指令可能用到的场景：

  • 动画和过渡：实现复杂的动画效果。
  • DOM操作：在不使用额外库的情况下，直接操作DOM。
  • 表单验证：创建自定义的表单验证逻辑。
  • 交互增强：如拖拽、点击反馈等。
2.3 自定义指令的生命周期钩子

自定义指令有以下几个钩子函数，它们在指令的不同阶段被调用：

  • bind：只调用一次，指令第一次绑定到元素时。
  • inserted：被绑定元素插入到父组件时调用。
  • update：所在组件的VNode更新时调用。
  • componentUpdated：组件的VNode及其子组件的VNode全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时。
2.4 钩子函数的参数

每个钩子函数都接收以下参数：

  • el：指令绑定的元素。
  • binding：一个对象，包含以下属性：
    • name：指令名，不包括v-前缀。
    • value：传递给指令的值。
    • oldValue：之前的值，仅在update和componentUpdated钩子中可用。
    • expression：绑定的表达式。
    • arg：传给指令的参数。
    • modifiers：一个包含修饰符的对象。
  • vnode：虚拟DOM节点。
  • oldVnode：上一个虚拟DOM节点，仅在update和componentUpdated钩子中可用。
2.5 示例：创建一个简单的自定义指令

下面是一个简单的自定义指令示例，用于在元素上添加点击时的动画效果：

// 注册一个全局自定义指令 `v-click-animate` 
Vue.directive('click-animate', {
  bind(el, binding) {
    // 定义点击时的动画效果
    el.animateClick = () => {
      el.classList.add('click');
      setTimeout(() => {
        el.classList.remove('click');
      }, 100);
    };
  },
  handleEvent(event) {
    if (event.type === 'click') {
      el.animateClick();
    }
  }
});

然后在模板中使用：

<button v-click-animate>Click me!</button>
2.6 示例：动态指令参数

自定义指令还可以接受动态参数，这允许你根据不同的情况应用不同的行为：

Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted(el, binding) {
    // 聚焦元素
    if (binding.value) {
      el.focus();
    }
  }
});

在模板中使用：

<input v-focus="true">
2.7 示例：响应式指令参数

自定义指令的参数也可以是响应式的，这意味着当参数的值变化时，指令的行为也会相应变化：

Vue.directive('my-directive', {
  bind(el, binding) {
    el.textContent = binding.value;
  },
  update(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.textContent = binding.value;
    }
  }
});

在模板中使用：

<div v-my-directive="dynamicValue"></div>

第3部分：创建第一个自定义指令

3.1 理解自定义指令的基础

在深入创建自定义指令之前，我们需要理解自定义指令的基本概念。自定义指令允许你直接对元素进行操作，并且可以响应Vue的数据变化。

3.2 步骤一：定义指令

创建自定义指令的第一步是在Vue实例中定义它。你可以通过Vue.directive()方法定义一个全局指令，或者在组件中使用directives选项定义局部指令。

// 定义一个全局自定义指令 'v-focus'
Vue.directive('v-focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});
3.3 步骤二：使用指令

在你的Vue模板中，你可以直接使用这个指令。

<input v-focus>

这个指令会在元素插入DOM时自动聚焦。

3.4 示例：响应式指令

自定义指令可以是响应式的，这意味着它们可以响应数据的变化。

Vue.directive('color-change', {
  bind(el, binding) {
    el.style.color = binding.value;
  },
  update(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.style.color = binding.value;
    }
  }
});

在模板中使用：

<div v-color-change="'red'">This text will be red.</div>
3.5 示例：带参数的指令

自定义指令可以接受参数，这允许你为指令提供更多的灵活性。

Vue.directive('highlight', {
  bind(el, binding) {
    el.style.backgroundColor = binding.arg;
  }
});

在模板中使用：

<div v-highlight:yellow>Highlight me yellow!</div>
3.6 示例：使用修饰符

自定义指令可以与修饰符一起使用，以提供额外的行为。

Vue.directive('drag', {
  bind(el, binding) {
    el.setAttribute('draggable', binding.modifiers.disabled ? false : true);
  }
});

在模板中使用：

<div v-drag.disabled>Drag me if you can!</div>
3.7 示例：指令的组合使用

自定义指令可以组合使用，以实现更复杂的功能。

Vue.directive('shake', {
  bind(el) {
    el.style.position = 'relative';
  },
  handleEvent(event) {
    if (event.type === 'click') {
      this.animateShake(el);
    }
  },
  animateShake(el) {
    // 定义动画逻辑
  }
});

Vue.directive('repeat-click', {
  bind(el, binding) {
    let clickCount = 0;
    const maxCount = binding.value || 3;

    el.addEventListener('click', () => {
      clickCount++;
      if (clickCount === maxCount) {
        // 执行某些操作
      }
    });
  }
});

在模板中使用：

<div v-shake v-repeat-click="3">Click me three times!</div>
3.8 示例：指令的解绑

自定义指令的unbind钩子可以用来清理你绑定到元素上的任何事件监听器或其他资源。

Vue.directive('infinite-scroll', {
  bind(el, binding) {
    const scrollHandler = () => {
      // 滚动到底部时执行的操作
    };
    el.addEventListener('scroll', scrollHandler);
  },
  unbind(el) {
    el.removeEventListener('scroll', scrollHandler);
  }
});

在模板中使用：

<div v-infinite-scroll>
  <!-- 滚动内容 -->
</div>
3.9 综合示例：创建一个自定义指令来实现输入框的自动完成功能

这个示例展示了如何创建一个更复杂的自定义指令，它将监听用户的输入，并提供自动完成的建议。

Vue.directive('auto-complete', {
  bind(el, binding) {
    const data = binding.value;
    el.addEventListener('input', (e) => {
      const inputValue = e.target.value;
      // 根据输入值提供建议
    });
  }
});

在模板中使用：

<input v-auto-complete="suggestions" placeholder="Type to search...">

第4部分：深入自定义指令

4.1 指令的深入理解

自定义指令提供了一种强大的方式来扩展Vue的功能。在这一节中，我们将深入探讨自定义指令的高级用法，包括如何访问组件实例、如何与组件的生命周期同步，以及如何实现复杂的逻辑。

4.2 访问组件实例

自定义指令可以通过钩子函数的参数访问组件实例，这允许指令与组件的内部状态和方法交互。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    const componentInstance = vnode.context;
    // 使用组件实例的方法或数据
  }
});
4.3 与组件生命周期同步

自定义指令可以通过监听组件的生命周期钩子来同步自己的行为。

Vue.directive('my-directive', {
  inserted(el, binding, vnode) {
    vnode.context.$on('hook:beforeDestroy', () => {
      // 组件销毁前执行的操作
    });
  }
});
4.4 示例：动态类名绑定

创建一个指令，根据组件的状态动态添加或移除类名。

Vue.directive('class-toggle', {
  bind(el, binding) {
    if (binding.value) {
      el.classList.add(...binding.arg);
    }
  },
  componentUpdated(el, binding) {
    if (binding.value) {
      el.classList.add(...binding.arg);
    } else {
      el.classList.remove(...binding.arg);
    }
  }
});

在模板中使用：

<div v-class-toggle="isActive: 'active-class'">Toggle class based on isActive</div>
4.5 示例：自定义指令的依赖注入

自定义指令可以使用inject选项来声明依赖，Vue会自动解析并注入这些依赖。

Vue.directive('my-directive', {
  inject: ['someDependency'],
  bind(el, binding, vnode) {
    // 使用注入的依赖
  }
});
4.6 示例：指令的异步操作

自定义指令可以执行异步操作，并在操作完成后更新DOM。

Vue.directive('fetch-data', {
  bind(el, binding) {
    fetchData(binding.value).then(data => {
      el.textContent = data;
    });
  }
});

在模板中使用：

<div v-fetch-data="apiUrl">Fetching data...</div>
4.7 示例：指令的vnode操作

自定义指令可以操作vnode，以实现更复杂的DOM操作。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // vnode是当前组件的虚拟DOM节点
    const child = vnode.elm.children[0];
    // 对child进行操作
  }
});
4.8 示例：指令与组件的通信

自定义指令可以作为组件之间的通信桥梁。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$emit('custom-event', binding.value);
  }
});

在父组件中使用：

<child-component v-my-directive="dataToPass"></child-component>
4.9 示例：指令的错误处理

自定义指令应该能够处理错误，并在发生错误时提供反馈。

Vue.directive('my-directive', {
  bind(el, binding) {
    try {
      // 尝试执行的操作
    } catch (e) {
      console.error('An error occurred:', e);
    }
  }
});
4.10 示例：指令的性能优化

自定义指令可以通过避免不必要的DOM操作来优化性能。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.__skip = true; // 标记元素以跳过某些操作
  },
  update(el, binding) {
    if (!el.__skip) {
      // 执行更新操作
    }
  },
  unbind(el) {
    delete el.__skip; // 清理标记
  }
});
4.11 示例：指令的组件作用域样式

自定义指令可以应用组件作用域的样式。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$nextTick(() => {
      const style = document.createElement('style');
      style.textContent = `.${binding.arg} { /* 样式规则 */ }`;
      document.head.appendChild(style);
    });
  }
});

在模板中使用：

<div v-my-directive="'unique-class-name'">Styled content</div>
4.12 综合示例：创建一个自定义指令来实现拖拽功能

这个示例展示了如何创建一个复杂的自定义指令，它允许用户拖拽DOM元素。

Vue.directive('draggable', {
  bind(el, binding) {
    let currentX, currentY, initialX, initialY, xOffset, yOffset;

    const mouseDownHandler = (e) => {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
      currentX = initialX;
      currentY = initialY;
      el.classList.add('dragging');
      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = (e) => {
      e.preventDefault();
      xOffset = currentX - e.clientX;
      yOffset = currentY - e.clientY;
      currentX = e.clientX - xOffset;
      currentY = e.clientY - yOffset;
      el.style.top = currentY + 'px';
      el.style.left = currentX + 'px';
    };

    const mouseUpHandler = () => {
      el.classList.remove('dragging');
      document.removeEventListener('mousemove', mouseMoveHandler);
      document.removeEventListener('mouseup', mouseUpHandler);
    };

    el.addEventListener('mousedown', mouseDownHandler);
  },
  unbind(el) {
    el.removeEventListener('mousedown', mouseDownHandler);
  }
});

在模板中使用：

<div v-draggable style="position: absolute;">Drag me</div>

第5部分：高级技巧

5.1 指令的高级应用场景

自定义指令不仅限于简单的DOM操作，它们可以用于实现复杂的交互和动画，甚至可以与第三方库集成，以提供额外的功能。

5.2 示例：集成第三方动画库

使用自定义指令集成动画库，比如Animate.css，来增强Vue组件的交互性。

Vue.directive('animate', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      el.classList.add('animated', binding.value);
      setTimeout(() => {
        el.classList.remove('animated', binding.value);
      }, 1000);
    });
  }
});

在模板中使用：

<button v-animate="'bounce'">Click me for bounce animation!</button>
5.3 示例：指令的依赖注入

自定义指令可以通过inject选项来注入Vue实例的属性或方法，实现依赖注入。

Vue.directive('my-directive', {
  inject: ['someComponentMethod'],
  bind(el, binding) {
    this.someComponentMethod();
  }
});
5.4 示例：指令的动态绑定

自定义指令可以响应动态绑定的变化，实现更复杂的逻辑。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.textContent = `Initial value: ${binding.value}`;
  },
  componentUpdated(el, binding) {
    if (binding.value !== binding.oldValue) {
      el.textContent = `Updated value: ${binding.value}`;
    }
  }
});

在模板中使用：

<div v-my-directive="dynamicValue">Dynamic content</div>
5.5 示例：指令的异步更新

自定义指令可以执行异步操作，并在操作完成后更新元素。

Vue.directive('my-directive', {
  bind(el, binding) {
    fetchData(binding.value).then(data => {
      el.textContent = data;
    });
  }
});
5.6 示例：指令的DOM事件监听

自定义指令可以添加事件监听器，并在适当的时候进行处理。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.addEventListener('mouseenter', () => {
      // 处理鼠标进入事件
    });
  },
  unbind(el) {
    el.removeEventListener('mouseenter', /* 事件处理函数 */);
  }
});
5.7 示例：指令的CSS变量应用

自定义指令可以设置CSS变量，以实现动态样式。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.style.setProperty('--my-color', binding.value);
  }
});

在模板中使用：

<div v-my-directive="'#ff0000'" style="--color: var(--my-color);">Styled with CSS variable</div>
5.8 示例：指令的组件通信

自定义指令可以作为父子组件或兄弟组件之间的通信桥梁。

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    vnode.context.$emit('custom-event', binding.value);
  }
});
5.9 示例：指令的滚动监听

自定义指令可以监听滚动事件，并在滚动到特定位置时执行操作。

Vue.directive('scroll-to', {
  bind(el, binding) {
    window.addEventListener('scroll', () => {
      if (window.scrollY >= el.offsetTop) {
        el.classList.add('highlight');
      }
    });
  }
});

在模板中使用：

<div v-scroll-to style="height: 500px;">Scroll to highlight me</div>
5.10 示例：指令的触摸事件支持

自定义指令可以添加对触摸事件的支持，以改善移动设备上的用户体验。

Vue.directive('my-directive', {
  bind(el, binding) {
    el.addEventListener('touchstart', () => {
      // 处理触摸开始事件
    });
  }
});
5.11 示例：指令的性能优化

自定义指令可以通过避免不必要的计算和DOM操作来优化性能。

Vue.directive('my-directive', {
  bind(el, binding) {
    const update = () => {
      // 执行更新操作
    };
    requestAnimationFrame(update);
  },
  unbind(el) {
    // 清理工作
  }
});
5.12 综合示例：创建一个自定义指令来实现复杂的表单验证

这个示例展示了如何创建一个复杂的自定义指令，它实现了表单字段的实时验证，并提供视觉反馈。

Vue.directive('form-validate', {
  bind(el, binding) {
    el.addEventListener('input', () => {
      const isValid = validateField(el.value, binding.value);
      el.classList.toggle('invalid', !isValid);
    });
  }
});

在模板中使用：

<input v-form-validate="ruleSet" placeholder="Enter valid data">

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【C语言】解决C语言报错：Format String Vulnerability

【C语言】解决C语言报错：Format String Vulnerability

文章目录 简介什么是Format String VulnerabilityFormat String Vulnerability的常见原因如何检测和调试Format String Vulnerability解决Format String Vulnerability的最佳实践详细实例解析示例1&#xff1a;直接使用不受信任的输入作为格式化字符串示例2&#xff1a;未验证格…
阅读更多...
英伟达开源最强通用模型Nemotron-4 340B：开启AI合成数据新纪元

英伟达开源最强通用模型Nemotron-4 340B：开启AI合成数据新纪元

【震撼发布】 英伟达最新力作——Nemotron-4 340B，一个拥有3400亿参数的超级通用模型，震撼登场！这不仅是技术的一大飞跃，更是AI领域的一次革命性突破！ 【性能卓越】 Nemotron-4 340B以其卓越的性能超越了Llama-3，专为合成数据而生。它将为医疗健康、金融、制造、零售等行…
阅读更多...
基于WPF技术的换热站智能监控系统09--封装水泵对象

基于WPF技术的换热站智能监控系统09--封装水泵对象

1、添加用户控件 2、编写水泵UI 控件中用到了Viewbox控件&#xff0c;Viewbox控件是WPF中一个简单的缩放工具&#xff0c;它可以帮助你放大或缩小单个元素&#xff0c;同时保持其宽高比。通过样式和属性设置&#xff0c;你可以创建出既美观又功能丰富的用户界面。在实际开发中…
阅读更多...
RabbitMQ揭秘：轻量级消息队列的优缺点全解析

RabbitMQ揭秘：轻量级消息队列的优缺点全解析

我是小米，一个喜欢分享技术的29岁程序员。如果你喜欢我的文章，欢迎关注我的微信公众号“软件求生”，获取更多技术干货！ 亲爱的读者朋友们，大家好！我是小米，一个热爱技术、喜欢分享的大哥哥。今天我们来聊聊一个在消息队列领域非常重要的工具——RabbitMQ。作为一个在通信…
阅读更多...
EasyExcel文件导出，出现有文件但没有数据的问题

EasyExcel文件导出，出现有文件但没有数据的问题

一开始由于JDK版本过高&#xff0c;我用的17&#xff0c;一直excel没有数据&#xff0c;表头也没有&#xff0c;后来摸索了好久&#xff0c;找了资料也没有&#xff0c;后来改了代码后报了一个错误&#xff08;com.alibaba.excel.exception.ExcelGenerateException: java.lang.…
阅读更多...
如何让视频有高级感 高级感视频制作方法 高级感视频怎么剪 会声会影视频剪辑制作教程 会声会影中文免费下载

如何让视频有高级感 高级感视频制作方法 高级感视频怎么剪 会声会影视频剪辑制作教程 会声会影中文免费下载

高质量视频通常具有清晰的画面、优质的音频和令人印象深刻的视觉效果。这篇文章来了解如何让视频有高级感&#xff0c;高级感视频制作方法。 一、如何让视频有高级感 要让视频有高级感&#xff0c;要注意以下几个要点&#xff1a; 1、剧本和故事性&#xff1a;一个好的剧本和…
阅读更多...
Vue主要使用-03

Vue主要使用-03

组件通讯 组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件&#xff1f;父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 …
阅读更多...
001 Spring介绍

001 Spring介绍

文章目录 特点1.方便解耦&#xff0c;简化开发2.AOP编程的支持3.声明式事务的支持4.方便程序的测试5.方便集成各种优秀框架6.降低Java EE API的使用难度7.Java源码是经典学习范例 好处什么是耦合和内聚耦合性&#xff0c;也叫耦合度&#xff0c;是对模块间关联程度的度量内聚标…
阅读更多...
如何学习VBA_3.3.3：VBA对于工作簿、工作表的一般操作

如何学习VBA_3.3.3：VBA对于工作簿、工作表的一般操作

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的劳动效率&#xff0c;而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册&#xff0c;现在已经全部完成&#xff0c;希望大家利用、学习。 如果…
阅读更多...
嵌入式微处理器重点学习（三）

嵌入式微处理器重点学习（三）

堆栈操作 R1=0x005 R3=0x004 SP=0x80014 STMFD sp!, {r1, r3} 指令STMFD sp!, {r1, r3}是一条ARM架构中的存储多个寄存器到内存的指令，这里用于将r1和r3寄存器的内容存储到栈上。STMFD（Store Multiple Full Descending）是一种全递减模式的多寄存器存储指令，它会先将栈指针…
阅读更多...
【MATLAB】语法

【MATLAB】语法

MATLAB 基本语法(%{和%}) 赋值 函数名值&#xff1b;for for i1:10循环语句 end//while x0; sum0; while x<100sumsumx;x; end//if if x > 1f x^2 1; elsef 2 * x endswitch onum input(请输入一个数); switch num case -1 //注意case后面没有冒号disp(I am…
阅读更多...
大数据与人工智能在保险行业数字化转型中的应用

大数据与人工智能在保险行业数字化转型中的应用

随着科技的快速发展&#xff0c;大数据和人工智能&#xff08;AI&#xff09;技术在保险行业中扮演着越来越重要的角色&#xff0c;推动了保险行业的数字化转型。通过收集和分析海量的用户数据&#xff0c;利用先进的人工智能算法&#xff0c;保险公司能够更准确地评估风险&…
阅读更多...
7z压缩文件解压缩遇到文件末端错误

7z压缩文件解压缩遇到文件末端错误

错误如上。我是之前使用7zip压缩软件压缩本地视频为7z格式&#xff0c;然后将压缩包上传到阿里云盘。今天通过阿里云盘下载这个文件&#xff0c;结果使用7zip解压压缩软件 解压缩这个文件遇到“文件末端错误”&#xff0c;然后在网上找了一圈也没有找到解决办法。 我用winrar解…
阅读更多...
window11 系统更新失败处理办法

window11 系统更新失败处理办法

方法一&#xff1a;运行 Windows 更新疑难解答 按 Win I 打开设置。选择“系统”。选择“疑难解答”&#xff0c;然后点击“其他疑难解答”。找到“Windows 更新”&#xff0c;并运行疑难解答。 方法二&#xff1a;使用 DISM 工具修复系统文件 在开始菜单中搜索“命令提示符…
阅读更多...
Perplexity AI — 探索网络,发掘知识,沟通思想

Perplexity AI — 探索网络,发掘知识,沟通思想

体验地址&#xff1a;Perplexity AI &#xff08;国外网站访问需要梯子&#xff09; Perplexity AI是一款功能强大的人工智能搜索引擎&#xff0c;其特点和优势主要体现在以下几个方面&#xff1a; 功能&#xff1a; 自然语言搜索&#xff1a;Perplexity AI可以理解用户的自然…
阅读更多...
【AI实践】Dify调用本地和在线模型服务

【AI实践】Dify调用本地和在线模型服务

背景 Ollama可以本地部署模型&#xff0c;如何集成私有数据、如何外部应用程序对接&#xff0c;因此需要有一个应用开发框架 Dify功能介绍 欢迎使用 Dify | 中文 | Dify 下文将把dify部署在PC上&#xff0c;windows环境&#xff1b; 安装部署 安装dify及docker jacobJacobs…
阅读更多...
Jira，一个强大灵活的项目和任务管理工具 Python 库

Jira，一个强大灵活的项目和任务管理工具 Python 库

目录 01初识 Jira 为什么选择 Jira？ 02安装与配置 安装 jira 库 配置 Jira 访问 获取 API token： 配置 Python 环境： 03基本操作 创建项目 创建任务 查询任务 更新任务 删除任务 04高级操作 处理子任务 搜索任务 添加附件 评论任务 05实战案例 自动化创建…
阅读更多...
消息队列-概述-JMS和AMQP

消息队列-概述-JMS和AMQP

JMS和AMQP JMS是什么 JMS&#xff08;JAVA Message Service,java 消息服务&#xff09;是 Java 的消息服务&#xff0c;JMS 的客户端之间可以通过 JMS 服务进行异步的消息传输。JMS&#xff08;JAVA Message Service&#xff0c;Java 消息服务&#xff09;API 是一个消息服务…
阅读更多...
消息队列-概述-什么是消息队列

消息队列-概述-什么是消息队列

什么是消息队列 我们可以把消息队列看作是一个存放消息的容器&#xff0c;当我们需要使用消息的时候&#xff0c;直接从容器中取出消息供自己使用即可。由于队列 Queue 是一种先进先出的数据结构&#xff0c;所以消费消息时也是按照顺序来消费的。 参与消息传递的双方称为 生产…
阅读更多...
emoji_call_read

emoji_call_read

这道题我觉得可以记录一下。 主要函数&#xff0c;一样&#xff0c;先考虑怎么泄露libc基址。 但&#xff0c;0x20实在太小&#xff0c;组成不了连续3个ret syscall。 而且文件中也没pop rdi;ret这个gadget&#xff0c;只能另寻他法。 我们注意到&#xff1a; main函数中的这…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站