5. 简单说一说uniapp中的语法吧

前言

如果你 知道Vue3并且对Vue3的语法有一定了解,请跳过这一章,由于后续项目主要是基于Vue3+TypeScript,因此提前简单概述一些Vue3的基础语法~

本文的目的是 期望通过对本文的阅读后能对Vue3的每个语法有一个简单的印象,至少要知道文中常见语法的作用是什么,算是进行比较初级的扫盲吧;

概述

阅读时间:约7~10分钟;

本文重点:

  • 通过本文你可以知道一些Vue3中的基本语法与结构;
  • 大致知道一下常见语法的作用是什么;

正文

看一个例子吧,我们通过示例代码进行说明,例子如下:

<template><view class="app-container"><u-skeleton :rows="3" :title="false" loading /></view>
</template><script lang="ts" setup>
import { ref, type Ref } from 'vue';
const swiperList1 = ref(['https://cdn.uviewui.com/uview/swiper/swiper1.png','https://cdn.uviewui.com/uview/swiper/swiper2.png','https://cdn.uviewui.com/uview/swiper/swiper3.png',
]);const loading = ref(false);function refresh() {loading.value = true;setTimeout(() => {loading.value = false;}, 1000);
}
</script><style scoped lang="scss">
.app-container {position: absolute;top: 0;right: 0;bottom: 0;left: 0;
}
</style>

这段代码是一个简单的uniapp中的某个页面,从整体结构上看看代码可以分成三部分,分别是由template,script,style三块组成(PS:这三块可以约等于视同前端领域中的HTML+Javascript+CSS)

template

template,类似于传统前端中的html部分,它主要的作用是制作页面的骨架、结构

思考一个场景,当我们前端拿到一张设计稿后首先应该做什么?肯定是先思考页面的整体结构,比如整体是上下结构还是左右结构,只有结构上思考完善了才考虑接下来的部分,否则一旦存在没有考虑到的情况,当某个功能点出现html结构不支持的时候那问题就大了...

静态显示

什么是静态显示?在开发中存在少部分页面是纯静态展示页面的,这部分页面不需要与后台交互,这类写法比较简单,直接写就是了

<template><view class="app-container"><view class="app-title">这是本页面的标题</view><view class="app-content">这是本页面的内容</view></view>
</template>

很简单,直接写,不需要其他配置

动态显示

和静态显示对应,动态显示是绝大多数页面上的显示方式,比如用户名显示,这个取决于登录用户是哪一个;

动态显示需要和script结合使用,在script存储变量名字,然后将变量嵌入到template里,进而变量的值是什么,页面上则显示什么;

双花括号

嵌入的核心语法:双花括号 语法,它的作用就是将变量嵌入到template中,如下

<template><view class="app-container"><view class="app-title">这是本页面的标题</view><view class="app-content">{{ text }}</view></view>
</template><script lang="ts" setup>
const text="这是本页面的内容"
</script>

此时显示在页面上的text的区域文字是:这是本页面的内容

v-if(条件渲染)

除了正常的显示外,有这么一种情况,有时候需要对显示的内容进行一个判断,如果有值显示内容,如果没有值则显示“暂无内容”,这种v-if就起到作用了;

它书写的位置在template里的标签上,如下:

<template><view class="app-container"><view v-if="swiperList1.length>2">{{ text }}</view><view v-else-if="swiperList1.length===1">{{ text }}</view><view v-else>无显示内容</view></view>
</template><script lang="ts" setup>
import { ref } from 'vue';const text="这是本页面的内容"
const swiperList1 = ref(['https://cdn.uviewui.com/uview/swiper/swiper1.png','https://cdn.uviewui.com/uview/swiper/swiper2.png','https://cdn.uviewui.com/uview/swiper/swiper3.png',
]);
</script>

这里出现了关于v-if的一套用法,一共三个,分别是:v-if,v-else-if,v-else,含义也很好理解,哪个后面的条件符合就显示那个内容,如果都不满足,则显示v-else里面的

v-for(列表渲染)

除了条件渲染,还有这么种场景,页面上需要重复显示一列内容,如新闻列表,对于这种我们可以使用v-for进行重复显示

