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

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(内联样式)

在这里插入图片描述


http://www.lryc.cn/news/450435.html

相关文章:

  • 计算机毕业设计 基于深度学习的短视频内容理解与推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
  • JavaScript网页设计案例深度解析:从理论到实践
  • spark-sql建表数据同步到hive
  • Django上下文处理器
  • 旭升集团携手纷享销客,构建全方位客户关系管理平台
  • uniapp 知识点
  • 慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用(源码+文档+定制)
  • 解决 Android WebView 无法加载 H5 页面常见问题的实用指南
  • Ollama本地部署大模型及应用
  • 读代码UNET
  • 【java】前端RSA加密后端解密
  • 机器学习 | Scikit Learn中的普通最小二乘法和岭回归
  • 代码随想录冲冲冲 Day60 图论Part11
  • golang web笔记-1.创建Web Server和Handler请求
  • 【Python】Copier:高效的项目模板化工具
  • Spring系列 BeanPostProcessor
  • Qualitor processVariavel.php 未授权命令注入漏洞复现(CVE-2023-47253)
  • SpringBoot的概述与搭建
  • 视频集成与融合项目中需要视频编码,但是分辨率不兼容怎么办?
  • kafka 换盘重平衡副本 操作流程
  • vue3.0 + element plus 全局自定义指令:select滚动分页
  • HarmonyOS/OpenHarmony 离线加载web资源,并实现web资源更新
  • 【Spark 实战】基于spark3.4.2+iceberg1.6.1搭建本地调试环境
  • TCP连接建立中不携带数据的报文段为何不消耗序号解析
  • JS设计模式之状态模式:优雅地管理应用中产生的不同状态
  • C语言系列4——指针与数组(1)
  • JS网页设计案例
  • 4.2.1 通过DTS传递物理中断号给Linux
  • 常用性能优化方法
  • 上海我店:创新模式引领本地生活新风尚