第十六章 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;在插入里面用直线画斜线即可 在表格插入的时…

HTML5 应用程序缓存

HTML5 应用程序缓存 HTML5 应用程序缓存(Application Cache)是一种离线缓存机制,允许Web应用程序在用户设备上存储资源副本,以便在没有网络连接时仍然可以访问。这种机制提高了Web应用的可靠性和用户体验,尤其适用于移动设备和低带宽环境。 工作原理 HTML5 应用程序缓存…

中阳智能投资系统:量化科技引领未来投资之路

在全球金融市场竞争激烈的大背景下&#xff0c;量化科技逐渐成为机构投资者和个人投资者的核心工具。中阳智能投资系统以数据驱动策略为核心&#xff0c;通过精准的模型算法与自动化交易技术&#xff0c;为用户提供全方位的智能投资服务。本文将探讨中阳智能投资系统的独特优势…

【Mac】安装 F5-TTS

1、下载项目 项目地址&#xff1a;【GitHub】 SWivid F5-TTS 2、创建并激活 Python 虚拟环境 # 创建 Python 虚拟环境 userMac F5-TTS-main % python3 -m venv f5-tts# 激活进入 Python 虚拟环境 userMac F5-TTS-main % source f5-tts/bin/activate (f5-tts) userrMac F5-TT…

【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)数据…

算法训练(leetcode)二刷第十一天 | 144. 二叉树的前序遍历、145. 二叉树的后序遍历、94. 二叉树的中序遍历、102. 二叉树的层序遍历

刷题记录 144. 二叉树的前序遍历思路一&#xff1a;递归前序遍历思路二&#xff1a;迭代前序遍历思路三&#xff1a;统一迭代法 145. 二叉树的后序遍历思路一&#xff1a;递归后序遍历思路二&#xff1a;迭代后序遍历思路三&#xff1a;统一迭代法 94. 二叉树的中序遍历思路一&…

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

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

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

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

PyTorch的基础教程

以下是PyTorch的基础教程&#xff0c;包括安装步骤以及一个简单的入门Demo。 一、PyTorch安装 安装Anaconda Anaconda是一个流行的Python发行版&#xff0c;包含了大量的科学计算库。访问Anaconda官网&#xff0c;选择适合操作系统的版本进行下载和安装。在安装过程中&#xf…

分布式 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:更改时记得

Vue背景图片自适应大屏与小屏

1&#xff0c;父绝子相 效果是台式看的更多&#xff0c;笔记本看部分。但是图片不会变形 <div class"father" style"width:100%; position:relative"> <img src"test.png" class"son" style"width:1920px; position:a…