Vue-插件(plugin)

news2024/11/24 13:06:07

插件(plugin)

插件是vue中特别强大并且特别简单的一个东西,它可以帮助我们增强vue

插件本质来说就是一个对象,但是这个对象必须包含install(安装)方法,由vue帮助我们调用

只要插件写的足够的好,就可以帮助我们实现很多的功能,提高开发效率,而我们只需要简单的引入并且use下即可使用插件里面的全部的功能

只要是插件,都需要使用Vue.use()进行使用

1 定义插件

新建一个plugin.js文件,里面必须有install方法,先简单做一个输出

2 引用插件

定义好了之后,需要引用插件,在vm创建之前就要加载插件,所以要在main.js中引用插件并且引用

vue给我们提供一个API引用插件:use

这时候再看控制台,看到了插件中定义的输出

这样就验证了插件定义的没问题并且使用成功,接下来就可以完善代码了

3 Vue参数

插件是可以接收到参数的,第一个参数参数是Vue构造函数,所以叫Vue比较合适

接收到这个参数,就可以做很多事情了,比如增加多个全局的过滤器,自定义指令,混入。。。

不止这一个参数,我们可以自已传参,比如这里我在使用的传入三个参数,然后进行接收

也是没问题的

4 简单使用

这里我定义了一个过滤器,该过滤器的名称叫mySlice,作用是截取字符串的前四位

然后去组件里面使用过滤器

成功通过插件使用到了全局的过滤器

5 总结

功能:用于增强Vue

本质:包含install方法的一个对象,install的第一个参数是vue,第二个以后的参数是插件使用者传递的数据

  • 定义插件:
  • 1 添加全局过滤器 Vue.filter(…)
  • 2 添加全局指令 Vue.directive(…)
  • 3 配置全局混入Vue.mixin(…)
  • 4 添加实例方法 Vue.prototype. m y M e t h o d = f u n c t i o n ( ) . . . 或 V u e . p r o t o t y p e . myMethod=function(){...}或Vue.prototype. myMethod=function()...Vue.prototype.myProperty=xxx

使用插件:Vue.use()

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

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

相关文章

一些常用linux命令

系列文章目录 文章目录 系列文章目录一、常用linux命令1. lsof介绍2.查看进程的几种命令3.查看inode号的几种命令4.查看Linux系统负载的命令一般常用的有4种:5.iostat 主要用于输出磁盘IO 和 CPU的统计信息。 总结 一、常用linux命令 1. lsof介绍 lsof可以查看你所打开的文件…

工具篇--5 WIndow/Linux--Mysql binLog日志监听Canal安装

前言:作为一个中间件canal,可以实时的监听到mysql 中表结构及数据的变化, 项目中只需要接入canal ,不需要我们在业务中进行aop 或者接口的编写就可以及时的收到数据的变化。 1 介绍: Canal是阿里巴巴开源的一款基于M…

想要用好ChatGPT,首先得学会用提示词!

用好ChatGPT,可以辅助学习~ 期末季,一年中体验过最多地区时差的一段时期,懂的都懂😲 放下essay刷个小红薯也都是“赶due病友”…几周内5-6个essay ddl的经历相信不少同学都深有体会。 而今年的一大不同就是有了“哆啦C梦”——…

PostgreSQL行转列

管理拓展 启用拓展 -- 启用拓展 create extension tablefunc; --tablefunc扩展模块包含一系列返回记录表的函数。 create extension "uuid-ossp";--uuid扩展函数拓展启动后,可以在public空间下查看到crosstab函数 卸载函数 drop extension tablefunc…

信创办公–基于WPS的PPT最佳实践系列 (使用母版进行有效设计)

信创办公–基于WPS的PPT最佳实践系列 (使用母版进行有效设计) 目录 应用背景相关知识操作步骤1、认识母版2、在每页幻灯片底部添加logo图片3、第一张幻灯片和最后一张幻灯片出现logo图片,其他页面不出现4、除了封面封底之外,其他页…

硬件速攻-ATK1218正点原子GPS模块

效果演示(注意室内是没有数据) 模块实物图与接线方法 SPP 可不接(这个连到了模块上的灯) RXD 接单片机TXD TXD 接单片机串口RXD GND 接单片机GND VCC接单片机5V IPEX一定要接送的天线 而且天线要放到室外 再次说明提醒 精简代码与说明 如果你只想获取经纬度而已 你可用屏…

原来C语言计算的数只要低过4个字节就要整型提升!

