百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 博客教程 > 正文

二、Uni-app + Vue3 页面组件介绍

connygpt 2024-08-20 14:21 10 浏览

uni-app 项目中,页面有两种:.vue 和 .nvue 文件。两者差异在于 .vue 文件使用 webview 进行渲染,.nvue 会使用原生进行渲染。

一个页面就是一个符合 vue 的单文件组件(SFC)规范的 .vue 或 .nvue 文件。

页面文件为实现多端兼容,综合编译速度、运行性能等因素,依旧遵循 vue 单文件组件规范。

组件特点:

  • 组件是视图层的基本组成单元。
  • 组件是一个单独且可复用的功能模块的封装。

每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

  • 组件名称由尖括号包裹,称为标签,它有开始标签和结束标签。结束标签的<后面用/来表示结束。结束标签也称为闭合标签。如下面示例的<component-name>是开始标签,</component-name>是结束标签。
  • 在开始标签和结束标签之间,称为组件内容。如下面示例的content
  • 开始标签上可以写属性,属性可以有多个,多个属性之间用空格分割。如下面示例的property1property2。注意闭合标签上不能写属性。
  • 每个属性通过=赋值。如下面的示例中,属性property1的值被设为字符串value

uni-app 支持的组件分为:

  1. vue 组件。支持 vue SFC 规范
  2. 小程序自定义组件。组件规范不是 vue 规范,而是小程序规范。

日常开发来讲,推荐使用vue组件。uni-app支持小程序组件主要是为了兼容更多生态资源。

什么是 vue SFC 规范?

我们开发的时候创建的 .vue 文件,用于表示一个单一组件。SFC 的全拼为 Single-File-Components,翻译为中文就是单文件组件。

一个完整的单文件组件,顶级标签有 template、script、style,还可以允许添加可选的自定义块:

<template>
  <view class="content">
    组件内容
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello')
</script>

<style>
	/* 样式设置 */
</style>
<custom1>
  This could be e.g. documentation for the component.
</custom1>

vue-loader 会解析文件,提取每个语言块。能够支持使用非默认语言,如 css 预处理器,通过设置语言块的 lang 属性,如:

<style lang="sass">
  /* write Sass! */
</style>

Vue3 一大特点:能够更好地支持 typeScript ,因此:

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello')
</script>

setup 是 vue3 的语法糖,使用 setup 可以自动导出定义的变量和方法。

模板<template>

  • template 里面包含该组件的 html 结构,可以在该组件内使用其他组件,如果使用 setup 语法糖,导入的组件无需注册可以直接使用,如果不使用 setup 语法糖,就需要在 components 内注册组件。
  • 每个 .vue 只能有一个匿名的 template 标签,插槽处使用的 template 需要加 v-slot 。
  • 不同于 vue2 template 标签内可以放多个根标签。

脚本<script>

  • 不同于 vue2 ,每个 .vue 文件,可以有多个 script ,但是必须保证使用语法一致,不可以一个 js,一个是 ts 。
  • vue3 中可以使用选项式 API,也可以使用组合式 API 。
  • vue3 新增 setup 语法糖,可以大大简化代码。

样式<style>

  • 默认匹配的是 .css ,也可以通过 lang 指定扩展类型 。
  • 一个 .vue 文件可以包含多个 style 标签,可以设置不同的 lang 属性。
  • style 标签可以有 scoped 或 module 属性。

自定义块

可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求,例如 <docs> 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应地块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。

小程序组件有哪些?

  • 视图容器:view、scroll-view、swiper、match-media、cover-image 等
  • 基础内容:icon、text、rich-text、progress
  • 表单组件:button、checkbox、editor、from、input、picker、switch、textarea、label、radio等
  • 页面路由跳转:navigator
  • 媒体组件:audio、camera、image、video、live-player、live-pusher
  • 地图组件:map
  • 画布:canvas
  • webview :web-view
  • 广告:ad、ad-draw
  • 页面属性配置:custom-tab-bar、navigation-bar、page-meta

前端同学基本没有没开发过小程序的,简单介绍下,就不详细介绍具体用法了。

