位置: 编程技术 - 正文

实例教学如何写vue插件(教学实例分析怎么写)

编辑:rootadmin

推荐整理分享实例教学如何写vue插件(教学实例分析怎么写),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:实例式教学策略,教学实例是什么意思?,教学实例是什么意思?,实例教学如何写评语,实例教学如何写评语,教学实例分析怎么写,实例教学如何写论文,实例教学如何写论文,内容如对您有帮助,希望把文章链接给更多的朋友!

在学习之前,先问问自己,为什么要编写vue的插件。

在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框。如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件的需求。

说完需求,就来看看具体实现。目前我尝试了两种不一样的插件编写的方法,逐个介绍。

这是我的项目目录,大致的结构解释这样,尽量简单,容易理解。

一个是loading插件,一个是toast插件,不同的地方在于:loading插件是作为组件引入使用,而toast插件是直接添加在挂载点里,通过方法改变状态调用的。

目前使用起来是酱紫的:

toast插件

toast文件下有两个文件,后缀为vue的文件就是这个插件的骨架,js文件一个是将这个骨架放入Vue全局中,并写明操作逻辑。

可以看一下toast.vue的内容:

这里面主要的内容只有两个,决定是否显示的show和显示什么内容的message。

粗看这里,有没有发现什么问题?

这个文件中并没有props属性,也就是无论是show也好,message也好,就没有办法通过父子组件通信的方式进行修改,那他们是怎么正确处理的呢。别急,来看他的配置文件。

index.js:

这里的逻辑大致可以分成这么几步:

创建一个空对象,这个对象就是日后要使用到的插件的名字。此外,这个对象中要有一个install的函数。使用vue的extend方法创建一个插件的构造函数(可以看做创建了一个vue的子类),实例化该子类,之后的所有操作都可以通过这个子类完成。之后再Vue的原型上添加一个共用的方法。

这里需要着重提的是Vue.extend()。举个例子,我们日常使用vue编写组件是这个样子的:

这是全局组件的注册方法,但其实这是一个语法糖,真正的运行过程是这样的:

Vue.extend会返回一个对象,按照大多数资料上提及的,也可以说是返回一个Vue的子类,既然是子类,就没有办法直接通过他使用Vue原型上的方法,所以需要new一个实例出来使用。

在代码里console.log(instance)

得出的是这样的结果:

可以看到$el:div.toast

也就是toast组件模板的根节点。

疑惑的是,我不知道为什么要创建一个空的div节点,并把这个实例挂载在上面。我尝试注释这段代码,但是运行会报错。

实例教学如何写vue插件(教学实例分析怎么写)

查找这个错误的原因,貌似是因为

这里面的instance.$el的问题,那好,我们console下这个看看。WTF!!!!结果居然是undefined。

那接着

和上一张图片比对一下,发现了什么?对,$el消失了,换句话说在我注释了

这句话之后,挂载点也不存在了。接着我试着改了一下这句:

$el又神奇的回来了………………

暂时没有发现这种改动有什么问题,可以和上面一样运行。但无论如何,这也就是说instance实例必须挂载在一个节点上才能进行后续操作。

之后的代码就简单了,无非是在Vue的原型上添加一个改变插件状态的方法。之后导出这个对象。

接下来就是怎么使用的问题了。来看看main.js是怎么写的:

这样就可以在其他vue文件中直接使用了,像这样:

通过在methods中增加一个方法控制写在Vue原型上的$toast对toast组件进行操作。

这样toast组件的编写过程就结束了,可以看到一开始gif图里的效果。

loading插件

经过上一个插件的讲解,这一部分就不会那么细致了,毕竟大多数都没有什么不同,我只指出不一样的地方。

这个就只是一个模板,传入两个父组件的数据控制显示效果。

那再来看一下该插件的配置文件:

这个和taoat的插件相比,简单了很多,依然是一个空对象,里面有一个install方法,然后在全局注册了一个组件。

比较

那介绍了这两种不同的插件编写方法,貌似没有什么不一样啊,真的是这样么?

来看一下完整的main.js和app.vue这两个文件:

