Vue-插件(plugin)

这篇具有很好参考价值的文章主要介绍了Vue-插件(plugin)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

插件(plugin)

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

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

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

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

1 定义插件

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

Vue-插件(plugin)

2 引用插件

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

Vue-插件(plugin)

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

Vue-插件(plugin)

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

Vue-插件(plugin)

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

3 Vue参数

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

Vue-插件(plugin)

Vue-插件(plugin)

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

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

Vue-插件(plugin)

也是没问题的

Vue-插件(plugin)

4 简单使用

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

Vue-插件(plugin)

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

Vue-插件(plugin)

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

Vue-插件(plugin)

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()文章来源地址https://www.toymoban.com/news/detail-491354.html

到了这里,关于Vue-插件(plugin)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

    使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致 项目中使用示例: //menu.icon是路径里面

    2024年02月12日
    浏览(44)
  • 【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析

    rollup-plugin-visualizer 是一个用于Rollup构建工具的插件,它可以生成可视化的构建报告,帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。 使用 rollup-plugin-visualizer 插件,可以在构建完成后生成一个交互式的HTML报告,其中包含了构建过程中的各种统计信息,如文

    2024年02月07日
    浏览(53)
  • vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用

    因为 vue-plugin-hiprint 使用到了 JQuery 所以需要安装对应依赖 根据自己的系统 安装,静默打印才需要用到 在 main.js 中引入 依赖 我这边的 demo是 打印条形码,其他的也差不多,纸张大小是 宽 18.9 毫米 高 9毫米 打印机纸张大小: 设计面板大小: 如果 打印出来 比较大,可以将

    2023年04月12日
    浏览(31)
  • 前端vue单个文件上传支持图片,压缩包以及文件 , 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066

    前端vue单个文件上传支持图片,压缩包以及文件 , 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码部分 JS代码 (引入组件 填充数据) CSS

    2024年02月09日
    浏览(55)
  • UserScripts Safari 苹果iOS上特别好用且免费的脚本插件,五分钟学会

    JavaScript yyds。如果你喜欢用 Chrome for iOS,那么你也可以试试通过 QuantumultX/Surge 等代理工具及其提供的方法为网站的特定网页嵌入 JavaScript 用户脚本,用于移除网页上的广告或加速视频广告跳过等;(参阅本文附注) Userscripts 是一款免费 iOS Safari 浏览器插件,可以兼容油猴脚

    2023年04月22日
    浏览(48)
  • .NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2

    很多同学都不愿给电脑设动态壁纸,其中有个重要原因就是嫌它占资源过多。今天大姚分享一个.NET开源、免费(MIT license)的一个小而快并且功能强大的 Windows 动态桌面软件,支持视频和网页动画播放:DreamScene2。 支持视频播放。 支持 URL 和网页文件。 支持启动后自动播放。

    2024年02月19日
    浏览(52)
  • 【Vue】使用print.js插件实现打印预览功能,超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div,给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件,可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • Vue实现图片预览,侧边栏懒加载,不用任何插件,简单好用

    实现样式 需求 实现PDF上传预览,并且不能下载 第一次实现:用vue-pdf,将上传的文件用base64传给前端展示 问题: 水印第一次加载有后面又没有了。 当上传大的pdf文件后,前端获取和渲染又长又慢,甚至不能用 修改实现模式 前端上传PDF,后端将PDF转化成一页一页的图片 前端

    2024年01月24日
    浏览(42)
  • 插件(Plugins)

    插件是什么? Kong Gateway是一个Lua应用程序,旨在加载和执行Lua或Go模块,我们通常称为插件。Kong提供了一组标准的Lua插件,这些插件与Kong Gateway捆绑在一起。您可以访问的插件集取决于您的安装方式:开源、企业版或在Kubernetes上运行的这些Kong Gateway选项之一。 Kong社区也可以

    2024年01月23日
    浏览(33)
  • SystemUI之插件Plugin

    一、为何要用插件plugin SystemUI模块非常多,结构自然也就非常复杂,而且SystemUI是一个常驻的进程,不能随意做修改升级,如果修改不到位,很可能会存在bug,这是修复就非常难。另外一个原因是可以方便客户客制化,如需要改变状态栏的背景色、显示时钟的风格、锁屏壁纸

    2024年03月20日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包