当前位置： 首页 > news >正文

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

news 2025/7/9 2:50:44

零基础入门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.mrgr.cn/news/39886.html

相关文章：

  • 使用RestTemplate调用EMQX API查询MQTT客户端列表信息
  • 什么是reactor以及其三种版本
  • vxe-grid给单元格加上触发事件
  • 快速幂算法
  • 【新闻转载】Storm-0501：勒索软件攻击扩展到混合云环境
  • 【Ubuntu】PlantUML工具 | 安装 | 语法 | 使用工具画序列图
  • 未来前端发展方向：深度探索与技术前瞻
  • VS2022 Git功能的使用
  • 【数据驱动预测控制2】Willems基本引理
  • Ubuntu开机进入紧急模式处理
  • 数据中心解决方案
  • 电影《749局》酷燃首映 苗苗神秘感大片释出氛围感拉满
  • CMU 10423 Generative AI：lec10（few-shot、提示工程、上下文学习）
  • 使用Python实现图形学的路径追踪算法
  • 序列化方式四——Hessian
  • zi2zi-chain: 中国书法字体图片生成和字体制作的一站式开发
  • 【Vue】vue2项目打包后部署刷新404，配置publicPath ./ 不生效问题
  • Windows开发工具使用技巧大揭秘：让编码效率翻倍的秘籍！
  • Linux线程标识获取
  • 官网：视觉是第一记忆，没有记忆点的官网设计是失败的。