vue常用插件有哪些,vue中使用组件

  vue常用插件有哪些,vue中使用组件

  在这篇文章中,边肖和大家分享了一个关于vue中插件和组件的区别和用法的总结。感兴趣的朋友可以借鉴一下。

  本教程的运行环境:windows7系统,VUE版本vue2.9.6,DELL G3电脑。

  

一、组件是什么

  回顾以前对组件的定义:

  组件是将图形和非图形的各种逻辑抽象成一个统一的概念(组件)来实现开发的模式。在Vue,每个。vue文件可以看作是一个组件。

  组件的优势

  降低整个系统的耦合度,在保持界面不变的情况下,可以替换不同的组件来快速完成需求,比如输入框,可以替换为日历、时间、范围等组件来具体实现。

  调试方便。因为整个系统是由组件组成的,当出现问题时,可以通过排除法直接移除组件,或者根据报告错误的组件快速定位问题。之所以能快速定位问题,是因为各个组件耦合度低,职责单一,所以逻辑比分析整个系统更简单。

  提高可维护性,因为每个组件都有单一的职责,而且组件在系统中被重用,通过优化代码可以获得系统的整体升级。

  

二、插件是什么

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

  添加全局方法或属性。例如vue定制元素

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

  通过全局混合添加一些组件选项。例如vue路由器

  添加Vue实例方法,通过将它们添加到Vue.prototype来实现

  一个提供自己的API和一个或多个上述功能的库。例如vue路由器

  

三、两者的区别

  两者的区别主要表现在以下几个方面:

  写作形式

  登记表

  使用场景

  编写形式

  编写组件

  写一个组件有很多种方式,最常见的是vue单文件的格式,而每。vue文件可以看作是一个组件。

  vue文件标准格式

  模板

  /模板

  脚本

  导出默认值{

  .

  }

  /脚本

  风格

  /风格

  我们也可以通过模板属性编写一个组件。如果有很多组件,我们可以在外部定义模板组件的内容。如果组件不多,我们可以直接写在template属性上。

  模板id=testComponent //组件显示的内容

  divcomponent!/div

  /模板

  Vue.component(componentA ,{

  模板:“#testComponent”

  Template: `divcomponent/div` //组件的内容至少可以是这种形式。

  })

  编写插件

  vue插件的实现应该公开一个安装方法。这个方法的第一个参数是Vue构造函数,第二个参数是可选的option对象。

  MyPlugin.install=function (Vue,options) {

  //1\.添加全局方法或属性

  Vue.myGlobalMethod=function () {

  //逻辑.

  }

  //2\.添加全局资源

  Vue.directive(my-directive ,{

  bind (el,binding,vnode,oldVnode) {

  //逻辑.

  }

  .

  })

  //3\.注入组件选项

  Vue.mixin({

  已创建:函数(){

  //逻辑.

  }

  .

  })

  //4\.添加实例方法

  vue . prototype . $ my method=function(method options){

  //逻辑.

  }

  }

  注册形式

  组件注册

  Vue组件注册主要分为全局注册和局部注册。

  全局注册通过Vue.component方法,第一个参数是组件的名称,第二个参数是传入的配置项。

  Vue.component(我的组件名称,{ /*.*/})

  本地注册只需要通过使用组件的components属性来注册组件。

  常量组件1={.} //定义一个组件,导出默认值{

  组件:{

  组件1 //本地注册

  }}

  插件注册

  的插件注册是由Vue.use()注册(安装)的,第一个参数是插件的名称,第二个参数是可选的配置项。

  Vue.use(插件名称,{/*.*/})

  请注意:

  注册插件时,需要在调用new Vue()启动应用程序之前完成。

  Vue.use会自动防止同一个插件注册多次,只注册一次。

  使用场景

  其实关于插件是什么的具体章节已经陈述过了,这里是一个总结。

  组件是用来组成你的App的业务模块,它的目标是App.vue

  插件是用来增强你的技术栈的功能模块,它的目标就是Vue本身。

  简单来说,插件是指对Vue的功能进行增强或补充。

  关于vue中插件和组件的区别和使用总结这篇文章就到这里了。关于vue中插件和组件之间的差异的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: