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

最新推荐文章于 2024-10-24 14:30:12 发布
原创 最新推荐文章于 2024-10-24 14:30:12 发布 · 1.2k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #学习 #vue #前端框架 #微信小程序 #小程序

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

总时长 23:40:00 共116P

此文章包含第15p-第p20的内容

文章目录

事件监听以及组件内置事件处理

在这里插入图片描述

我们可以用@代替v-on:
在这里插入图片描述
各种事件
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

自定义模板快速创建uniapp

在这里插入图片描述
我们先创建一个vue demo模块
在这里插入图片描述

这里点击自定义模块
在这里插入图片描述
会打开一个目录 在这个目录里加上一个vue文件即可
在这里插入图片描述
在这里插入图片描述

这里就可以看到了
在这里插入图片描述

在这里插入图片描述

条件渲染 v-if和v-else

在这里插入图片描述
例子
在这里插入图片描述
在这里插入图片描述

v-else-if

三个等号不仅仅包括值相等，类型也要一样，两个等号会进行隐式转换
在这里插入图片描述

v-show

v-if和v-show的区别

v-if=false时 dom元素在页面里直接消失了
v-show=false时 dom元素的display=none； 隐藏了
v-if 加载省 v-show 切换省
在这里插入图片描述
在这里插入图片描述

v-show和v-if的图片资源加载情况

都是true时
在这里插入图片描述

都是false时
在这里插入图片描述

template和view使用v-if的区别

view包裹住的模块 级别会降一级
在这里插入图片描述
template 只是个虚拟的dom，它包裹的dom元素级别没变
这里的image的级别还是跟box1、box2是同级别的
在这里插入图片描述

v-for

在这里插入图片描述
例子
在这里插入图片描述
在这里插入图片描述
例子2
在这里插入图片描述

在这里插入图片描述

小程序测试 切换页面

在这里插入图片描述
添加编译模式
在这里插入图片描述
切换页面
在这里插入图片描述
这里没写唯一key报错
在这里插入图片描述
加上唯一标识即可
在这里插入图片描述
key最好不要用index 可能会有错误

用template不会破坏结构

在这里插入图片描述

组合使用 一般不建议这么用 执行顺序 v-if大于v-for
在这里插入图片描述

for为什么必须有key 例子

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

实际例子

在这里插入图片描述

如果key是index的话 删除某个值后 如果复选框会跟着变到别的地方
在这里插入图片描述

表单focus和blur事件

在这里插入图片描述
事件方法
在这里插入图片描述

@confirm代表pc端的回车 和手机端的键盘右下角的确定按钮
在这里插入图片描述

获取焦点和离开焦点

在这里插入图片描述

得到焦点的时候出现一只鸡，失去焦点时，鸡也不见了
在这里插入图片描述
编写代码
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

因为js代码就1行，也可以这么写
在这里插入图片描述

