小程序学习06——uniapp组件常规引入和easycom引入语法

目录

一  组件注册

1.1 组件全局注册

1.2 组件全局引入

1.3 组件局部引入

页面引入组件方式

1.3.1 传统vue规范:

1.3.2 通过uni-app的easycom

二 组件的类型

2.1 基础组件列表


一  组件注册

1.1 组件全局注册

(a)新建compoents文件夹用于存放组件文件

(b)在myCompoents文件夹中新建组件compoent

1.2 组件全局引入

(a)main.js 里进行全局导入和注册

(b)在index.vue 里,template中以标签的形式直接使用组件

(c)即可在页面中进行使用,可以在不同页面中直接使用

1.3 组件局部引入

页面引入组件方式

1.3.1 传统vue规范:

(安装、引用、注册)在 index.vue 页面中,通过 import 方式引入组件 ,在 components 选项中定义你想要使用的组件。

import AComponent from '../../myComponents/component.vue'

1.3.2 通过uni-app的easycom

将组件引入精简为一步。

  • easycom是自动开启的,不需要手动开启;

  • 不管components目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。

路径规范指

(a)安装在项目根目录的components目录下,并符合components/组件名称/组件名称.vue

(b)安装在uni_modules下,路径为uni_modules/插件ID/components/组件名称/组件名称.vue

工程目录:

	
┌─components
│  └─navbar
│    └─navbar.vue      符合easycom规范的组件
└─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件└─uni_modules└─uni-list└─components└─uni-list└─ uni-list.vue

二 组件的类型

Uniapp组件主要分为两类:

  1. 内置组件:由Uniapp框架提供的组件,涵盖了常见的UI元素和功能,如按钮(button)、输入框(input)、图片(image)等。

  2. 自定义组件:开发者根据实际需求自行创建的组件,可以包含复杂的逻辑和样式。

2.1 基础组件列表

基础组件分为以下十几大类:

视图容器(View Container):

组件名说明
view视图容器,类似于HTML中的div
scroll-view可滚动视图容器
swiper滑块视图容器,比如用于轮播banner
match-media屏幕动态适配组件,比如窄屏上不显示某些内容
movable-area可拖动区域
movable-view可移动的视图容器,在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view可覆盖在原生组件的上的文本组件
cover-image可覆盖在原生组件的上的图片组件

基础内容(Basic Content):

组件名说明
icon图标
text文字
rich-text富文本显示组件
progress进度条

表单组件(Form):

标签名说明
button按钮
checkbox多项选择器
editor富文本输入框
form表单
input输入框
label标签
picker弹出式列表选择器
picker-view窗体内嵌式列表选择器
radio单项选择器
slider滑动选择器
switch开关选择器
textarea多行文本输入框

路由与页面跳转(Navigation):

组件名说明
navigator页面链接。类似于HTML中的a标签

媒体组件(Media):

组件名说明
audio音频
camera相机
image图片
video视频

地图(Map):

组件名说明
map地图

。。。

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

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

相关文章

【时时三省】(C语言基础)常见的动态内存错误2

山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 对非动态开辟空间内存使用free释放 示例: 这个arr数组是在栈上的 *p指向的就是arr 对非动态空间也用了free ferr只能在动态开辟空间使用 使用free释放一块动态开辟空间的一部分…

3D高斯点云CUDA版本数据制作与demo运行

0. 简介 关于UCloud(优刻得)旗下的compshare算力共享平台 UCloud(优刻得)是中国知名的中立云计算服务商,科创板上市,中国云计算第一股。 Compshare GPU算力平台隶属于UCloud,专注于提供高性价4090算力资源,配备独立IP,…

【游戏设计原理】46 - 魔杖

幻想,人们可以通过多种形式来引发,比如文字,图片,绘画,语言等,但游戏与以上这些形式的区别,正如游戏与其他艺术形式的区别一样,游戏作为一种艺术和娱乐形式,其独特之处在…

基于Java的敬老院管理系统的设计和实现【源码+文档+部署讲解】

基于Java的敬老院管理系统设计和实现 摘 要 新世纪以来,互联网与计算机技术的快速发展,我国也迈进网络化、集成化的信息大数据时代。对于大众而言,单机应用早已成为过去,传统模式早已满足不了当下办公生活等多种领域的需求,在一台电脑上不联网的软件少之又少&#x…

NLP 技术的突破与未来:从词嵌入到 Transformer

在过去的十年中,自然语言处理(NLP)经历了深刻的技术变革。从早期的统计方法到深度学习的应用,再到如今Transformer架构的普及,NLP 的发展不仅提高了模型的性能,还扩展了其在不同领域中的应用边界。 1. 词嵌…

Git快速入门(一)·Git软件的安装以及GitHubDesktop客户端的安装

