位置: IT常识 - 正文

认识Vue扩展插件(vue安装插件)

编辑:rootadmin
在 Vue 开发中,实现一个功能有很多种方式可以选择,这依赖于 Vue 强大的功能(指令、混合、过滤、插件等),本文介绍一下插件的开发使用。 ...

推荐整理分享认识Vue扩展插件(vue安装插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:很全的vue插件汇总,赶紧收藏下,vuex插件,vuex插件,很全的vue插件汇总,赶紧收藏下,vue项目常用插件,vue的插件,vue 扩展,很全的vue插件汇总,赶紧收藏下,内容如对您有帮助,希望把文章链接给更多的朋友!

众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令、混合、过滤、插件等),本文介绍一下插件的开发使用。

Vue 插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

添加全局方法或者 property。如:vue-custom-element

添加全局资源:指令/过滤器/过渡等。如 vue-touch

通过全局混入来添加一些组件选项。如 vue-router

添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

认识Vue扩展插件(vue安装插件)

一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

使用插件

vue引入的插件,如 element , 都需要提供 install 方法,因为 Vue.use() 方法会调用插件里的 install 方法

import Vue from 'vue'import Element from 'element-ui'Vue.use(Element)全局组件

类似的全局组件也是同样的做法,在 install 方法里面 进行 组件 注册

import ColorIconComponents from './iconColor.vue'const ColorIcon = { install: function (Vue) { Vue.component('ColorIcon', ColorIconComponents) }}export default ColorIcon绑定prototype

数组对象等绑定自定义方法

// path: src/utils/customFn.jsexport default { install(Vue) { // 数组对象排序 asc-升序 des-降序 Array.prototype.sortListObjByKey = function (key, order = 'asc') { const that = this const comparefn = (obj1, obj2) => { if (order === 'asc') { return obj1[key] - obj2[key] } else { return obj2[key] - obj1[key] } } return that.sort(comparefn) } }}

使用

// path: src/main.jsimport customFn from "./libs/customFn";Vue.use(customFn)开发插件范式

来源

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}

???

? 持续更文,关注我,你会发现一个踏实努力的宝藏前端?,让我们一起学习,共同成长吧。

? 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 ?

? 欢迎大家评论交流, 蟹蟹?

本文链接地址:https://www.jiuchutong.com/zhishi/313118.html 转载请保留说明!

上一篇:织梦DEDECMS教程:给图片加上自动编号(织梦cms要钱吗)

