uniapp学习(003-1 vue3学习 Part.1)

news2024/12/23 8:32:59

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第11p-第p14的内容


文章目录

    • vue3使用介绍
    • 插值表达式例子
      • 时间戳
      • 随机数
      • 输出函数的值
    • ref响应式数据变量
    • v-bind 绑定
      • 手写一个轮播图
      • 绑定 class
      • 绑定style(内联样式)

vue3使用介绍

进入vue3官方文档
在这里插入图片描述
官网
在这里插入图片描述

vue3使用的是组合式api
在这里插入图片描述

创建vue应用
在这里插入图片描述

插值表达式例子

在这里插入图片描述

在这里插入图片描述

我们使用 3.2版本后的语法糖
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

时间戳

在这里插入图片描述
在这里插入图片描述

随机数

在这里插入图片描述

在这里插入图片描述

输出函数的值

必须加括号 否则如下
在这里插入图片描述

在这里插入图片描述

加括号之后
在这里插入图片描述
在这里插入图片描述

ref响应式数据变量

预期是每秒变化一次 这里一直是6
在这里插入图片描述
在这里插入图片描述
我们使用响应式ref就可以了
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
使用 变量.value可以得到数据

在这里插入图片描述
在这里插入图片描述

字符串、数组、对象 都可以定义
在这里插入图片描述

在这里插入图片描述

可以修改值的内容
在这里插入图片描述

这里主要使用ref ref的实现原理也是 reactive
层级较深可以使用reactive,尤其是后续需要用到数据监视的一些数据,推荐使用reactive
在这里插入图片描述

v-bind 绑定

v-bind:属性 可以简写成 :属性
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

手写一个轮播图

使用取余 但是时间长了 会溢出,但是呢,js不会把页面退出去,只会给你返回个undefined,然后继续
在这里插入图片描述
在这里插入图片描述

不加v-bind的话 false只是个字符串
在这里插入图片描述

绑定 class

在这里插入图片描述
在这里插入图片描述
动态变化class
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
我们一般使用三目表达式
在这里插入图片描述
在这里插入图片描述

绑定style(内联样式)

在这里插入图片描述


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

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

相关文章

PCL CropBox 过滤给定立方体内的点云数据

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 点云裁剪 2.1.2 可视化原始点云和裁剪后的点云 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接: PCL点云算法与项目实战案例汇总(长…

Python办公自动化案例:批量修改Word文件中的段落格式

案例:Python实现批量修改Word文件中的段落格式。 在处理大量Word文档时,经常需要批量修改这些文档的格式,比如统一段落格式,以提升文档的一致性和专业性。使用Python来实现这一任务可以极大地提高工作效率,特别是当涉及到数百或数千个文档时。Python通过第三方库如python…

【C#】CacheManager:高效的 .NET 缓存管理库

在现代应用开发中,缓存是提升性能和降低数据库负载的重要技术手段。无论是 Web 应用、桌面应用还是移动应用,缓存都能够帮助减少重复的数据查询和处理,从而提高系统的响应速度。然而,管理缓存并不简单,尤其是当你需要处…

《RabbitMQ篇》Centos7安装RabbitMQ

安装RabbitMQ 安装包网盘下载地址 链接:https://pan.baidu.com/s/1bG_nP0iCdAejkctFp1QztQ?pwd4mlw 先上传安装包到服务器(erlang-23.3.4.11-1.el7.x86_64.rpm和rabbitmq-server-3.9.16-1.el7.noarch.rpm)然后使用指令安装 # 安装 erlang r…

掌握 JVM 垃圾收集线程:简化 VM 选项

垃圾收集阶段对于任何 Java 应用程序都至关重要。主要目标是保持高吞吐量和低延迟之间的平衡。通过配置垃圾收集器,我们可以提高性能,或者至少推动应用程序朝着特定的方向发展。 垃圾收集周期越短越好。因此,分配给垃圾收集器的资源越多&…

昇思MindSpore进阶教程--下沉模式

大家好,我是刘明,明志科技创始人,华为昇思MindSpore布道师。 技术上主攻前端开发、鸿蒙开发和AI算法研究。 努力为大家带来持续的技术分享,如果你也喜欢我的文章,就点个关注吧 正文开始 昇腾芯片集成了AICORE和AICPU等…

C#自定义工具类-数组工具类

目录 数组工具类基本操作 1.排序:升序,降序 2.查找 1)查找最值:最大值,最小值 2)查找满足条件的单个对象 3)查找满足条件的所有对象 4)选取数组中所有对象的某一字段 完整代…