可以看出来,loading是显示的写在app.vue模板里的,而toast并没有作为一个组件写入,仅仅是通过一个方法控制显示。

来看一下html结构和vue工具给出的结构:

看出来了么,toast插件没有在挂载点里面,而是独立存在的,也就是说当执行

之后,该插件就是生成好的了,之后的所有操作无非就是显示或者隐藏的问题了。

Vue+Vux项目实践完整代码 提供完整的路由,services`````````````-----------------------------------------------------------------------------------------------------------------------------------------------------------

vue2.x+webpack快速搭建前端项目框架详解 一、本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的

vue 添加vux的代码讲解 简介Vux(读音[v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-

标签: 教学实例分析怎么写

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

上一篇:VueJs使用Amaze ui调整列表和内容页面(vue alain)

下一篇:Vue+Vux项目实践完整代码(vue实战案例)

  • 销售商品的差价怎么算
  • 工商年报资产状况可以都填0吗
  • 计入固定资产和其他资产
  • 2021年超市发票税率是多少
  • 免租期房租怎么做会计分录
  • 发票该如何打印
  • 应付票据与应付账款
  • 印花税是当月交当月的吗
  • T3现金流量表怎么删除
  • 增值税留抵税额计入什么科目
  • 财务费用利息收入借方表示什么
  • 被投资方亏损怎么处理
  • 公司注销固定资产清理需要开票吗
  • 税务需要申报吗
  • 销项税额转出税额怎么做账?
  • 老项目简易征收可以用进项抵扣吗
  • 未抵扣的进项税可以留底多久
  • 外地预缴的企业所得税可以退吗
  • 所得税费用一年交几次
  • 售后需要品控吗
  • 坏账准备年底有余额吗
  • 增值税进项余额月末转吗
  • 个人银行卡转公账怎么转
  • 业务费用包干制
  • 期末调汇会计分录
  • 每个月的股利怎么计提?
  • 电脑开机无启动
  • 进口货物可以退回吗
  • 网络平台上进行网络营销
  • 一个集团的分公司干过活再去另一个分公司会被发现吗
  • 存货报废会计分录例题
  • 蝴蝶兰的养殖方法和注意事项 盆栽蝴蝶兰烂根
  • 【安装 】
  • php dicom
  • 海关滞报金可以税前扣除吗 江苏
  • 公司代缴个税在工资里工资表怎么填
  • 计算机视觉算法
  • js 跳转网页
  • 20分钟,使用Amazon SageMaker快速搭建属于自己的AIGC应用
  • 存货采购成本有余额吗
  • 成本票不够怎么交税
  • 燃气管道安装费和暖气管道安装费两个的欠条怎么写
  • 淘宝天猫开票是普票还是专票
  • 资金托管账户的钱能查到吗
  • 运输发票抵扣税额怎么算
  • 装修工程一般质保几年
  • SQLserver2008数据库Excel数据导入语句
  • 公司首次申报个人所得税
  • 增值税的视同销售行为是有哪些?
  • 以前年度损益科目编码
  • 长期股权投资中级会计例题
  • 附加税 减免
  • 建筑业预缴税款怎么退税
  • 支付维修基金放什么科目
  • 有存货的公司
  • mysql数据库中关于作为临时
  • mysql通过my.cnf修改默认字符集为utf-8的方法和注意事项
  • win7传真和扫描
  • 清理的快捷键是什么
  • 宏基笔记本一键恢复系统
  • win8删除所有文件
  • linux远程登录命令ssh
  • dae是什么文件
  • windows8如何设置电脑锁屏时间
  • win10搜索功能不好用
  • win7如何打开windows功能
  • Win7系统打印机共享无法保存打印机设置0x000006d9
  • win 7怎么办
  • win8如何安装软件
  • Linux 压缩某个文件夹的实现方法
  • nodejs 代码加密
  • jQuery的extend方法【三种】
  • virtualbox no bootable medium
  • 使用image控件显示图片
  • web前端入门教程
  • 安卓启动器修改
  • pycharm使用教程2022
  • 定额发票查询入口在哪里
  • 国税局宁夏税务
  • 昆明学院领导班子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设