下一篇:phpcms如何调取栏目图片(phpcms采集教程)

  • 电话显示虚拟运营商是什么意思(电话显示虚拟运营商是怎么回事)

    电话显示虚拟运营商是什么意思(电话显示虚拟运营商是怎么回事)

  • 网卡的mac地址是多少位(网卡mac地址是固定的吗)

    网卡的mac地址是多少位(网卡mac地址是固定的吗)

  • char varchar区别(char varchar nvarchar的区别)

    char varchar区别(char varchar nvarchar的区别)

  • word分节符在哪里(word分节符在哪里添加)

    word分节符在哪里(word分节符在哪里添加)

  • 官换机为什么已经激活了(官换机显示以前的数据吗)

    官换机为什么已经激活了(官换机显示以前的数据吗)

  • 惠普1606硒鼓型号(惠普p1606dn硒鼓型号)

    惠普1606硒鼓型号(惠普p1606dn硒鼓型号)

  • 电脑怎么设置壁纸自己的照片(电脑怎么设置壁纸锁屏)

    电脑怎么设置壁纸自己的照片(电脑怎么设置壁纸锁屏)

  • 十年没用的qq还能找回密码吗(十年没用的qq还能恢复吗)

    十年没用的qq还能找回密码吗(十年没用的qq还能恢复吗)

  • 华为g7-tl00是荣耀几(华为g7tl00手机价格)

    华为g7-tl00是荣耀几(华为g7tl00手机价格)

  • 京东自营和京东国际自营有什么区别(京东自营和京东物流的区别)

    京东自营和京东国际自营有什么区别(京东自营和京东物流的区别)

  • 蚂蚁森林有来访记录嘛(蚂蚁森林可以看到访客吗)

    蚂蚁森林有来访记录嘛(蚂蚁森林可以看到访客吗)

  • mar al00是华为什么型号(maral00是华为什么型号)

    mar al00是华为什么型号(maral00是华为什么型号)

  • word怎么把页眉删掉(word怎么删除)

    word怎么把页眉删掉(word怎么删除)

  • 淘宝收货怎么选择代收(淘宝收货怎么选择放驿站)

    淘宝收货怎么选择代收(淘宝收货怎么选择放驿站)

  • mate30pro屏幕容易碎吗(Mate30pro屏幕容易坏)

    mate30pro屏幕容易碎吗(Mate30pro屏幕容易坏)

  • vivo相册回收站在哪里(vivo相册回收站永久删除还能找回吗)

    vivo相册回收站在哪里(vivo相册回收站永久删除还能找回吗)

  • 快手极速版怎样收藏作品(快手极速版怎样领金币)

    快手极速版怎样收藏作品(快手极速版怎样领金币)

  • 哈罗单车助力车怎么充电(哈罗单车助力车计费规则)

    哈罗单车助力车怎么充电(哈罗单车助力车计费规则)

  • 优活手环怎么调中文(优活手环怎么调时间格式)

    优活手环怎么调中文(优活手环怎么调时间格式)

  • 通过微信收款码可以找到本人吗(通过微信收款码诈骗)

    通过微信收款码可以找到本人吗(通过微信收款码诈骗)

  • 苹果x有面容和无面容的区别(苹果x有面容和无面容的差价)

    苹果x有面容和无面容的区别(苹果x有面容和无面容的差价)

  • 百度爱奇艺卡什么意思(爱奇艺卡的厉害)

    百度爱奇艺卡什么意思(爱奇艺卡的厉害)

  • 格式工厂如何转换MP3(格式工厂如何转换格式)

    格式工厂如何转换MP3(格式工厂如何转换格式)

  • q币怎么换成qq余额(q币怎么换成qq余额宝)

    q币怎么换成qq余额(q币怎么换成qq余额宝)

  • iphonex耗电严重原因(iphonex耗电量大怎么办)

    iphonex耗电严重原因(iphonex耗电量大怎么办)

  • word如何邮件合并(word如何邮件合并图片)

    word如何邮件合并(word如何邮件合并图片)

  • 【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB(node教程)

    【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB(node教程)

  • 税务局纳税申报网站官网
  • 农产品进项税额转出怎么算
  • 公司房产税怎么做分录
  • 申领的发票多久过期
  • 其他收益里的政府补助免税吗
  • 固定资产减少如何处理
  • 季度对账单 怎么处理
  • 收入与支出怎么算利润率
  • 如何开增值税专用发票视频
  • 财务软件计提所得税分录
  • 外地建筑工程开票流程
  • 技术研发费加计扣除
  • 企业所得税和增值税都要交吗
  • 出售商标使用权收入计入什么科目
  • 逆流交易固定资产折旧实现,为什么按差额
  • 企业的商品产品包括
  • 企业所得税税前扣除异常
  • 定额发票有效期是多长时间?你知道吗?
  • 个人买卖二手房交什么税
  • 个人取得下列各项所得须自行申报纳税的有
  • 企业或员工获得的相关荣誉
  • 详解非税收入
  • 税控盘没有反写会怎样
  • 个体工商户生产经营所得税税率表2021
  • 合伙企业累进税率
  • 发票校验码后六位在哪个位置图片
  • 现金福利支出需要申报个税吗
  • 租税联动政策
  • 年度利润总额是会计利润吗
  • 在建工程领用原材料需要进项税转出吗
  • 接受捐赠收入要计入销售收入吗
  • uniapp异常处理
  • 删除桌面上的图标用什么键
  • win7系统网络连接出现红叉
  • 增值税进项税额转出的情况有哪些
  • 存货周转材料报废处理会计分录
  • php获取文章内容图片
  • 文化事业建设费减免政策
  • 商业企业促销费包括哪些
  • 调入的无形资产记入哪里
  • 伪类的常见类型
  • 国际货运代理存在的必要性有哪些方面
  • 金税盘怎么设置字体
  • 未满一年需要工商年报吗
  • 两个公司开发票
  • 外资企业和内资企业并举
  • 会计学材料成本差异
  • 发票冲红原件需要拿回来吗
  • 人力资源服务费是什么意思
  • 研发阶段的产品质检要参与
  • 银行对账单冲正的单据在财务软件哪里找
  • 要约收购的条件和程序具体包括哪些?
  • 五证合一的办理流程是什么
  • 年化利率是什么意思
  • 特殊事项税务处理
  • sql server怎么修改表中数据
  • win8任务管理器在哪
  • linux所谓的free
  • linux回退
  • awk 筛选有特定字符
  • linux中vi命令详解
  • linux mangle
  • cocos2dx4.0教程
  • bootstrap模态框按钮无响应
  • sublime text配置node.js调试(图文教程)
  • android内核剖析代码
  • ntp ntpdate
  • 安全工具有哪些
  • window.open()参数传递及获取
  • unity3d有什么用
  • javascript操作数组的方法
  • node运行js文件
  • 安卓动态图标怎么实现
  • java与android的区别
  • web.py 十分钟创建简易博客实现代码
  • javascript 日期运算
  • 电子税务局怎么删除办税员
  • 湖南省株洲市税务局
  • 软件使用权转让税率
  • 船舶吨税是中央税还是地方税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设