河南做网站与SEO:如何提升搜索引擎排名

河南做网站与SEO:如何提升搜索引擎排名 在当今数字化时代,越来越多的企业意识到互联网的重要性,特别是在河南这样一个快速发展的地区,建立一个优秀的网站已经成为企业发展的必要条件。而在建立网站的同时,SEO&#xff…

--- java数据结构 map set ---

java中map 和 set的底层实现是通过搜索树和哈希函桶来实现 搜索树 二叉搜索树有叫二叉排序树 他具有以下的特点 若存在左节点,那么他左节点的值一定小于根节点 若存在右节点,那么他右节点的值一定大于根节点 它的左右子树也是搜索树 对他进行中序…

leetcode热题100.最长公共子序列

题目 1143. 最长公共子序列 - 力扣(LeetCode) 给定两个字符串 text1 和 text2,返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 ,返回 0 。 一个字符串的 子序列 是指这样一个新的字符串:它是由原…

SOMEIP_ETS_143: SD_Request_non_existing_ServiceID

测试目的: 验证DUT能够拒绝一个请求不存在的服务ID(ServiceID)的SubscribeEventgroup消息,并以SubscribeEventgroupNAck作为响应。 描述 本测试用例旨在确保DUT遵循SOME/IP协议,当接收到一个请求不存在服务ID的Subs…

RS485串口通信:【图文详讲】

RS485,RS的意义为Recommended Standard的缩写,也就是推荐标准,是一种常用的半双工-异步-串行通信总线。半双工的意思就是两者通信时,同一时刻,只能由其中一方发送,另一方只能接收,不可以同时收发…

vue3 antdv3/4 Modal显示一个提示,内容换行显示。

1、官网地址: Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 2、显示个信息: Modal.info({title: This is a notification message,content: h(div, {}, [h(p, some messages...some messages...),h(p, some …

基于解压缩模块的JPEG同步重压缩检测论文学习

一、论文基本信息: 论文题目:基于解压缩模块的JPEG同步重压缩检测 作者:王金伟1 ,胡冰涛1 ,张家伟1 ,马 宾2 ,罗向阳3 (1.南京信息工程大学计算机学院、网络空间安全学院&#xf…

Linux-L11-查看本机ip地址

linux查看ip地址 查看自己的IP地址使用 ip 命令:使用 ifconfig 命令使用 hostname 命令:使用 nmcli 命令 查看某个特定接口的IP查看公网IP地址 在Linux系统中,查看自己的IP地址可以通过多种方式实现,这里提供几种常用的方法&#…

Stable Diffusion绘画 | LCM模型:实现秒出图

在过往,不管使用 SD 还是 MJ,生成一张图片起码要等上10秒。 而现在,有了 LCM 技术的加持,已经能做到秒出图,甚至是实时出图。 LCM(潜空间一致性模型) 是由 清华大学信息科学技术研究院 研发的大模型,它最…

鸿蒙 如何退出 APP

terminateSelf() 停止Ability自身 在EntryAbility中这么使用 this.context.terminateSelf()在Pages页面中这么使用 import { common } from kit.AbilityKit (getContext(this) as common.UIAbilityContext)?.terminateSelf() 也可以直接封装: import common f…

【GreenHills】GHS的Run-Time检查功能

【更多软件使用问题请点击亿道电子官方网站】 一、文档背景 在编写代码时,内存检查的重要性不容忽视。内存是程序运行的核心资源之一,负责存储程序运行所需的数据。由于内存资源的有限性和操作的复杂性,内存错误常常会直接导致程序崩溃、性…

华为开源自研AI框架昇思MindSpore应用案例:基于MindSpore框架的Swin Transformer

如果你对MindSpore感兴趣,可以关注昇思MindSpore社区 模型简介 模型背景 Swin Transfromer在2021年首次发表于论文《Swin Transformer: Hierarchical Vision Transformer using Shifted Windows》,目前已用于图像分割、分类等计算机视觉领域的各项任务…

如何搭建医疗陪诊平台?基于互联网医院系统源码的开发技术详解

本篇文章,小编将深入探讨医疗陪诊平台的搭建过程,尤其是基于互联网医院系统源码的开发技术,以期为有志于此领域的开发者提供参考。 一、选择合适的互联网医院系统源码 在搭建医疗陪诊平台时,选择合适的互联网医院系统源码至关重…