uniApp实战四：网络请求封装
博主逸尘
06-25 439
Vue3+HbuilderX请求封装指南 本文介绍了在Vue3项目中基于HbuilderX 4.66版本进行网络请求封装的方法。主要内容包括： 请求封装实现：通过util/request.js文件创建通用请求方法，支持GET请求参数处理 配置管理：使用config.js配置基础URL和项目编码 API模块化：建议在common目录按模块创建API文件 页面调用示例：展示如何引入和使用封装好的API方法 该方案支持动态URL配置，参数自动编码处理，提供了统一的错误处理机制。对于需要对接多地市多子项目的场景特别
优化打包chunk-vendor.js文件体积过大
weixin_42289080的博客
08-24 7781
参考链接： https://www.cnblogs.com/love314159/p/14275666.html，点击跳转 当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。 // 在vue-config.js 中加入 ..... const isProduction = process.env.NODE_ENV === 'production' module
快速上手uni-app,基础知识，基本使用
热门推荐
搬砖猴哥
12-26 1万+
####uni-app的基本使用 视频链接：uni-app配套视频 知识介绍： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍 官方网页 uni-app 是一个使用 ...
Uniapp Vue3 基础到实战
11-25
Uniapp是一个使用 Vue.js 开发所有前端应用的框架，编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。我将从基础到开始视频讲解，Vue 2 支持将于 2023 年 12 月 31 日结束，所以将教学Vue 3，每个课程都有示例并且扩展。本套课程从组件及扩展组件，实战教程，前端知识必备，收益人生不断。
uniApp 学习笔记总结(一)
探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。
04-21 3503
1. uniapp环境搭建 2. uni-app的开发目录结构 3. pages.json下的 globalStyle 全局外观配置 3.1 导航栏样式配置 3.2 下拉刷新页面效果 3.3 onReachBottomDistance页面上拉触底事件 4. pages.json下的 页面配置 5. pages.json下的 配置基本的tabbar 6. pages.json下的 condition启动模式配置 7. text组件 的基本使用 8. view组件 的基本使用 9. button按钮 组件的基本
uniapp笔记
GTbond的博客
02-15 836
1.项目目录 2.模板语法 vue组件语法 v-bind / : v-on / @ v-model v-if v-show v-for 空标签 template view 作为div使用 text 作为span使用
【uniapp】mescroll-body-part & mescroll-uni-part
Minions_Fatman的博客
12-02 1603
/ tabs: ['全部', '奶粉', '面膜', '图书', '果汁', '奶瓶', '美素', '花王', '韩蜜', '口红', '毛巾', '玩具', '衣服'],/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) *//*需给父元素设置height:100%*/// 此处return,先获取tabs。/*根元素需要有固定的高度*///联网失败, 结束加载。// tabs异步获取。// tabs异步获取。/* 顶部区域 *//* 底部区域 */
Part6-1-2 uniapp
m0_38066007的博客
11-18 1248
目录结构 应用配置 manifest.json manifest.json 是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器 编译配置 vue.config.js vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项 全局配置 page.json page.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗.
uniapp踩坑细节
baidu_41601048的博客
03-26 1040
解决办法（1）给scroll-view设置如下css样式 （2）给scroll-view设置enhance属性和:show-scrollbar="false" 2 uniapp中定义全局变量需要在根目录的uni.scss文件中定义，通过main.js中引入自定义的scss文件不会编译生效 ps: scss文件中定义自定义函数如果带单位的话，需要做如下修改：
uni-app笔记
亿点点的博客
01-26 1397
uni-app笔记
【uniapp学习笔记】
weixin_47227105的博客
04-26 433
初次使用uniapp合作开发项目，记录一下出现的低级错误
uniapp学习笔记
moyuqaq0303的博客
06-16 4433
注册一个监听函数，用于接收下载进度更新的事件。当下载过程中文件的下载进度发生变化时，会触发此回调。
uni-app笔记（黑马）
lzh的博客
07-20 2040
uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 项目：黑马商城项目 uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付
uni-app学习笔记
申小兮和林小兮的博客宝
11-05 726
uni-app项目搭建，基础认识（tabBar、生命周期），基本组件的使用（scroll-view、提示框、swiper、form表单）
uni-app 学习笔记
fmk1023的博客
09-27 4180
文章目录1. uni-app 基础1.1 什么是uni-app1.2 uni-app的优点 1. uni-app 基础 官方文档 1.1 什么是uni-app uni-app是一个使用Vue.js语法来开发所有前端应用的框架（也称之为全端开发框架） 开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。 技术栈：JavaScript，vue， 微信小程序， uni-app 1.2 uni-app的优点
uniapp基础笔记
最新发布
凉
10-24 1286
在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。但nvue里，只支持flex，因为它在app端是使用原生排版引擎渲染的。在uni-app的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用。
uniapp在STM32F103项目中的应用研究
在介绍知识点之前，首先需要明确“uniapp”和“M32F103-part-mas”所指代的含义。从上下文来看，“uniapp”是一个专有名词，很可能是指一个特定的软件应用、开发框架或工具，而“M32F103-part-mas”则似乎是指某个...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值