<template><view class="app-container"><view class="app-title">这是本页面的标题</view><view v-for="item in newsList" :key="item.id">{{ item.title }}</view></view>
</template><script lang="ts" setup>
import { ref, type Ref } from 'vue';const newsList = ref([{title: '新闻标题1',id: 1,},{title: '新闻标题2',id: 2,},{title: '新闻标题3',id: 3,},
]);</script>

这样就可以快速显示三条信息

script

script,类似于传统前端中的Javascript部分,它的主要作用是进行逻辑处理,如动态获取页面内容

ref

ref,作用是 将变量的值定义为实时可变的,以上方双花括号为例

<template><view class="app-container"><view class="app-content">{{ text }}</view><view class="app-content">{{ text1 }}</view></view>
</template><script lang="ts" setup>import { ref } from 'vue';const text="这是本页面的内容";const text1=ref("这是本页面的内容");
</script>

这两个最大的区别是,text1显示的内容,会随着其值的变化而变化,text则是不会,举个场景例子吧;

我们页面上显示的内容往往是通过api从后端获取的,通过ref定义的值显示在页面上时,它能随时动态改变,比如

<template><view class="app-container"><view class="app-content">{{ text }}</view><view class="app-content">{{ text1 }}</view></view>
</template><script lang="ts" setup>import { ref } from 'vue';let text="这是本页面的内容";const text1=ref("这是本页面的内容");setTimeout(()=>{// 修改值必须修改其value值,不能直接text1="xxxx"text1.value="修改后的值"// 不使用ref则不需要使用到value,可直接修改text="修改后的值"},2000)
</script>

2秒后,text1显示在页面上的值会从"这是本页面的内容"变成"修改后的值", 如果不使用ref则不管怎么修改text,显示在页面上的值仍然是"这是本页面的内容";

computed

计算属性,computed,其作用是被动的,动态的,改变值,可能不太好理解,举个例子吧,比如我们要显示的是列表中一共有多少行,如果使用ref那么我们需要这么写

<template><view class="app-container"><view class="app-title">{{ number }}</view></view>
</template><script lang="ts" setup>
import { ref, computed } from 'vue';const data: any = ref([]);
const number = ref(0);setTimeout(() => {data.value = [{name: '1',value: 1,},{name: '2',value: 2,},];number.value = data.value.length;
}, 2000);
</script>

如果使用computed就简单一些,它能被动的,根据值进行动态变化

<template><view class="app-container"><view class="app-title">{{ number }}</view></view>
</template><script lang="ts" setup>
import { ref, computed } from 'vue';const data: any = ref([]);
const number = computed(() => data.value.length);setTimeout(() => {data.value = [{name: '1',value: 1,},{name: '2',value: 2,},];
}, 2000);
</script>

watch

和computed不同,watch的目的是主动的监听某一个变量,当这个变量发生变化时以便我们主动的做出一些应对措施;

<template><view class="app-container"><view class="app-title">{{ number }}</view></view>
</template><script lang="ts" setup>
import { ref, watch } from 'vue';const data: any = ref([]);
const number = ref(0);setTimeout(() => {data.value = [{name: '1',value: 1,},{name: '2',value: 2,},];
}, 2000);// 监听data的变化
watch(() => data.length,(value) => {// 具体的应对措施number.value = value.length;}
);
</script>

style

style,类似于传统前端中的CSS部分,它的主要作用是将骨架template以更美观的形式展现到用户面前,和传统CSS不同的是,在Vue中的style是支持三方库的,比如sass,less

lang

其作用是指的css的类型,比如指的style中的语法是less


<style lang="less">
.app-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.app-title {font-size: 24px;font-weight: bold;
}
</style>

值得注意的是,如果想要使用这些三方库并没有天然的集成在里面,使用前要进行安装

scoped

scoped,其作用是防止样式污染,比如,我们在a页面存在一个样式名叫做"app-container",然后在b页面也存在一个样式名叫做"app-container",这是该怎么办?通常有两种做法

  • 第一种:修改掉其中一个样式名;
  • 第二种:都加上scoped,加上scoped之后,Vue会主动的给每一个样式加上唯一的标签,使其不会污染到别的页面里面的样式;
<style scoped>
.app-container {display: flex;justify-content: center;align-items: center;height: 100vh;
}.app-title {font-size: 24px;font-weight: bold;
}
</style>

本章小结

本章简单的分享了一下在Vue3中常用到的几种语法,通过本章我们知道了:

  • 一个正常的Vue或者说uniapp页面通常包含三部分,别分是:template,script,style;
  • template约等于传统前端开发的html,是页面的骨架;
  • script约等于传统前端开发的Javascript,是页面上的逻辑;
  • style约等于传统前端开发中的css,是用来丰富页面上显示效果;

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

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

相关文章

nacos配置中心

配置不成功的时候需要放开服务器的8848端口号不然报错 父工程 <!-- springCloud --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.ver…

Flink面试整理-Flink的监控和日志收集

在 Apache Flink 中,监控和日志收集对于维护系统的健康、性能优化和故障诊断非常重要。以下是 Flink 监控和日志收集的几个关键方面: 监控 Metrics System:Flink 提供了一个全面的指标(Metrics)系统,可以收集和报告各种性能指标,如吞吐量、延迟、资源利用率等。支持的指…

二叉搜索数使用,底层原理及代码实现

1:二叉搜索树的定义 二叉搜索树的底层是一个二叉链表 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树 &#xff0c;或者是具有以下性质的二叉树 : 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所…

Redis-配置文件详解

Redis配置文件详解 units单位 配置大小单位&#xff0c;开头定义基本度量单位&#xff0c;只支持bytes&#xff0c;大小写不敏感。 INCLUDES Redis只有一个配置文件&#xff0c;如果多个人进行开发维护&#xff0c;那么就需要多个这样的配置文件&#xff0c;这时候多个配置 文…

docker安装向量数据库milvus

Miluvs Milvus 向量数据库能够帮助用户轻松应对海量非结构化数据(图片 / 视频 / 语音 / 文本)检索。 单节点 Milvus 可以在秒内完成十亿级的向量搜索,分布式架构亦能满足用户的水平扩展需求。 Milvus 向量数据库的应用场景包括:互联网娱乐(图片搜索 / 视频搜索)、新零售…

【K8s】Kubectl 常用命令梳理

Kubectl常用命令梳理 下面包含大致涵盖命令只需要替换对应的Pod \ NameSpace 查看 命名空间 是 ’worktest2‘ 下 名字包括 ’todo‘的所有 Pod kubectl -n worktest2 get pod|grep todo查看 所有命名空间下 名字包括 ’todo‘的所有 Pod kubectl get pods --all-namespace…

MATLAB基础—系统环境

1.MATLAB操作界面的组成 (1)MATLAB主窗口&#xff08;红色&#xff09; MATLAB主窗口是MATLAB的程序窗口&#xff0c;他除了嵌入一功能窗口外&#xff0c;主要包括功能区(1)&#xff0c;快速访问工具栏(2)&#xff0c;和当前文件夹工具栏(3)。 在功能区提供了三个选项卡&#…

浅析vue3自定义指令

vue3中可以像下面这样使用自定义指令。 这里我们只是定义了一个vFoucs变量&#xff0c;vue怎么知道这是一个指令呢&#xff1f; 这是因为约定大于配置&#xff0c;vue3中有这样一个约定&#xff08;截图来自官方文档&#xff09;&#xff1a; 注意这里说的是驼峰命令&#x…

机器学习案例:加州房产价格(一)

参考链接&#xff1a;https://hands1ml.apachecn.org/2/ 假设你是被一家地产公司雇佣的数据科学家&#xff0c;现在需要做一些工作。 公司所给的数据集是StatLib 的加州房产价格数据集。这个数据集是基于 1990 年加州普查的数据。数据已经有点老&#xff0c;但它有许多优点&…

查看ubuntu当前路径的剩余存储空间

要查看Ubuntu当前路径所在磁盘分区的剩余存储空间&#xff0c;应该使用df命令&#xff0c;而不是du命令&#xff0c;因为df命令能显示磁盘分区的使用情况&#xff0c;包括总容量、已用空间和可用空间。为了使输出更易于阅读&#xff0c;可以加上-h选项。如果你还想知道特定挂载…

Mysql中的DML

insert语法 指定字段添加数据&#xff1a;insert into 表名&#xff08;字段名1&#xff0c;字段名 2&#xff09;values &#xff08;值1&#xff0c;值2&#xff09; 全部字段添加数据&#xff1a;insert into 表名 values &#xff08;值1&#xff0c;值2&#xff0c;...&…

doc 链接

阿豪 Android Framework 坂田民工framework Android Framework_坂田民工的博客-CSDN博客 Harmony HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网 zh-cn/release-notes/OpenHarmony-v4.0-release.md OpenHarmony/docs - Gitee.com yi诺千金 yi诺千金_An…

【三十一】springboot+easyExcel实现多文件导出压缩包

互相交流入口地址 整体目录&#xff1a; 【一】springboot整合swagger 【二】springboot整合自定义swagger 【三】springboot整合token 【四】springboot整合mybatis-plus 【五】springboot整合mybatis-plus 【六】springboot整合redis 【七】springboot整合AOP实现日志操作 【…

【数字IC设计】芯片设计中的RDC

RDC问题定义 在芯片设计中,RDC是reset domain crossing 的缩写,类似于CDC(clock domain crossing),由于现在SOC芯片是有很多ECUs组成,为了使整个系统能够快速从复位中恢复, 用户希望SOC里面每个ECU模块都可以有自己独立的异步复位信号,这样可以在出问题的时候只复位有错…

【计算机网络篇】数据链路层(8)共享式以太网的退避算法和信道利用率

文章目录 &#x1f6f8;共享式以太网的退避算法&#x1f95a;截断二进制指数算法 &#x1f354;共享式以太网的信道利用率 &#x1f6f8;共享式以太网的退避算法 在使用CSMA/CD协议的共享总线以太网中&#xff0c;正在发送帧的站点一边发送帧一边检测碰撞&#xff0c;当检测到…

1080:余数相同问题

1080&#xff1a;余数相同问题 时间限制: 1000 ms 内存限制: 65536 KB 提交数:74558 通过数: 49412 【题目描述】 已知三个正整数a&#xff0c;b&#xff0c;c。现有一个大于1的整数x&#xff0c;将其作为除数分别除a&#xff0c;b&#xff0c;c&#xff0c;得到的…

【Cesium】Cesium核心类、坐标系与着色器简介

核心类&#xff1a; Viewer: Viewer 是 Cesium 中最基本的视图容器&#xff0c;用于显示地球、地图、三维场景等。它提供了创建和管理场景的功能&#xff0c;可以配置视图的各种属性和行为。 Scene: Scene 是 Cesium 中的核心类之一&#xff0c;代表了一个三维场景&#xff0c…

react如何拿输入框的值

在React中获取输入框的值可以通过以下几个步骤实现&#xff1a; 首先&#xff0c;在React组件的状态中定义一个变量来存储输入框的值。可以使用useState钩子函数来创建一个状态变量。 在输入框的onChange事件中&#xff0c;通过事件对象获取输入框的值&#xff0c;并将其更新到…

道可云元宇宙每日资讯|苹果:通过自研芯片在云端推出AI功能

道可云元宇宙每日简报&#xff08;2024年5月11日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 苹果&#xff1a;通过自研芯片在云端推出AI功能 5月10日&#xff0c;有消息称苹果公司今年将通过配备自有处理器的数据中心提供一些即将推出的人工智能功能&#xff…

PopClip for Mac 激活版:让文本处理更高效

还在为繁琐的文本处理而烦恼吗&#xff1f;PopClip for Mac来帮您解决&#xff01;这款神器般的文本处理工具&#xff0c;能让您轻松应对各种文本处理任务。无论是写作、编程还是日常办公&#xff0c;PopClip for Mac都能助您一臂之力&#xff0c;让您的文本处理更高效、更便捷…