位置: 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采集教程)

  • 临时工工资列支工资吗
  • 所得税可以弥补几年
  • 缴纳个税会计分录是什么
  • 年初存货跌价准备余额是上年末结转的吗
  • 清算缴纳企业所得税
  • 母公司及子公司借款要利息吗
  • 如何在网上查询发票
  • 营业外收入怎么结转到本年利润
  • 公司净资产减少
  • 对外销售的材料的成本应计入什么账户
  • 原材料加工成品怎么做账
  • 纳税申报表如何导出
  • 没有签字的支出凭证怎么处理?
  • 自然人股权转让涉税信息怎么填
  • 签合同交什么照片比较好
  • 增值税税控盘服务费可以每年都抵扣吗
  • 经营活动现金流量净额
  • 库存股是实收资本吗
  • 公司收到境外付款的人民币
  • 外派人员计算个人所得税可否有附加扣除
  • 怎么快速关闭电脑屏幕快捷键
  • 小规模纳税人无票收入免税吗
  • 支付委托加工费用会计科目
  • 为什么win+d
  • win11怎么更改壁纸
  • 税务发票上的账户是对公账户吗
  • 出口退税的申报期限是多久
  • 借款利息税前扣除需要发票
  • .php是什么
  • 转入固定资产清理会计科目
  • 汇算清缴补充公告
  • 稳岗补贴怎么申请步骤
  • 流动比率取值是取期末
  • 利息支出是利息费用嘛
  • 建筑业的账务处理方法
  • 采购发票生成的会计凭证
  • 装修的工程款账务处理
  • vscode开发gui
  • 企业购买商铺会查征信吗
  • 年终奖税金怎么扣
  • 开票资料更改
  • 房地产企业建成后先出租的房地产
  • 小规模增值税为负数怎么报税
  • 房租没发票怎么入账
  • 外贸出口企业申报年月怎么填
  • 应付账款周转率越大越好还是越小越好?
  • 在外地设办事处需要办什么手续
  • 分支机构与总机构怎么纳税?
  • 增值税附加税有哪些
  • 分公司利润如何纳税
  • 汽油费进项税额能抵扣吗
  • 新成立的公司工会经费需要交吗
  • 财务人员如何审合同课件
  • 公司不做账会怎样?
  • 存货周转率 高
  • 账簿设置方法
  • sql去除指定数据
  • 存储过程的输出参数有且只能有一个
  • xp系统控制面板在哪里打开
  • centos7 eth
  • win7能不能安装vs2019
  • downloadplus.exe是什么进程 作用是什么 downloadplus进程是安全的吗
  • pavmail.exe - pavmail进程是什么文件 有什么用
  • 怎么看win8还是win10
  • Win10应用程序无法正常启动0xc000007b
  • 如何改进个人工作作风
  • android开发流程
  • 深入分析的成语
  • node.js的流的作用
  • 建立批处理命令
  • jquery网站开发
  • node.js在网页制作中的作用
  • jquerycdn
  • python发送mq消息
  • js实现拖拽元素改编顺序
  • javascript基于什么的语言
  • ukey开票人是管理员改胃自己时只能开电子发票
  • 个税已申报税额为0可以退税吗
  • 担保机构和银行的区别
  • 土地增值税分期清算条件?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设