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

news/2024/10/4 8:39:39/

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

总时长 23:40:00 共116P

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

文章目录

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

vue3_12">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.ppmy.cn/news/1534317.html

相关文章

解决银河麒麟操作系统中`sudo su`命令切换用户失败的问题

解决银河麒麟操作系统中`sudo su`命令切换用户失败的问题

解决银河麒麟操作系统中sudo su命令切换用户失败的问题 1、问题描述2、问题分析3、问题解决办法步骤 1：修改/usr/bin/sudo的权限步骤 2：修改/etc/sudoers的权限 🌼The Begin🌼点点关注，收藏不迷路🌼 在银河…
阅读更多...
【C++并发入门】摄像头帧率计算和多线程相机读取（上）：并发基础概念和代码实现

【C++并发入门】摄像头帧率计算和多线程相机读取（上）：并发基础概念和代码实现

前言 高帧率摄像头往往应用在很多opencv项目中，今天就来通过简单计算摄像头帧率，抛出一个单线程读取摄像头会遇到的问题，同时提出一种解决方案，使用多线程对摄像头进行读取。同时本文介绍了线程入门的基础知识，讲解了…
阅读更多...
动手学深度学习（李沐）PyTorch 第 5 章 深度学习计算

动手学深度学习（李沐）PyTorch 第 5 章 深度学习计算

5.1 层和块 为了实现这些复杂的网络，我们引入了神经网络块的概念。 块（block）可以描述单个层、由多个层组成的组件或整个模型本身。 使用块进行抽象的一个好处是可以将一些块组合成更大的组件， 这一过程通常是递归的，…
阅读更多...
计算机网络--HTTP协议

计算机网络--HTTP协议

1.TCP,UDP的对比图 TCP:面向连接的,可靠的,字节流服务; UDP:无连接的,不可靠的,数据报服务; 2.补充网络部分的其他知识点 1).复位报文段 在某些特殊条件下， TCP 连接的一端会向另一端发送携带 RST 标志的报文段，即复位报文段，已通知对方…
阅读更多...
[Go语言快速上手]函数和包

[Go语言快速上手]函数和包

目录 一、Go中的函数 函数声明 多个返回值 可变参数 匿名函数 值传递和地址传递 函数执行顺序（init函数） 二、Go中的包 基本语法 主要包（main package） 导入其他包 包的作用域 包的使用 包名别名 小结 一、Go中的函…
阅读更多...
面试准备111

面试准备111

Java基础 反射 集合 多线程 Synchronized/volatile 线程池 cas atomic 网络 tcp 三次握手/四次挥手 流量控制 拥塞控制 数据结构 算法 Spring 循环依赖 Mybatis 如何防止sql注入 Mysql 索引 索引分类 索引设计原则 事务 四种隔离级别 MVCC 日志 Binlog…
阅读更多...
排序题目：翻转对

排序题目：翻转对

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二预备知识思路和算法代码复杂度分析 解法三预备知识思路和算法代码复杂度分析 题目 标题和出处 标题：翻转对 出处：493. 翻转对 难度 8 级 题目描述 要…
阅读更多...
通信工程学习：什么是IP网际协议

通信工程学习：什么是IP网际协议

IP：网际协议 IP网际协议（Internet Protocol，简称IP）是整个TCP/IP协议栈中的核心协议之一，它负责在网络中传送数据包，并提供寻址和路由功能。以下是对IP网际协议的详细解释： 一、对IP网际协议的…
阅读更多...
最新文章

Copyright @ 2022~2023