第十六章 Vue组件化开发及组件局部/全局注册

目录

一、组件化

1.1. 组件概述

1.2. 语法高亮插件 ​编辑

1.3. 组件内部组成

1.4. 让组件支持 less

1.5. 组件注册的两种方式

二、局部注册

2.1. 使用描述

2.2. 脚手架工程变动的核心代码

2.2.1. 工程结构图

2.2.2. App.vue

2.2.3. WzxHeader.vue 

2.2.4. WzxMain.vue 

2.2.5. WzxFooter.vue 

2.3. 运行效果图 

三、全局注册 

3.1. 使用描述

3.2. 脚手架工程变动的核心代码

3.2.1. 工程结构图

3.2.2. main.js 

3.2.3. WzxButton.vue 

3.3. 运行效果图


一、组件化

1.1. 组件概述

① 组件化:一个页面可以拆分成多个组件,每个组件有着自己独立的结构、样式、行为。

好处:便于维护,利于复用 → 提升开发效率。

组件分类:普通组件、根组件。

② 根组件:整个应用最上层的组件,包裹所有普通小组件

App.vue 文件(单文件组件)的三个组成部分

1.2. 语法高亮插件 

1.3. 组件内部组成

组件内部由三部分组成:

template:结构 (有且只能一个根元素)

script: js逻辑

style: 样式 (可支持less,需要装包)

1.4. 让组件支持 less

(1) style标签,lang="less" 开启less功能

(2) 装包: yarn add less less-loader(控制台执行或者系统终端上执行改命令)

