Uni-app + Vue3 页面组件介绍

开发 前端
一个页面就是一个符合 Vue 的单文件组件(SFC)规范的 .Vue 或 .Nvue 文件。页面文件为实现多端兼容,综合编译速度、运行性能等因素,依旧遵循Vue 单文件组件规范。

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。

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

责任编辑:姜华 来源: 今日头条
相关推荐

2022-08-15 09:23:18

Uni-appVue-router

2022-07-28 08:26:18

Vue3Uni-appVite

2021-09-28 09:30:18

uni-appVue 3.0uniCloud

2024-02-01 09:10:04

页面引导工具Vue3

2020-12-01 08:34:31

Vue3组件实践

2021-05-18 07:51:37

Suspense组件Vue3

2021-12-01 08:11:44

Vue3 插件Vue应用

2022-07-27 08:40:06

父子组件VUE3

2023-04-02 10:06:24

组件vue3sign2.

2023-04-27 11:07:24

Setup语法糖Vue3

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2024-03-19 08:35:30

Vue3添加水印维护版权标识

2020-09-19 21:15:26

Composition

2024-01-23 09:15:33

Vue3组件拖拽组件内容编辑

2022-09-20 11:00:14

Vue3滚动组件

2022-07-12 08:14:15

vue3refIsRef

2020-03-25 18:23:07

Vue2Vue3组件

2021-12-02 05:50:35

Vue3 插件Vue应用

2024-03-13 08:37:18

Vue3Suspense异步组件
点赞
收藏

51CTO技术栈公众号