目录 1. 概述 1.1 版本控制介绍 1.1.1 集中式版本控制 1.1.2 分布式版本控制 1.1.3 多人协作开发 2. 安装Git 3. 安装GitHubDesktop客户端 1. 概述 Git 是一个免费的、开源的分布式版本控制系统。它能够快速高效地处理从小型到大型的各种项目。Git 具有易于学习…

数据挖掘——神经网络分类

神经网络分类 神经网络分类人工神经网络多层人工神经网络 误差反向传播(BP)网络后向传播算法 神经网络分类 人工神经网络 人工神经网络主要由大量的神经元以及它们之间的有向连接构成。包含三个方面: 神经元的激活规则 主要是指神经元输入…

PDF文件提示-文档无法打印-的解决办法

背景信息 下载了几个签名的PDF文件,想要打印纸质版,结果打印时 Adobe Acrobat Reader 提示【文档无法打印】: 解决办法 网上的方案是使用老版本的PDF阅读器, 因为无法打印只是一个标识而已。 PDF文件不能打印的五种解决方案-zhihu 这些方…

docker容器间基于bridge双向通信

前面介绍了通过link实现容器间的单向通信: docker容器间基于Link单向通信-CSDN博客 情景概述 通过前面已经知道了设置link来达到容器间通过容器名称双向通信,那是不是可以通过每个容器都设置link来达到双向通信,这种方式实现起来太麻烦&…

前端如何判断多个请求完毕

在前端开发中,经常会遇到需要同时发起多个异步请求,并在所有请求都完成后再进行下一步操作的情况。 这里有几个常用的方法来实现这一需求: 使用 Promise.all() Promise.all() 方法接收一个 Promise 对象的数组作为参数,当所有的…

云备份项目--服务端编写

文章目录 7. 数据管理模块7.1 如何设计7.2 完整的类 8. 热点管理8.1 如何设计8.2 完整的类 9. 业务处理模块9.1 如何设计9.2 完整的类9.3 测试9.3.1 测试展示功能 完整的代码–gitee链接 7. 数据管理模块 TODO: 读写锁?普通锁? 7.1 如何设计 需要管理…

什么是打流,怎么用iperf3打流

什么是打流 在网络安全和黑灰产领域,“打流”具有不同的含义,常用于形容通过技术手段制造流量假象或发起流量攻击。 流量攻击(DDoS)中的“打流”: “打流”指向目标服务器或网络发起 大规模的数据请求,造…

exam0-试卷整理

exam0-试卷整理 2010,2013是梦开始的地方,大概率会出原题的 2010 2013 2015 大题 manchester RIP更新 说出ISO与TCP/IP模型的相同点和不同点(8分) 相似: 两者都有层次,网络专业人员都需要知道二者&a…

数据挖掘入门介绍及代码实战

什么是数据挖掘? 数据挖掘(Data Mining)是从大量数据中通过算法和技术提取有价值知识的过程,常被称为“从数据中发现知识”(KDD,Knowledge Discovery in Databases)。它包括从数据库中发现隐藏…

ACL---访问控制列表---策略

在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit(允许)deny(拒绝) 1.访问控制: 在路由器流量流入或者流出的接口上匹配流量,之后执行设定好的动作---permit&#xf…

element输入框及表单元素自定义前缀

如图所示&#xff1a; <el-input class"custom-input" placeholder"请输入" prefix-icon"prefix" v-model"form.name" clearable></el-input> :deep(.custom-input) {.el-input__icon {display: inline-block;width: 40…

C#调用Lua

目录 xLua导入 打包工具导入 单例基类导入与AB包管理器导入 Lua解析器 文件加载与重定向 Lua解析器管理器 全局变量获取 全局函数获取 对于无参数无返回值 对于有参数有返回值 对于多返回值 对于变长参数 完整代码 List与Dictionary映射Table 类映射Table 接口映射…

第13章 汇编语言--- 实践项目:简单的计算器

汇编语言是一种低级编程语言&#xff0c;它几乎是一对一地对应于计算机的机器码指令。编写汇编代码时&#xff0c;程序员需要直接处理硬件资源如寄存器和内存地址。下面我将为你概述如何创建一个简单的计算器程序&#xff0c;并提供一些伪代码作为示例。 项目目标 设计一个简…

【能用】springboot集成netty,解码器处理数据过长的问题

netty解码器处理数据过长的问题 处理数据过长的详细流程 当第一次 decode 调用时&#xff0c;如果数据不完整&#xff0c;decode 方法会直接返回&#xff0c;Netty 会保留 ByteBuf 中的数据。后续数据到达时&#xff0c;会再次调用 decode 方法&#xff0c;ByteBuf 会累积新到…

渗透测试-非寻常漏洞案例

声明 本文章所分享内容仅用于网络安全技术讨论&#xff0c;切勿用于违法途径&#xff0c;所有渗透都需获取授权&#xff0c;违者后果自行承担&#xff0c;与本号及作者无关&#xff0c;请谨记守法. 此文章不允许未经授权转发至除先知社区以外的其它平台&#xff01;&#xff0…