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

  • 苹果手表输入法怎么设置(苹果手表输入法怎么改成中文)

    苹果手表输入法怎么设置(苹果手表输入法怎么改成中文)

  • 苹果11竖屏锁定在哪里(苹果竖屏锁定怎么设置)

    苹果11竖屏锁定在哪里(苹果竖屏锁定怎么设置)

  • 微信电话怎么隐藏悬浮窗(微信电话怎么隐藏图标)

    微信电话怎么隐藏悬浮窗(微信电话怎么隐藏图标)

  • 滴滴订单会解冻吗(滴滴订单冻结是什么意思)

    滴滴订单会解冻吗(滴滴订单冻结是什么意思)

  • 为什么苹果蓝牙打开了没有显示(为什么苹果蓝牙连不上设备)

    为什么苹果蓝牙打开了没有显示(为什么苹果蓝牙连不上设备)

  • 升级ios13卡在开机页面(苹果升级卡在开机界面)

    升级ios13卡在开机页面(苹果升级卡在开机界面)

  • 央视影音版hd版区别(央视影音hd正式版本)

    央视影音版hd版区别(央视影音hd正式版本)

  • 超声波和高频机区别(高频振动和超声波)

    超声波和高频机区别(高频振动和超声波)

  • 公众号怎么生成二维码让别人关注呢?(公众号怎么生成pdf)

    公众号怎么生成二维码让别人关注呢?(公众号怎么生成pdf)

  • qq怎么设置亲密关系(qq怎么设置亲密关系不可见)

    qq怎么设置亲密关系(qq怎么设置亲密关系不可见)

  • 为什么腾讯会议检测不到摄像头(为什么腾讯会议不能用蓝牙耳机)

    为什么腾讯会议检测不到摄像头(为什么腾讯会议不能用蓝牙耳机)

  • 华为p40容易发热吗(华为p40为啥发热)

    华为p40容易发热吗(华为p40为啥发热)

  • nex3防水等级(nex3 5g防水等级)

    nex3防水等级(nex3 5g防水等级)

  • 怎么关闭自己的朋友圈不让别人看(怎么关闭自己的微信朋友圈)

    怎么关闭自己的朋友圈不让别人看(怎么关闭自己的微信朋友圈)

  • 苹果11屏幕模糊(苹果11屏幕模糊一块)

    苹果11屏幕模糊(苹果11屏幕模糊一块)

  • 小米手机一直显示耳机模式怎么办(小米手机一直显示redmi就是开不了机)

    小米手机一直显示耳机模式怎么办(小米手机一直显示redmi就是开不了机)

  • 超级省电模式怎么关闭(超级省电模式怎么解除)

    超级省电模式怎么关闭(超级省电模式怎么解除)

  • 华为gt2可以回复微信吗(华为gt3价格)

    华为gt2可以回复微信吗(华为gt3价格)

  • 苹果x电充满是什么显示(苹果x充满电显示出来是什么?)

    苹果x电充满是什么显示(苹果x充满电显示出来是什么?)

  • 玩机技巧是干什么用的(玩机技巧app下载)

    玩机技巧是干什么用的(玩机技巧app下载)

  • 苹果xr怎么设置铃声模式(苹果xr怎么设置动态壁纸)

    苹果xr怎么设置铃声模式(苹果xr怎么设置动态壁纸)

  • wps查找快捷键是什么(wps表格查找快捷键)

    wps查找快捷键是什么(wps表格查找快捷键)

  • iphone11pro用的什么基带(iphone11pro用的什么处理器)

    iphone11pro用的什么基带(iphone11pro用的什么处理器)

  • 搜狗输入法回车键发送怎么取消(搜狗输入法回车键变大)

    搜狗输入法回车键发送怎么取消(搜狗输入法回车键变大)

  • 计算机硬件包括哪5个(微型计算机硬件包括)

    计算机硬件包括哪5个(微型计算机硬件包括)

  • word模板文件的扩展名为(Word模板文件的是)

    word模板文件的扩展名为(Word模板文件的是)

  • mate20锁屏显示时间

    mate20锁屏显示时间

  • word一级二级三级标题如何设置(word一级二级三级标题字体)

    word一级二级三级标题如何设置(word一级二级三级标题字体)

  • 一键换机是什么意思(一键换机是什么情况)

    一键换机是什么意思(一键换机是什么情况)

  • 笔记本电脑word在哪(笔记本电脑word文档变成白色)

    笔记本电脑word在哪(笔记本电脑word文档变成白色)

  • 应税劳务销售额怎么算
  • 什么是协税护税员
  • 抵扣旅客运输增值税报表怎么填
  • 零售业进销差价会计分录实例
  • 软件即征即退的发票怎么开
  • 资产减值损失在利润表怎么填列
  • 工业企业生产费用要素
  • 资本化研发费用在本年的摊销
  • 固定资产年数总额法
  • 6000万居间费如何避税
  • 不动产进项税额分两年抵扣
  • 企业付装修费怎么入账
  • 收到股本的现金怎么做账
  • 商品入库时的会计分录
  • 材料检测费怎么计算
  • 客户退回发票会退回吗
  • 咨询服务费怎么结转成本
  • 税收预测表怎么填写
  • 营改增后印花税计税依据文件
  • 处于成熟期的企业其预算模式的特点是以什么为起点
  • 企业收到要发放给员工的补贴
  • 股东以资产入股公司
  • 潽金融资租赁有限公司
  • 质量扣款入账
  • 华为鸿蒙系统怎么看安卓版本
  • 企业报税流程图
  • 企事业承包承租经营所得税税法
  • 固定资产占资产总额比例
  • php oci8
  • 官网下载的iso怎么用u盘安装
  • php注册功能的实现
  • vue3.0 element ui
  • npm ERR! code E404 在vscode安装插件时报错的解决方案
  • 本期销售的单位成本怎么算
  • gmt微调
  • vue路由守卫用法
  • 带有折扣的增值税怎么算
  • ps怎么把图片套入样机快捷键
  • 装卸费属于什么大类
  • 记账凭证的主要作用有
  • 高速过路费电子发票怎么开
  • 进项税额加计扣除5%账务处理
  • phpvue开发模式
  • 企业固定资产报废账务处理
  • mongodb聚合函数mapreduce
  • mongodb mongoose
  • 购买电脑的过程
  • 配电室增容验收标准
  • 固定资产清理是三栏式还是多栏式
  • 个税没有达到起征点能摇号吗
  • 用库存现金支付职工医药费用69元,会计人员
  • 找社保代理公司需要提供什么资料
  • 行业协会是怎么赚钱的
  • 收回发票会计分录
  • 税收滞纳金什么意思
  • 冲减上年度多计提所得税
  • 高新技术企业进项税加计扣除10%如何填企业所得税季报
  • win7硬盘问题导致windows无法启动
  • optimize system
  • wintogo.exe
  • watchdog. sys
  • 如何解决孩子多动
  • 超级管理员不能用winhello
  • openssl 用法
  • 怎么做win8系统
  • javascript中的数组可以存放任何类型的数据
  • node运行js文件
  • python3 urllib模块
  • Unity3D游戏开发pdf
  • require jquery
  • python pip版本更新
  • vue.js如何使用
  • unity怎么设置多个关卡
  • JavaScript onkeydown事件入门实例(键盘某个按键被按下)
  • 各种手机ui大全
  • 税务局核查研发费举措
  • 车价36万保险一般多少钱
  • 世界银行各国经济gdp动态
  • 福建省狱警招聘医生
  • 房屋赠与给子女要交多少税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设