<template><!-- Vue2中,此处只能有一个div根结点,Vue3没有这个限制了 --><div id="App"><div class="box"></div></div><!-- 同一层级存在多个div节点会报错 --><!-- <div></div> -->
</template><script>
// 导出当前组件的配置项
// 里面可以提供 data methods computed watch 生命周期钩子等
export default {created () {console.log('我是created')},methods : {fn () {alert('你好')}}
}
</script><style lang="less">
/*让style支持less1. 给style加上lang="less"2. 安装依赖包 less less-loaderyarn add less less-loader -D (开发依赖包)
*/
.App {width: 400px;height: 400px;background-color: pink;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>

1.5. 组件注册的两种方式

1. 局部注册:只能在注册的组件内使用

① 创建 .vue 文件 (三个组成部分)

② 在使用的组件内导入并注册

2. 全局注册:所有组件内都能使用

二、局部注册

2.1. 使用描述

使用:

当成 html 标签使用 `<组件名></组件名>`

注意:

组件名规范 → 大驼峰命名法,如:WzxHeader

2.2. 脚手架工程变动的核心代码

2.2.1. 工程结构图

2.2.2. App.vue

<template><div id="App"><!-- 头部组件 --><WzxHeader></WzxHeader><!-- 主体组件 --><WzxMain></WzxMain><!-- 底部组件 --><WzxFooter></WzxFooter></div>
</template><script>
import WzxHeader from './components/WzxHeader.vue'
import WzxMain from './components/WzxMain.vue'
import WzxFooter from './components/WzxFooter.vue'
export default {components: {// 同名的情况下可以省略,两种写法都可以// 组件名: 组件对象WzxHeader: WzxHeader,WzxMain,WzxFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>

2.2.3. WzxHeader.vue 

<template><div class="wzx-header">我是wzx-header</div>
</template><script>export default {}
</script><style lang="less">
.wzx-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
</style>

2.2.4. WzxMain.vue 

<template><div class="wzx-main">我是wzx-main</div>
</template><script>export default {}
</script><style lang="less">
.wzx-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0 ;
}
</style>

2.2.5. WzxFooter.vue 

<template><div class="wzx-main">我是wzx-main</div>
</template><script>export default {}
</script><style lang="less">
.wzx-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0 ;
}
</style>

2.3. 运行效果图 

三、全局注册 

3.1. 使用描述

所有组件内都能使用

① 创建 .vue 文件 (三个组成部分)

② 在main.js 中进行全局注册

使用:

当成 html 标签使用 `<组件名></组件名>`

注意:

组件名规范 → 大驼峰命名法,如:WzxHeader

技巧:

一般都用局部注册,如果发现确实是通用组件,再定义到全局。比如某个样式的按钮所有页面都在使用。

3.2. 脚手架工程变动的核心代码

3.2.1. 工程结构图

3.2.2. main.js 

<template><div id="App"><!-- 头部组件 --><WzxHeader></WzxHeader><!-- 主体组件 --><WzxMain></WzxMain><!-- 底部组件 --><WzxFooter></WzxFooter></div>
</template><script>
// 导入需要注册的组件
import WzxHeader from './components/WzxHeader.vue'
import WzxMain from './components/WzxMain.vue'
import WzxFooter from './components/WzxFooter.vue'
export default {// 局部注册components: {// 同名的情况下可以省略,两种写法都可以// 组件名: 组件对象WzxHeader: WzxHeader,WzxMain,WzxFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
.App .box {width: 100px;height: 100px;background-color: skyblue;
}
</style>

3.2.3. WzxButton.vue 

<template><button class="wzx-button">通用按钮</button>
</template><script>export default {}
</script><style lang="less">
.wzx-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;
}
</style>

3.3. 运行效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/58397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel斜线表头

检验数据验证对象 鼠标放在检验数据 验证对象中间&#xff0c;altenter 之后空格 选中格子&#xff0c;右键单元格格式&#xff0c; 完成 如果是需要多分割&#xff0c;操作一样&#xff0c;在画斜线的时候会有区别&#xff0c;在插入里面用直线画斜线即可 在表格插入的时…

【python】OpenCV—Connected Components

文章目录 1、任务描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于 python opencv 的连通分量标记和分析函数&#xff0c;分割车牌中的数字、号码、分隔符 cv2.connectedComponentscv2.connectedComponentsWithStatscv2.connectedComponents…

日期选择简化版今日、本周、本月、本季度、本年

function 未来之窗_时间_现在() {let date new Date(),year date.getFullYear(), //获取完整的年份(4位)month date.getMonth() 1, //获取当前月份(0-11,0代表1月)strDate date.getDate() // 获取当前日(1-31),小时 date.getHours(),分钟 date.getMinutes();if (month &…

基于安卓Android的健康饮食系统APP(源码+文档+部署+讲解)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 会持续一直更新下去 有问必答 一键收藏关注不迷路 源码获取&#xff1a;https://pan.baidu.com/s/1aRpOv3f2sdtVYOogQjb8jg?pwdjf1d 提取码: jf1d &#…

【Unity基础】初识UI Toolkit - 编辑器UI

&#xff08;本文所需图片在文章上面的资源中&#xff0c;点击“立即下载”。&#xff09; 本文介绍了如何通过UI工具包&#xff08;UI Toolkit&#xff09;来创建一个编辑器UI。 一、创建项目 1. 打开Unity创建一个空项目&#xff08;任意模板&#xff09;&#xff0c;这里我…

【网络】传输层协议TCP

目录 四位首部长度 序号 捎带应答 标记位 超时重传机制 连接管理机制&#xff08;RST标记位&#xff09; 三次握手及四次挥手的原因 TCP的全称是传输控制协议&#xff08;Transmission Control Protocol&#xff09;&#xff0c;也就是说&#xff0c;对于放到TCP发送缓冲…

docker基础篇(尚硅谷)

学习链接 docker1️⃣基础篇&#xff08;零基小白&#xff09; - 语雀文档 (即本篇) Docker与微服务实战&#xff08;基础篇&#xff09; Docker与微服务实战&#xff08;高级篇&#xff09;- 【上】 Docker与微服务实战&#xff08;高级篇&#xff09;- 【下】 文章目录 学习…

Spark RDD

概念 RDD是一种抽象&#xff0c;是Spark对于分布式数据集的抽象&#xff0c;它用于囊括所有内存中和磁盘中的分布式数据实体 RDD 与 数组对比 对比项数组RDD概念类型数据结构实体数据模型抽象数据跨度单机进程内跨进程、跨计算节点数据构成数组元素数据分片(Partitions)数据…

OmicsTools软件和R语言分析环境安装配置答疑汇总最新版

OmicsTools软件和R语言分析环境安装配置答疑汇总 前言提示 我开发了一款本地电脑无限使用的零代码生信数据分析作图神器电脑软件OmicsTools&#xff0c;欢迎大家使用进行生物医学科研数据分析和作图&#xff0c;不需要学编程写代码&#xff0c;分析次数没有限制&#xff0c;可…

java web调试时清理当前网址的缓存

java web调试时清理当前网址的缓存 背景 开发后端接口的时候&#xff0c;出现页面已经重新部署启动。但页面报错404的问题。询问前端同学后&#xff0c;发现是因为没有清理页面缓存导致的。特别在此记录。 清理页面缓存 操作方式 chrome浏览器 F12 > 应用 > 存储 &g…

分布式 ID 生成策略(二)

在上一篇文章&#xff0c;分布式 ID 生成策略&#xff08;一&#xff09;&#xff0c;我们讨论了基于数据库的 ID 池策略&#xff0c;今天来看另一种实现&#xff0c;基于雪花算法的分布式 ID 生成策略。 如图所示&#xff0c;我们用 41 位时间戳 12 位机器 ID 10 位序列号&a…

解决edge浏览器无法同步问题

有时候电脑没带&#xff0c;但是浏览器没有同步很烦恼。chrome浏览器的同步很及时在多设备之间能很好使用。但是edge浏览器同步没反应。 在这里插入图片描述 解决方法&#xff1a; 一、进入edge浏览器点击图像会显示未同步。点击“管理个人资料”&#xff0c;进入后点击同步&…

【机器学习】14. 集成学习 ensemble: bagging, boosting, 随机森林 random forest

集成学习 ensemble: bagging, boosting, 随机森林 random forest 1. Ensemble 整体认知2. 使用Ensemble的原因3. 构建Ensemble 的方法4. Bagging&#xff08;bootstrap aggregation&#xff09;特点 5. BoostingAdaBoost整体算法思路 6. 比较7. 随机森林 1. Ensemble 整体认知 …

记录一次更新idea

一、官网下载安装包&#xff0c;拿所需版本 二、链接下载&#xff0c; 逐行仔细读readme.txt 三、执行script(unstall<->install)vbs、-javaagent:更改时记得

低代码平台如何通过AI赋能,实现更智能的业务自动化?

引言 随着数字化转型的加速推进&#xff0c;企业在日常运营中面临的业务复杂性与日俱增。如何快速响应市场需求&#xff0c;优化流程&#xff0c;并降低开发成本&#xff0c;成为各行业共同关注的核心问题。低代码平台作为一种能够快速构建应用程序的工具&#xff0c;因其可视化…

实现企业微信打卡月报与简道云的高效集成

实现企业微信打卡月报与简道云的高效集成 企业微信打卡月报同步到简道云 在企业管理中&#xff0c;员工的考勤数据是至关重要的一环。为了实现高效的数据管理和分析&#xff0c;我们需要将企业微信的打卡月报数据集成到简道云平台。本文将分享一个具体的技术案例&#xff0c;展…

【Redis】常见基本全局命令

一、Redis俩大核心命令 由于Redis是以键值对的形式进行数据存取&#xff0c;自然就离不开不断的存储和获取&#xff0c;而其所对应的命令则是set和get&#xff0c;如此说来二者为Redis的核心基础命令也不为过。 作用&#xff1a;用于存储Stirng类型的数据 返回&#xff1a;当…

GPT避坑指南:如何辨别逆向、AZ、OpenAI官转

市面上有些说自己是官转&#xff0c;一刀只需要1块甚至几毛钱&#xff0c;并声称官方倍率的&#xff0c;很大可能就是使用的是 逆向或Azure。 如何鉴别逆向 逆向的种类很多&#xff0c;主要分为3类 逆向不知名A| 镜像站或偷的 key。成本约等于0&#xff0c;调用聊天数据可能在…

【PnP】详细公式推导,使用DLT直接线性变换法求解相机外参

文章目录 &#x1f680;PnP1️⃣ 求解不考虑尺度的解2️⃣ 恢复解的尺度3️⃣ 另一种解法 &#x1f680;PnP PnP(Perspective-n-Point)是求解3D到2D点相机外参的算法。PnP算法有DLT直接线性变换、P3P三对点估计位姿、EPnP(Efficient PnP)、BA(Bundle Adjustment)光速法平差。这…

数据库基础介绍

前言&#xff1a; 在当今信息化、数字化的时代&#xff0c;数据库是支撑一切信息系统的核心基础设施。无论是金融机构的账户管理、电商平台的商品库存&#xff0c;还是社交媒体的用户信息&#xff0c;数据库都在背后扮演着关键角色数据库不仅用于存储和管理数据&#xff0c;更…