Vue组件化开发,全局组件和局部组件的尝试

组件的概念

通过组件化开发,解决代码的高耦合问题,增强可维护性,提高开发效率
组件(component) 是 Vue.js 最强大的功能之一。
Vue 中的组件化开发就是把网页的重复代码抽取出来 ,封装成一个个可复用的视图组件,然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活,可以极大的提高我们开发和维护的效率。
通常一套系统会以一棵嵌套的组件树的形式来组织:
在这里插入图片描述

全局组件与局部组件的使用

注意:组件名: 可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式 但 DOM 中只能使用横线分隔方式进行引用组件 官方强烈推荐组件名字母全小写且必须包含一个连字符(kebab-case); template:定义组件的视图模板 data :在组件中必须是一个函数
全局组件component-a的注册
在这里插入图片描述
局部组件component-b的注册

局部组件只能在id=app,Vue的控制内使用
在这里插入图片描述
组件的运用,全局组件也需要在Vue里面包着,标志了id=‘app’中
在这里插入图片描述
运行效果
在这里插入图片描述
总结
组件是可复用的 Vue 实例,不需要手动实例化
与 new Vue 接收相同的选项,例如 data 、 computed 、 watch 、 methods 等
组件的 data 选项必须是一个函数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值