C的整型算术运算总是至少以缺省整型类型的精度来进行的。为了获得这个精度,表达式中的字符和短整型操作数在使用之前被转换为普通整型,这种转换被称为整型提升。 比如: char a 3; char b 127; char c a b; printf("%d&q…

Vue中如何进行地图轨迹展示与追踪?

Vue中如何进行地图轨迹展示与追踪? 随着移动互联网技术的快速发展,位置数据的应用越来越广泛。在许多应用程序中,地图轨迹展示和追踪功能已经成为了基本功能之一。在Vue中,我们可以使用许多不同的地图API和库来实现这些功能。本文…

ATTCK v13版本战术介绍——凭证访问(三)

一、引言 在前几期文章中我们介绍了ATT&CK中侦察、资源开发、初始访问、执行、持久化、提权、防御规避战术,本期我们为大家介绍ATT&CK 14项战术中凭证访问战术第13-17种子技术,后续会介绍凭证访问其他子技术,敬请关注。 二、ATT&…

智能图像处理竟然能做出这种神奇的事

前言 大家都知道,搞论文的时候很多的时候都需要数据来做支撑,对应的我就需要在很多期刊中获取对应的Figure,但是获取很麻烦,就算拍摄出来,放在论文里面效果也不是很好,而且歪七扭八的很碍眼。在这种事情上就…

5.3图的综合应用算法(最小生成树、最短路径生成)

一.最小生成树算法 1.概念(Minimum-Spanning-Tree)MST 生成树:针对于连通图,包含全部顶点,去掉一条边后不连通,加一条边形成环 最小生成树:带权连通无向图,边的权值之和最小的生成树(MST) 2.…

关于前端跨域的结局方案

前言 跨域产生的原因 浏览期的安全策略。常见的解决跨域的方法&#xff1a; 1.JONSP 利用<script>标签的src可以发起跨域请求,大致过程&#xff1a;前端的方法名传到地址上callbackxx 缺点&#xff1a;只能get方法2.domain.iframe、domain.hash、domain.parent等 上述这…

VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容

系列文章目录 文章目录 系列文章目录错误分析一、版本比对二、解决方案总结 错误分析 在VUE项目开发中&#xff0c;我们经常会遇到报错&#xff1a; Node Sass version 7.0.1 is incompatible with ^4.0.0。 网上解决方案也千奇百怪&#xff0c;最终操作下来&#xff0c;也是…

首添机密计算创新成果!龙蜥首获 ACM SIGSOFT 杰出论文奖

近日&#xff0c;软件工程领域的全球旗舰级会议-软件工程大会 ICSE 在澳大利亚墨尔本市召开&#xff0c;龙蜥社区云原生机密计算 SIG 核心成员&#xff08;阿里云JVM 团队&#xff09;在 Java 机密计算方面的研究成果入选了 ICSE2023&#xff0c;并且以该会议今年唯一的 All Fi…

STM32F407之SD卡读数据介绍

1&#xff0c;SD卡基础知识 SD卡&#xff08;Secure Digital Memory Card&#xff09;即&#xff1a;安全数字存储卡&#xff0c;它是在MMC的基础上发展而来&#xff0c;作为存储器件广泛应用于电子产品中。 1.1 SD卡有SDIO和SPI两种传输方式&#xff0c;具体信号定义如下&…

DSSAT模型: 遥感数据与作物生长模型同化及在作物长势监测与估产中的应用

查看原文>>>遥感数据与作物生长模型同化及在作物长势监测与估产中的应用 基于过程的作物生长模拟模型DSSAT是现代农业系统研究的有力工具&#xff0c;可以定量描述作物生长发育和产量形成过程及其与气候因子、土壤环境、品种类型和技术措施之间的关系&#xff0c;为不…

华为开源自研AI框架昇思MindSpore应用案例:SSD目标检测

目录 一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例 SSD&#xff0c;全称Single Shot MultiBox Detector&#xff0c;是Wei Liu在ECCV 2016上提出的一种目标检测算法。使用Nvidia Titan X在VOC 2007测试集上&#xff0c;SSD对于输入尺寸300x300的网络&#xf…

基于html+css的图展示130

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

正交标注有利于无监督医学图像分割

文章目录 Orthogonal Annotation Benefits Barely-supervised Medical Image Segmentation摘要本文方法Registration ModuleLabel MixingDense-Sparse Co-Training 实验结果 Orthogonal Annotation Benefits Barely-supervised Medical Image Segmentation 摘要 半监督学习的…

【DRAM存储器二】Sense Amplifier

&#x1f449;个人主页&#xff1a;highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 参考书籍&#xff1a;《Memory Systems - Cache, DRAM, Disk》 目录 前言 感应…