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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。