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

于 2024-09-30 17:28:59 发布
阅读量384 收藏 5
点赞数 6
分类专栏： uniapp 文章标签： uni-app 学习 vue 前端 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_book/article/details/142637741
版权

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

总时长 23:40:00 共116P

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

文章目录

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（内联样式）

在这里插入图片描述

wang_book
关注
专栏目录
【uniapp】mescroll-body-part & mescroll-uni-part
Minions_Fatman的博客
12-02 1271
/ tabs: ['全部', '奶粉', '面膜', '图书', '果汁', '奶瓶', '美素', '花王', '韩蜜', '口红', '毛巾', '玩具', '衣服'],/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) *//*需给父元素设置height:100%*/// 此处return,先获取tabs。/*根元素需要有固定的高度*///联网失败, 结束加载。// tabs异步获取。// tabs异步获取。/* 顶部区域 *//* 底部区域 */
Part6-1-2 uniapp
m0_38066007的博客
11-18 1124
目录结构 应用配置 manifest.json manifest.json 是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器 编译配置 vue.config.js vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项 全局配置 page.json page.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗.
GitHub Pages 部署vue3 + Vite项目后 _plugin-vue_export-helper.js 404
温的打怪之旅
04-19 457
原贴重写打包方案// 打包配置<=>?return {// 消除打包大小超过500kb警告input: {},// 静态资源分类打包output: {// TODO: 处理GitHub Pages 部署 _plugin-vue_export-helper.js 404},!.pnpm)(?.groups!?'vender'// }// }导入});
Part6-1-3 uniapp 项目搭建
m0_38066007的博客
11-21 348
项目文件结构 1
优化打包chunk-vendor.js文件体积过大
weixin_42289080的博客
08-24 7268
参考链接： https://www.cnblogs.com/love314159/p/14275666.html，点击跳转 当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。 // 在vue-config.js 中加入 ..... const isProduction = process.env.NODE_ENV === 'production' module
uniapp框架学习
qq_46466568的博客
09-27 709
uniapp框架学习 uniapp官网：https://uniapp.dcloud.io/ HBuilderX：官方IDE下载地址 输出为集合形式： ​ v-for遍历数组的两种方式： <view v-for="(leftItem, key) in left" :key="key">{{ leftItem.text }}</view> </view> <view class="main_part_value"> <view v-for
uniapp使用 movable-area movable-view 实现图片双指缩放、鼠标单击缩小双击放大、图片及标记点功能
HHH917的博客
02-24 7178
movable-view movable-area movable-view 主要是可以实现缩放及拖拽功能，不过只能限制在movable-area 范围内的拖拽超出范围会回弹。 为了增大一点它的回弹范围 可以设置 movable-view的宽高为0； 然后子元素决定定位居中。微信小程序没有双击事件 通过setTimeout 拦截并判断是单击还是双击。 实现代码（部分无用组件自行删除） getDomInfo partDetail.js 组件代码
vue3+springboot+mybatis+mysql项目实践--简单登录注册功能实现
m0_65985318的博客
07-11 1150
这里是一次对vue3+springboot+mybatis+mysql的项目实现，简单实现前后端分离的登录注册功能，主要工具：idea,navicat。
uniapp：H5打包部署到github后文件`_plugin-vue_export-helper`访问不到
彭世瑜的博客
07-08 2504
uniapp H5打包部署到github后，下划线开头的一个文件。需要修改配置 vite.config.js。访问不到，网络请求显示404。
源码推荐:基于uni-app前端框架，开源版本还开源免费商用
weixin_45498172的博客
08-07 2695
今天要给大家介绍一款电商软件，目前有两个主流版本：免费开源版、商业开源版。首先需要和大家普及下什么是开源软件？ 提到开源，一定绕不开Linux。Linux 是一款开源软件，我们可以随意浏览和修改它的源代码，学习 Linux，不得不谈到开源精神。Linux 本身就是开源精神的受益者，它几乎是全球最大的开源软件。 简单来说，开源软件就是把软件程序与源代码文件一起打包提供给用户，用户既可以不受限制地使用该软件的全部功能，也可以根据自己的需求修改源代码，甚至编制成衍生产品再次发布出去。 用户具有使用自由、修改自由、
uniapp使用uview包装后的vuex全局变量，需要的文件
hamburgerJ的博客
02-07 2021
①store / index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let lifeData = {}; try{ // 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的 lifeData = uni.getStorageSync('lifeData'); }catch(e){ } // 需要永久存储，且下次APP启动需要取出的，在state中的变量名。不在这个列表里的就不永久存储
uniapp 多国语言实现
carbonzhao的专栏
01-12 1019
世界上不只是有汉字，你的程序也不只是针对国人开发，有时候，老外也需要使用，虽然汉语世界普及，但是并未完全普及，就像大秦帝国的秦国，书同文要求所有商贾使用秦篆进行合同约定一样。。这是个同化阴谋。。哈哈哈哈 我们的程序有时候为了提升体验，也会要求实现切换语言的功能，这个时候，本文就可以帮助到你啦！ 先下载vue-i18n.js这个库，网上到处都是，但是为了方便，我以源码的方式贴在这里，你可以直接复制粘贴到你的项目中的js文件中。 1、在项目中的某个目录中创建一个vue-i18n.js文件，如下，是我的存放
vue+h5音乐可视化
qq_41960265的博客
11-26 988
<template> <div> <input type="file" id="file" @change="changeFile($event)"/> <canvas id="canvas"></canvas> <audio id="audio" src="lib/ylc.mp3" autoplay></audio> </div> </template> <.
快速提示：使用fullPage.js和Animate.css滚动动画
Web design 教程小屋
07-06 1400
在上一教程中 ，我向您介绍了fullPage.js ，这是一个流行的jQuery插件，用于构建全屏页面。 在此快速提示中，我将向您展示如何使用fullPage.js和animate.css创建基于滚动的动画。 所需的图书馆 出于本示例的目的，我设置了一个演示页面 。 如果您在“ 设置”标签下查看，您会看到我在笔中包含了以下库： fullPage.js animate.css ...
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度
最新发布
CZDBGSY的博客
09-26 424
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度。
uniapp生物识别示例（人脸识别、指纹识别）
weixin_59685936的博客
09-25 900
uniapp生物识别示例（人脸识别、指纹识别）
uni-app - - - - -vue3使用i18n配置国际化语言
Dark_programmer的博客
09-25 562
uni-app - - - - -vue3使用i18n配置国际化语言
uni-app进度条
ctf_0226的博客
09-24 715
【代码】uni-app进度条。
uniapp.md-typora
09-09
很抱歉，我无法回答你的问题。"uniapp.md-typora"并不是我所拥有的引用资料中的一部分。但是从你提到的文件名来看，它可能是一个关于Uni-App的Markdown文档或笔记。Uni-App是一个使用Vue语法的跨平台前端框架，可以编译到iOS、Android、H5、小程序等多个平台。它具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等关键优势。你可以通过学习Uni-App的官方文档和相关资料来深入了解该框架的用法和特点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值