组件-创建组件的方式1|学习笔记

简介: 快速学习组件-创建组件的方式1

开发者学堂课程【Vue.js 入门与实战:组件-创建组件的方式1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8174


组件-创建组件的方式1


内容介绍:

一、使用 Vue.extend 来创建全局的Vue组件

二、使用 Vue.component ('组件的名称',创建出来的组件模板对象)

三、总结

 

如果要使用组件,直接把组件的名称以 HTML 标签的形式引入到页面中即可。

 

一、使用 Vue.extend 来创建全局的 Vue 组件:

var com1=Vue.extend({  template: '

这是使用Vue.extend创建的组件

' //通过template属性,指定了组件要展示的HTML结构

 

二、使用 Vue.component ('组件的名称',创建出来的组件模板对象)

Vue.component ( ' myCom1',com1)

此时刷新,得到执行结果:

image.png

//如果要使用组件,直接,把组件额名称,以 HTML 标签的形式,引入到网页中,即可

我们要把模板对象注册为一个真正具有名称的一个组件,可以引用这种组件,可以利用条件形式。

 

三、总结

这就是创建组件的第一种方式,通过 vue.extend 来创建组件,这个流程分为两步:

1. 第一步:

直接调用 vue.extend 里面的配置对象,此时 component 就是组建展示的具体内容,这是 vue.extend 会返回一个组件的模板对象,然后再调用 Vue.component ,此时会把模板对象注册为一个真正具有名称的组件,之后在页面中可以直接引用这个名称。

2. 第二步:

如果使用 Vue.component 定义全局组件的时候,组建名称使用了驼峰,命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用-链接;

如果不使用驼峰,则直接拿名称来使用即可。

以上就是我们创建组件的第一种方式。

相关文章
|
Web App开发 监控 算法
详解 WebRTC 高音质低延时的背后 — AGC(自动增益控制)
本文将结合实例全面解析 WebRTC AGC 的基本框架,一起探索其基本原理、模式的差异、存在的问题以及优化方向。
详解 WebRTC 高音质低延时的背后 — AGC(自动增益控制)
|
存储 机器学习/深度学习 数据管理
震惊!Delta Lake 以非凡之力掌控表的多个版本,开启数据管理奇幻之旅
【8月更文挑战第27天】Delta Lake作为大数据领域的一种高效数据湖存储层,其版本管理功能确保了数据的可靠性与可追溯性。通过记录所有表更改的事务日志,在系统故障或误操作情况下可恢复至特定版本。不同版本的数据独立存储并标记唯一标识符,便于管理和对比。此外,Delta Lake还采用了诸如自动合并小文件、支持索引和分区等策略来优化查询性能。这些特性共同使得Delta Lake成为一种强大且灵活的数据版本管理工具,在数据仓库、机器学习等多种场景下展现出巨大价值。
114 0
星际争霸之小霸王之小蜜蜂(五)--为小蜜蜂降速
星际争霸之小霸王之小蜜蜂(五)--为小蜜蜂降速
|
测试技术
apipost自动化测试工具
创建一个测试流程
|
2天前
|
弹性计算 人工智能 安全
云上十五年——「弹性计算十五周年」系列客户故事(第二期)
阿里云弹性计算十五年深耕,以第九代ECS g9i实例引领算力革新。携手海尔三翼鸟、小鹏汽车、微帧科技等企业,实现性能跃升与成本优化,赋能AI、物联网、智能驾驶等前沿场景,共绘云端增长新图景。
|
8天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
7天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
6天前
|
云安全 人工智能 自然语言处理
阿里云x硅基流动:AI安全护栏助力构建可信模型生态
阿里云AI安全护栏:大模型的“智能过滤系统”。