Vue-组件(一)

Vue-组件(一)

什么是组件?

Web开发中组件其实就是页面组成的一部分,好比是电脑中的每一个元件(硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能及界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。

页面就是由一个个类似这样的部分组成的,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

前端组件化的核心思路就是将一个巨大复杂的东西拆分成一个个合理的小东西。

使用组件有什么好处?

提高开发效率

方便复用

简化调试步骤

提升整个项目的可维护性

便于协同开发

组件的特性

重用性

可定制性 --可设置参数和属性

互操作性 --多组件协同工作

高内聚,组件功能必须是完整的;

低耦合,代码独立不会和项目中其他代码发生冲突;

每一个组件都有自己清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用;

Vue中的组件?

Vue中的组件是一个自定义标签,Vue.js的编译器为它添加了特殊的功能;

组件注册?

全局注册,可以在任意模板中使用,使用之前要先注册;

Vue.component('custom-select', {

template:'

'

})

局部注册,在组件实例中通过选项对象注册,只在所注册的作用域,实例中使用;使用场景:一个页面可以创建 多个Vue实例,只能在当前挂载点管理的作用域中使用

new Vue({

el: '#app',

components: {

'custom-select': {

template:'

'

}

}

})

命名:

驼峰(camelCase)和烤串(kebab-case)

组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例之前注册了组件(此坑之前有好多同学踩过,别再问你的老师为什么了O(∩_∩)O哈哈~)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是组件? Web开发中组件其实就是页面组成的一部分,好比是电脑中的每一个元件(硬盘、键盘、鼠标),它是一个具有...
    L怪丫头阅读 1,715评论 0 1
  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,346评论 8 124
  • 作者,诗雨长河 不知什么时侯 还能有 那闹市的一片,静 心情拂绿,耳语一方...
    诗雨长河阅读 1,333评论 0 2
  • 时常都会这样想,自己是否应该在忙碌后怀疑自己,怀疑自己的路,怀疑自己的选择,这不是毫无自信的迷茫,而是自省的一个过...
    长安府尹阅读 2,532评论 0 0
  • “生活是走马观花的旅行,而我们正在路上。” 01. 前天,我的好朋友Y找我谈心了。她的开头是——“老梁”。每每说到...
    原来你是南方姑娘阅读 2,600评论 0 0

友情链接更多精彩内容