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

  • 单独计税的年终奖怎么算
  • 职工教育经费中其他费用包括
  • 单位边际贡献和边际贡献一样吗
  • 抄报税校验失败调用系统服务出错怎么办
  • 分步法和分批法思维导图
  • 土地返还款属于政府补助吗
  • 车辆购置税多缴了能退吗
  • 拆迁车间
  • 分期收款发出商品一批,售价50000
  • 固定资产减半征收2%申报如何填增值税纳税申报表
  • 外贸企业需要交哪些税费
  • 电费发票勾选是啥意思
  • 季度不超9万
  • 即用于一般计税又用于简易计税的固定资产抵扣
  • 股息收入属于应税收入吗
  • 税务异常不处理会的后果
  • 基础研究投入费用包含工资吗
  • 转出未交增值税科目
  • 申请增值税一般计税方法的个体工商户可自
  • 本期预收的货款属于
  • 怎么计算房产税率
  • 到期一次付息债券的实际利率怎么算
  • 背书人账户名称填什么
  • 预征率3%
  • php面试算法
  • 腾讯电脑管家中的软件搬家
  • win10最新版本22h2激活
  • 劳务报酬所得缴纳时间
  • nexus 搭建
  • 对出纳的要求
  • 长期股权投资初始投资成本和入账价值
  • 其他应付款的会计科目
  • qgc地面站源码
  • php的什么函数可以判断变量是否存在
  • 存货跌价准备是负数表示什么
  • jquery+thinkphp实现跨域抓取数据的方法
  • 企业自行清算的条件是什么
  • react避免子组件更新
  • 支付广告费没有票怎么入账
  • mongodb应用实例
  • 外贸企业有哪些公司青岛
  • 汇票贴现是什么
  • 支付给个人的佣金没有发票
  • 详解增发万亿国债细节
  • 基础电信服务和增值电信服务税率
  • 企业增值税的征收方式
  • 装修行业小规模最高能开几个点的票
  • 销售费用怎么用
  • 一般纳税人工程劳务发票税率是多少
  • 坏账准备是资产减值损失吗
  • 有限合伙企业中谨慎有限合伙人的应当
  • 建设期贷款利息定义是什么
  • 出口退税 账务处理
  • 商业养老保险有风险吗
  • 应付暂估会计处理
  • 外购的商品用于生产
  • 员工预支工资现金流量
  • 注册资本金到位证明
  • 进项税额的ppt
  • 卖蒸汽的增值税是多少
  • 会计记账凭证怎么装订视频
  • 公司不做账会怎样?
  • win8.1的ie浏览器
  • windowsxp的主要特点是什么
  • linux操作系统配置网络
  • ContentProvider之通过ContentResolver获取图像、视频、音频举例
  • cocos2dx-js
  • linux系统mysql自动备份并使用ftp上传的方法
  • node chain
  • python生成器有几种写法
  • 联机游戏
  • js点击
  • app开发指南
  • javascript模板
  • bootstrap技术教程
  • js动态设置css样式
  • Android屏幕适配分屏
  • 国家税务总局可以设定行政处罚吗
  • 浙江国地税联合申报系统
  • 法制观念的问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设