相关推荐

go语言,国密SM系列加密算法实现,emmansun/gmsm

多年以来在程序开发中我们进行数据加密的方式都是使用国外的一些加密算法,但是这几年使用国密sm加密算法的越来越多,要求使用sm加密的越来越多了。今天简单介绍下go语言开发中sm系列加密算法的使用。关于s...

每日分享- GO 编程项目装饰器模式怎么实现

在Go语言中实现装饰器模式,可以通过函数闭包或者结构体嵌套的方式来实现。下面分别介绍这两种方式的实现方法和举例说明:1函数闭包方式实现装饰器模式使用函数闭包方式实现装饰器模式,可以将被装饰的函数作为...

IOC-golang 的 AOP 原理与应用

AOP与IOC的关系AOP(面向切面编程)是一种编程设计思想,旨在通过拦截业务过程的切面,实现特定模块化的能力,降低业务逻辑之间的耦合度。这一思路在众多知名项目中都有实践。例如Spring...

go语言并发原语RWMutex实现原理及闭坑指南

1.RWMutex常用方法Lock/UnlockRLock/RUnlockRLocker为读操作返回一个Locker接口的对象2.RWMutex使用方法funcmain(){varc...

使用Go从零实现一个Redis

最近翻阅了几本跟Redis相关的书籍,比如《Redis设计与实现第二版》和钱老师的《Redis深度历险:核心原理与应用实践》,想着Redis的核心功能无非就是操作数据嘛,就像做一个Go语言版的Red...

Go实现独立的Web服务器

一.Web服务器说起web服务器,相信大家都比较熟悉,比如Nginx、Apache、Tomcat等,通过代理或者反向代理方式为用户提供服务。如果使用这些组件,则需要部署Web服务器、项目代码等,而且...

go语言实现优雅退出:graceful shutdown

为什么需要优雅退出?程序又是如何退出的?如果不进行“优雅退出”,任由没有处理的直接退出,会造成什么结果?来看看程序退出时发生了什么,还有如何处理go语言的优雅的退出。程序退出程序运行过程中如果收到了系...

Go语言实现连接MySql基础操作

在Go中,可以使用database/sql包来连接和操作MySQL数据库。以下是一个简单的示例程序,它演示了如何连接MySQL数据库并执行查询操作:packagemainimpo...

go map实现原理

map介绍其实map是一种HashMap,表面上看它只有键值对结构,实际上在存储键值对的过程中涉及到了数组和链表。HashMap之所以高效,是因为其结合了顺序存储(数组)和链式存储(链表)两种存储结构...

Go语言利用反射来实现json序列化和反序列化

代码示例:packagemainimport("encoding/json""fmt""reflect")typePerso...

了解Go语言的map底层实现原理,助力高效编程!

Go语言的map是一种哈希表结构,底层是通过散列表来实现的。每个map元素都包括一个键和一个值,其中键必须是可以进行相等性比较的类型,比如string、int等。在Go语言中,map可以用make函数...

Go语言中如何实现JWT

什么JWTJWT(JSONWebToken)是一种开放标准(RFC7519),定义了一种在各方之间安全传输信息的简洁方式。这些信息可以被验证和信任,因为它们是数字签名的。JWT由三部分组成,用....

Go语言实现一个简单生产者消费者模型

简介:介绍生产者消费者模型,及go简单实现的demo。一、生产者消费者模型生产者消费者模型:某个模块(函数等〉负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类、函数、协程、线...

用Go实现一个状态机

工作中,很多同学会用到状态机,例如对一个工单进行创建、编辑、审核,在执行新动作前,要检查能否从当前状态流转到下一个状态。对这种需求,我们怎么实现呢?数组在Go设计模式(22)-状态模式中说过,简单的...

用Go实现网络流量解析和行为检测引擎

摘要能够实现网络协议解析和分析的工具有很多,最有名使用最多的是基于图形化界面的Wireshark,除了能够实现网络实时抓包,还能够离线分析Pcap包文件,虽然它通常用于手动分析网络数据包,但也支...