欢迎来到尧图网

客户服务关于我们

您的位置：首页 > 财经 > 产业 > uniapp学习（003-1 vue3学习 Part.1）

uniapp学习（003-1 vue3学习 Part.1）

2024/10/25 14:22:36 来源：https://blog.csdn.net/wang_book/article/details/142637741 浏览: 次关键词：uniapp学习（003-1 vue3学习 Part.1）

零基础入门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（内联样式）

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

相关资讯

热文排行

最新新闻

推荐新闻

热搜词

Java中并行流处理约10GB大日志文件 Python 异步编程：使用 `asyncio.to_thread` 和 `asyncio.Queue` 处理任务队列 Java学习Day52：金酬外护遭魔毒，圣显幽魂救本原(验证码补全，新增预约逻辑) OceanBase 2024发布会精华盘点，这些亮点不容错过 E/MicroMsg.SDK.WXMediaMessage:checkArgs fail,thumbData is invalid 图片资源太大导致分享失败 ProteinMPNN中的优化器封装类