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,一经查实,立即删除!

相关文章

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

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

Redis-配置文件详解

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

docker安装向量数据库milvus

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

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;但它有许多优点&…

【三十一】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;当检测到…

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

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

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

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

【linux-IMX6ULL-定时器-GPT-串口配置流程-思路】

目录 1. 定时器配置流程1.1 EPIT定时器简介1.2 定时器1(epit1)的配置流程1.3 配置代码(寄存器版本)1.4 定时器-配合按键消抖1.4.1 实现原理1.4.2 代码实现&#xff08;寄存器版&#xff09; 2. GPT定时器实现高精度延时2.1 延时原理分析2.2 代码实现 3. UART串口配置流程3.1 UA…

微信小程序按钮去除边框线

通常我们去掉按钮边框直接设置 border:0 但是在小程序中无效&#xff0c;设置outline:none也没用&#xff0c;当然可能你会说加权重&#xff1b;试过了无效 实际上该样式是在伪元素::after内&#xff0c;主要你检查css 还看不到有这个关系&#xff0c;鹅厂就是坑多 类样式::…

半小时搞懂STM32面经知识点——IIC

1.IIC 1.1什么是IIC&#xff1f; 同步半双工通信协议&#xff0c;适用于小数据和短距离传输。 1.2 IIC需要几条线&#xff1f; IIC总共有2条通信总线&#xff08;SDA,SCL&#xff09;&#xff0c;SCL为时钟同步线&#xff0c;用于主机和从机间数据同步操作&#xff1b;SDA为…

【密评】 | 商用密码应用安全性评估从业人员考核题库(9/58)

Hill密码是重要古典密码之一&#xff0c;其加密的核心思想的是&#xff08;&#xff09;。 A.线性变换 B.非线性变换 C.循环移位 D.移位 著名的Kerckhoff原则是指&#xff08;&#xff09;。 A.系统的保密性不但依赖于对加密体制或算法的保密&#xff0c;而且依赖于密钥 B.系统…

【计算机网络】数据链路层的功能

数据链路层的基本功能&#xff1a; 封装成帧透明传输差错检测 数据链路层使用的信道主要有两种 点对点信道——PPP协议广播信道——CSMA/CD协议(有线局域网)、CSMA/CA协议(无线局域网) 数据链路层所处的地位 从图中可以看出&#xff0c;数据从主机H1送到主机H2需要在路径中…

论文笔记模版

1. 摘要 1.1 背景 1.2 挑战 1.3 提出新方法 1.4 贡献 2. 引言 2.1 背景&#xff08;引出问题&#xff09; ①介绍大背景&#xff1a; ② 应用场景&#xff1a; ③ 介绍主题&#xff1a; 2.2 引出挑战 一般用图表来展现出我们的挑战&#xff08;直观&#xff0c;解决什…

echarts环形图 legend文字过长显示...鼠标移动上展示全称

legend: {type: scroll,orient: vertical,x: left,y: bottom,top: "42%",left: 13%,data: this.dutyNames,textStyle: { color: #fff },triggerEvent: true,tooltip: {show: true,trigger: item,//鼠标移动上去展示全称},formatter: function (params) {var val &qu…

HTML五彩缤纷的爱心

写在前面 小编准备了一个五彩缤纷的爱心&#xff0c;送给各位小美女们~ 在桌面创建一个.txt文本文件&#xff0c;把代码复制进去&#xff0c;将后缀.txt改为.html&#xff0c;然后就可以双击运行啦&#xff01; HTML简介 HTML&#xff08;超文本标记语言&#xff09;是一种…

C++——二叉树搜索树

前面写了初阶数据结构——二叉树&#xff1b;本文内容是来对它来进行结尾 目录 一概念 二实现 2.1查找 2.2插入 2.3删除 完整源代码 三二叉树的应用 四二叉搜索树的性能分析 五二叉搜索树相关的面试题 一概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树…