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

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

article 2024/10/4 18:48:12

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

相关文章：

  • 初识Linux · 进程替换
  • 深度学习--自动化打标签
  • 10.1 10.3 图DFS 中等 207 Course Schedule 210 Course Schedule Ⅱ
  • 【算法】链表：160.相交链表（easy）+双指针
  • 在VirtualBox中安装OpenEuler操作系统保姆级教程
  • 爬虫——同步与异步加载
  • 【Docker从入门到进阶】05. 实战案例
  • Java高效编程（18）：优先使用组合而非继承
  • 宁夏众智科技OA办公系统存在SQL注入漏洞
  • HBase 性能优化 详解
  • GO语言深度探索：并发编程与高性能网络服务器实践
  • 一种简单安全的消息队列的C语言解决方案
  • CDGA|利用人工智能与边缘计算显著提升数据治理效率与效果的实践案例
  • 慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用（源码+文档+定制）
  • C++发邮件：如何轻松实现邮件自动化发送？
  • 828华为云征文｜华为云Flexus云服务器X实例部署 即时通讯IM聊天交友软件——高性能服务器实现120W并发连接
  • MySQL 支持行锁还是表锁？分别有哪些优缺点？破解数据库的锁之谜：MySQL行锁与表锁的博弈
  • index.html 调用 ajax
  • 【Bug】STM32F1的PB3和PB4无法正常输出
  • 【案例73】Uclient无法读取https地址添加应用