当前位置：首页 > news >正文

前端基础之《Vue（12）—插件封装》

news 来源：原创 2025/6/23 13:16:51

一、插件封装

1、在Vue生态中，除了Vue本身，其它所有的与Vue相关的第三方包，都是插件
例子：

import VueRouter form 'vue-router'
Vue.use(VueRouter) // 注册插件

2、如何封装Vue插件
（1）第一种写法
const Plugin = { install (Vue) { //do something} }
（2）第二种写法
const Plugin = function (Vue) {}

3、如何使用插件
Vue.use(Plugin)
调用插件上的install方法，并传入Vue实参。

4、插件的作用
插件是一种更加高级的代码复用技术，可以以插件的方式为我们提供可复用的组件、混入、指令、过滤器、原型链API等等。

二、例子代码

<html>
<head><title>插件封装</title><style></style>
</head>
<body><div id="app"><my-button></my-button><h1>{{ "99.1" | rmb }}</h1><h1 v-color='"red"'>测试</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const MyPlugin = {install: function(Vue) {// 插件中可以全局混入Vue.mixin({data() {return {version: 'v2'}}})// 插件中可以定义全局组件Vue.component('my-button', {template: `<div>我的按钮</div>`})// 插件中可以定义全局过滤器Vue.filter('rmb', val=>('¥'+val))// 插件中可以定义全局指令Vue.directive('color', function(el,binding){el.style.color = binding.value})// 插件中可以操作Vue的原型链Vue.prototype.$ajax = function(url,method,data) {console.log('---调接口')}}}Vue.use(MyPlugin)const app = new Vue({mounted() {console.log('---version', this.version)console.log('---$ajax', this.$ajax)}})app.$mount('#app')</script></body>
</html>

前端基础之《Vue（12）—插件封装》

一、插件封装 1、在Vue生态中，除了Vue本身，其它所有的与Vue相关的第三方包，都是插件例子： import VueRouter form vue-router Vue.use(VueRouter) // 注册插件 2、如何封装Vue插件 （1）第一种写法 const…...

编程日记 2025/6/23 13:16:51

arcpy列表函数的应用(2)

arcpy.ListRasters() 该函数用于列出指定工作空间中的所有栅格数据集。语法： python arcpy.ListRasters(wild_cardNone, raster_typeNone)• wild_card：用于筛选栅格数据集名称的通配符。 • raster_type：用于筛选栅格数据集的类型&…...

编程日记 2025/6/23 11:13:48

智能电网第7期 | 断网不断控：电力监控网络高可靠通信解决方案

随着智能电网建设加速推进，电力监控系统的可靠性已成为保障电网安全运行的核心要素。在变电站、配电房等关键场景中，网络中断可能导致监控失效、故障扩大等严重后果。当前电力通信网络面临的主要挑战包括： 网络脆弱性：单一链路故障…...

编程日记 2025/6/23 13:03:14

Nacos简介—2.Nacos的原理简介

大纲 1.Nacos集群模式的数据写入存储与读取问题 2.基于Distro协议在启动后的运行规则 3.基于Distro协议在处理服务实例注册时的写路由 4.由于写路由造成的数据分片以及随机读问题 5.写路由数据分区读路由的CP方案分析 6.基于Distro协议的定时同步机制 7.基于Distro协…...

编程日记 2025/6/22 20:19:10

offset voltage of Comparator

静态失调电压（static offset voltage） 主要影响因素：μCox(载流子传输速率和栅氧层电容的的乘积)、阈值电压。静态失配方差与器件尺寸成反比，可以增大关键对mos管的尺寸动态失调电压（dynamic offset voltage&…...

编程日记 2025/6/23 10:10:07

Spring-Ai-McpSever从外到内

MCP是什么 Model Context Protocol (MCP) 是一个开放协议，它使 LLM 应用与外部数据源和工具之间的无缝集成成为可能。无论你是构建 AI 驱动的 IDE、改善 chat 交互，还是构建自定义的 AI 工作流，MCP 提供了一种标准化的方式，将 LL…...

编程日记 2025/6/23 11:24:48

第一种方法 config.ts文件配置多条代理服务端口如下所示:proxy: {/app: {// 其他的端口target: http://125.124.5.117:12877/,changeOrigin: true}/api: {//默认的端口// http://192.168.31.53:5173/target: http://192.168.31.199:18777/,changeOrigin: true,rewrite: pat…...

编程日记 2025/6/22 22:46:23

Android APP 热修复原理

版权归作者所有，如有转发，请注明文章出处：https://cyrus-studio.github.io/blog/ dexElements Android 的 ClassLoader（如 PathClassLoader、DexClassLoader）内部结构如下： BaseDexClassLoader└── pat…...

编程日记 2025/6/22 21:13:13

一些有关ffmpeg 使用（1）

1 解封装流程 1.1 什么解封装封装的逆向操作：封装是把音频流、视频流、字幕流等不同成分按一定规则组合成视频文件（如 MP4、FLV ），复用器负责此过程。解封装则相反，是用解复用器（针对 MP4、FLV 等格式有…...

编程日记 2025/6/23 12:06:29

Postman-win64-7.2.2 安装教程（Windows 64位详细步骤）

1. 下载安装包 Postman-win64-7.2.2-Setup.exe下载链接：https://pan.quark.cn/s/6b48480d95d5 2. 运行安装程序双击下载的 .exe 文件，启动安装向导。若系统提示权限确认，点击 “是” 允许安装。 3. 安装向导设置选择安装选项&#xff0…...

编程日记 2025/6/23 11:23:38

C语言实现贪心算法

一、贪心算法核心思想特征：在每一步选择中都采取当前状态下最优（局部最优）的选择，从而希望导致全局最优解适用场景：需要满足贪心选择性质和最优子结构性质二、经典贪心算法示例 1. 活动选择问题目标&#xff1a…...

编程日记 2025/6/23 12:06:29

Linux 服务如何使用 curl 利用 HTTP Get 请求传入 SQL 语句修改数据库表内容和结构

本文是博主在部署项目时发现的一个小技巧，项目部署在 Linux 虚拟机上，数据库被设置了写权限，作为开发只能使用程序对数据库做增删改查，但是在开发测试阶段会出现很多问题，权限的问题大大降低了开发效率，所以…...

编程日记 2025/6/23 12:36:42

Java对象转换的多种实现方式

Java对象转换的多种实现方式在Java开发中，对象转换是一个常见的需求。特别是在不同层次间传递数据时，通常需要将一个对象转换为另一个对象。虽然JSON序列化/反序列化是一种常见的方法，但在某些场景下可能并不是最佳选择。本文将总结几种常见…...

编程日记 2025/6/23 11:05:38

详解 LeetCode 第 242 题 - 有效的字母组

目录题目描述解题思路代码分析步骤说明图解原理优势分析小结码题目：LeetCode 242. 有效的字母组题目描述给定两个字符串 s 和 t，请判断是否为字母组（Anagram）。如果 t 是通过打乱 s 的字符并重新排列所得到的…...

编程日记 2025/6/23 13:08:26

【滑动窗口+哈希表/数组记录】Leetcode 3. 无重复字符的最长子串

题目要求给定一个字符串 s，找出其中不含有重复字符的最长子串的长度。子字符串是字符串中连续非空字符序列。示例 1 输入：s "abcabcbb" 输出：3 解释：无重复字符的最长子串是 "abc"，长度为…...

编程日记 2025/6/23 13:07:05

springmvc-拦截器

目录一，拦截器的职责二，拦截器的应用场景三，拦截器的工作原理拦截器在Spring MVC请求处理流程中的位置： 四，使用拦截器一 ，编写拦截类，实现HandlerInterceptor接口，重写方…...

编程日记 2025/6/23 12:03:42

【Agent】LangManus深度解析：AI自动化框架的对比与langgraph原理

LangManus深度解析：AI自动化框架的技术演进与实践本文将带你深入探索LangManus这一AI自动化框架的核心技术与其基于langgraph的实现原理，并与OpenManus进行全面对比，助你掌握多智能体系统的前沿技术。本文3万字，没有时间的话可以…...

编程日记 2025/6/23 12:32:43

【FreeRTOS】事件标志组

文章目录 1 简介1.1事件标志1.2事件组 2事件标志组API2.1创建动态创建静态创建 2.2 删除事件标志组2.3 等待事件标志位2.4 设置事件标志位在任务中在中断中 2.5 清除事件标志位在任务中在中断中 2.6 获取事件组中的事件标志位在任务中在中断中 2.7 函数xEventGroupSync 3 事件标…...

编程日记 2025/6/23 13:03:14

如何通过电路测量运放的增益带宽积（GBP）和压摆率（SR）

一、增益带宽积（GBP）的测量定义：增益带宽积是运算放大器的开环增益下降到直流增益的 （即 - 3dB）时对应的频率与该频率下增益的乘积，数学表达式为： 其中 A0 是直流开环增益，f0…...

编程日记 2025/6/23 12:53:38

SAP接口超时：对 FOR ALL ENTRIES IN 的优化

SAP接口超时经分析要10多分钟以上才出结果，且是这个语句耗时较长： SELECTaufnrmatnrbdmnglgortmeinschargFROM resbINTO CORRESPONDING FIELDS OF TABLE lt_lylcddxhFOR ALL ENTRIES IN lt_lylcddWHERE aufnr IN r_aufnr发现RESB有420万条记录&#xf…...

编程日记 2025/6/23 12:25:00

ElementUi的Dropdown下拉菜单的详细介绍及使用

Dropdown是 ElementUI 中用于创建下拉菜单项的一个组件，通常el-dropdown-item 包裹在 el-dropdown 组件中使用。以下从功能特性(一些属性及方法)、使用和高级功能(高亮显示，滚动，额外传参数)三个方面进行详细介绍。一、功能特性 1.触发方式…...

编程日记 2025/6/23 12:03:42

C++类模板编程练习（从基础到进阶）

一、基础模板类设计泛型盒子（Box） 实现一个 Box 类模板，存储任意类型的值，并提供获取/修改方法。 Box<int> intBox(42); cout << intBox.get(); // 输出 42 intBox.set(100);类型转换器（Converter&…...

编程日记 2025/6/23 12:20:58

基于物联网的智能家居安全防护系统设计

资料下载地址：基于物联网的智能家居安全防护系统仿真（仿真代码） 目录一、功能介绍二、仿真图三、程序一、功能介绍 1.单片机和app、OneNet云平台通过wifi进行通信 2.马达模拟家里的用电设备，可通过按键开关 3.可检测用电量…...

编程日记 2025/6/22 12:09:38

android jatpack Compose 多数据源依赖处理：从状态管理到精准更新的架构设计

Android Compose 多接口数据依赖管理：ViewModel 状态共享最佳实践 📌 问题背景在 Jetpack Compose 开发中，经常遇到以下场景： 页面由多个独立接口数据组成（如 Part1、Part2）Part2 的某些 UI 需要依赖 P…...

编程日记 2025/6/23 11:48:46

非序列实现MEMS聚焦功能

zemax非序列模式下有MEMS，但是没有对应的代码。无法修改成自己需要的功能以下是实现MEMS聚焦功能： #include <windows.h> #include <cmath> #include <stdio.h> #include <string.h> #include <algorithm> #undef max #undef min#define D…...

编程日记 2025/6/23 12:55:58

基于Java，SpringBoot，Vue，HTML宠物相亲配对婚恋系统设计

摘要基于Java、SpringBoot、Vue和HTML的宠物相亲配对系统设计旨在为宠物主人打造一个高效、智能的宠物社交与配对平台。系统采用前后端分离架构，前端基于Vue.js框架结合HTML/CSS/JavaScript构建动态交互界面，实现宠物信息展示、用户社交互动等功能&…...

编程日记 2025/6/23 13:16:50

AI大模型学习十二：‌尝鲜ubuntu 25.04 桌面版私有化sealos cloud + devbox+minio对象存储测试和漫长修改之路

一、说明前面已经安装完成，这里我们测试对象存储 AI大模型学习十一：‌尝鲜ubuntu 25.04 桌面版私有化sealos cloud devboxminio，实战运行成功-CSDN博客https://blog.csdn.net/jiangkp/article/details/147424823?spm1011.2415.3001.5331 二…...

编程日记 2025/6/23 11:45:30

身份与访问管理（IAM）：零信任架构下的认证授权技术与实战

身份与访问管理（IAM）：零信任架构下的认证授权技术与实战在网络安全防御体系中，身份与访问管理（Identity and Access Management, IAM）是守护数字资产的“数字门禁系统”。随着远程办公和多云架构的普及&a…...

编程日记 2025/6/23 12:35:14

潮了低配电脑6G显存生成60秒AI视频本地部署/一键包/云算力部署/批量生成

最近发现了一个让人眼前一亮的工具——FramePack，它能用一块普通的6GB显存笔记本GPU，生成60秒电影级的高清视频画面，效果堪称炸裂！那么我们就把他本地部署起来玩一玩、下载离线一键整合包，或者是用云算力快速上手。接下…...

编程日记 2025/6/23 11:38:10

高防IP+CDN组合：电商大促的“双保险”防护方案

引言电商大促期间，平台流量呈爆发式增长，既要应对瞬时激增的访问量，又要防范黑客趁机发起的DDoS攻击、恶意爬虫等威胁。单一防护手段往往难以兼顾性能与安全，而高防IPCDN组合通过“流量清洗加速分发”的双重机制，为电…...

编程日记 2025/6/23 13:13:01

“IAmMusicFont.com“：将音乐变成视觉

很高兴向大家介绍——IAmMusicFont.com，这是一个专为音乐爱好者和设计师打造的在线字体生成器，灵感源自Playboi Carti 2025年专辑《MUSIC》（又称"I Am Music"）的标志性封面设计。什么是"I am music font"&a…...

编程日记 2025/6/22 22:13:17

C++入门（下）

本文为个人学习笔记，如有错误欢迎批评指正，如有侵权，请联系删除。今日名言： 好运只是个副产品，只有当你不带任何私心杂念，单纯的去做事情时，他才会降临。上一篇文章我们讲了C入门的一部分内容…...

编程日记 2025/6/23 0:11:38

ubuntu22.04 命令行修改静态ip

传统interfaces文件配置（适用于旧版）即便我们已经在桌面上配置了固定ip 这里也可以修改 ‌编辑配置文件‌ 修改/etc/network/interfaces（需安装net-tools）： # interfaces(5) file used by ifup(8) and ifdown(8) # In…...

编程日记 2025/6/23 11:55:36

Ubuntu18.04配置C++环境和Qt环境

Ubuntu18.04配置C环境和Qt环境 1、前言3.2 安装其他库3.3 查看有没有安装成功3.4测试C环境 4、配置Qt环境4.1 安装相关的库4.2 测试 5、总结 1、前言记录一下Ubuntu18.04配置C环境和Qt环境的过程，方便自己日后回顾，也可以给有需要的人提供帮助。 # 2…...

编程日记 2025/5/29 23:12:43

深度学习--自然语言处理统计语言与神经语言模型

文章目录前言一、语言转换方法1、数据预处理2、特征提取3、模型输入4、模型推理二、语言模型1、统计语言模型1) 机器学习词向量转换2）解释：3) 统计语言模型存在的问题 2、神经语言模型1）one—hot编码2）解决维度灾难3&#xff09…...

编程日记 2025/5/30 10:15:13

linux ptrace 图文详解（七） gdb、strace跟踪系统调用

目录一、gdb/strace 跟踪程序系统调用二、实现原理三、代码实现四、总结 （代码：linux 6.3.1，架构：arm64） One look is worth a thousand words. —— Tess Flanders 相关链接： linux ptrace 图…...

编程日记 2025/6/21 16:42:34

Feign接口调用失败降级机制

是的，通过 FallbackFactory 实现的降级逻辑在 Feign 接口调用失败时会被触发，但需要注意以下关键点以确保降级生效： 一、代码有效性分析降级逻辑是否生效？ • 是的，当 Feign 调用 BaseServiceFeign 接口的 updateMoni…...

编程日记 2025/6/3 15:14:56

系统架构-安全架构设计

概述对于信息系统来说，威胁有：物理环境（最基础）、通信链路、网络系统、操作系统、应用系统、管理系统物理安全：系统所用设备的威胁，如自然灾害、电源故障通信链路安全：在传输线路上安装窃听…...

编程日记 2025/5/29 5:20:45

python实现简单的UI交互

文章目录 1. 基础打印覆盖同一行2. 多行动画效果3. 彩色文本（Windows/macOS/Linux）4. 输入交互5. 异步输入与非阻塞显示6. 高级控制台 UI 库可以通过控制台打印实现简单的「伪UI交互」，尤其适合展示进度、动态文本或轻量级状态反馈。以下是…...

编程日记 2025/5/30 2:31:09

高频面试题：如何保证数据库和es数据一致性

背景在实际项目开发中，我们经常将MySQL作为业务数据库，ES作为查询数据库，用来实现读写分离，缓解MySQL数据库的查询压力，应对海量数据的复杂查询，这其中有一个很重要的问题，就是如何实现MySQL数…...

编程日记 2025/6/23 12:31:26

CS001-7-hbao

HBAO https://zhuanlan.zhihu.com/p/348467142 HBAO(屏幕空间的环境光遮蔽) - 知乎 (zhihu.com) [摸着原神学图形]HBAO实现与优化 - 知乎 (zhihu.com) https://zhuanlan.zhihu.com/p/367793439 Global Illumination_Horizon-Based Ambient Occlusion(HBAO)-CSDN博客这个解…...

编程日记 2025/5/30 8:23:21

使用npm install或cnpm install报错解决

1.从git上拉了一个新vue项目npm install 报错如下解决办法： 清除npm缓存 npm cache clean -force 2.阿里云镜像证书过期，报错如下解决办法： 更换阿里云镜像地址 #原来的地址是：https://registry.npm.taobao.org/ cnpm confi…...

编程日记 2025/6/4 16:19:11

Electron Forge【实战】阿里百炼大模型 —— AI 聊天

获取 apiKey 登录并开通阿里云百炼 https://bailian.console.aliyun.com/#/home 新人有半年免费的使用福利，在模型详情中，可以查看剩余的免费额度 https://bailian.console.aliyun.com/?tabmodel#/model-market/detail/qwen-turbo 在下方链接中创建 ap…...

编程日记 2025/5/31 22:08:18

Vue3实现高仿word自定义颜色选择器组件（支持 v-model）

目录 Vue3实现高仿word自定义颜色选择器组件（支持 v-model）需求分析大致效果需求功能实现所需技术从UI哪里拿到主题颜色标准色进行子主组件的v-model实现子组件布局实现子组件样式实现子组件全部代码：父组件调用方式完结 Vue3实现高仿word自定…...

编程日记 2025/6/2 14:53:00

.NET中，const和readonly区别

在.NET中，const和readonly都用于定义不可变的值，但它们在行为和使用场景上有显著区别。以下是两者的详细对比： 初始化时机 • const ◦ 编译时常量，必须在声明时赋值。 ◦ 值在编译时确定，并被直接嵌入到IL代码中&…...

编程日记 2025/6/22 9:38:13

力扣-206.反转链表

题目描述给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 class Solution { public:ListNode* reverseList(ListNode* head) {//头插法ListNode *p head;headnullptr;ListNode *temp nullptr;while (p! nullptr){tempp;pp->next;tem…...

编程日记 2025/6/22 9:37:24

五一去荣昌吃卤鹅？基于Java和天地图的寻找荣昌卤鹅店实践

目录前言 1、卤鹅哥与甲亢哥的爆火事件 2、荣昌卤鹅产业的空间分布 3、使用Java 和天地图进行产业挖掘一、地名检索简介 1、地名检索功能 2、地名检索API介绍二、荣昌卤鹅检索实践 1、数据获取流程 2、天地图API请求构建 3、参数构建及调用 4、结果生成及本地保存…...

编程日记 2025/6/4 1:54:14

力扣-160.相交链表

题目描述给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回 null 。图示两个链表在节点 c1 开始相交： 题目数据保证整个链式结构中不存在环。注意，函数返…...

编程日记 2025/6/19 23:27:55

CSS Position 属性完全指南

CSS 中的 position 属性是布局的基础，它决定了元素在页面中的定位方式。理解各种定位值的行为和适用场景对于构建灵活、响应式的布局至关重要。 position 属性的五个主要值 1. static（默认值） 元素遵循正常的文档流不受 top, right, botto…...

编程日记 2025/5/19 7:11:56

热度上升，25西电机电工程学院（考研录取情况）

1、机电工程学院各个方向 2、机电工程学院近三年复试分数线对比学长、学姐分析由表可看出： 1、力学25年相较于24年下降35分，为255分 2、机械工程25年相较于24年下降15分，为320分 3、仪器科学与技术25年相较于24年上升35分，为…...

编程日记 2025/6/4 7:23:44

相关文章：