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

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

零基础入门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笔记
GTbond的博客
02-15 763
1.项目目录 2.模板语法 vue组件语法 v-bind / : v-on / @ v-model v-if v-show v-for 空标签 template view 作为div使用 text 作为span使用
快速上手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 解决h5 uni.saveFile 不生效】2种方法解决
最新发布
weixin_49066399的博客
08-30 1051
用uni.saveFile h5报错。第二种 可以引用js第三方库来进行保存。先安装 file-saver。查看文档发现不支持h5。
uni-app笔记
亿点点的博客
01-26 1242
uni-app笔记
【uniapp学习笔记】
weixin_47227105的博客
04-26 321
初次使用uniapp合作开发项目，记录一下出现的低级错误
uni-app笔记（黑马）
lzh的博客
07-20 1806
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前端框架，开源版本还开源免费商用
weixin_45498172的博客
08-07 2720
今天要给大家介绍一款电商软件，目前有两个主流版本：免费开源版、商业开源版。首先需要和大家普及下什么是开源软件？ 提到开源，一定绕不开Linux。Linux 是一款开源软件，我们可以随意浏览和修改它的源代码，学习 Linux，不得不谈到开源精神。Linux 本身就是开源精神的受益者，它几乎是全球最大的开源软件。 简单来说，开源软件就是把软件程序与源代码文件一起打包提供给用户，用户既可以不受限制地使用该软件的全部功能，也可以根据自己的需求修改源代码，甚至编制成衍生产品再次发布出去。 用户具有使用自由、修改自由、
uniapp使用uview包装后的vuex全局变量，需要的文件
hamburgerJ的博客
02-07 2054
①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中的变量名。不在这个列表里的就不永久存储
浅谈html2canvas实现浏览器截图的原理
前端程序猿steven的博客
12-16 8087
1、什么是html2canvas html2canvas可以直接截取特定dom元素内的所有内容并导出图片 官网地址： http://html2canvas.hertzen.com/ 2、使用方式 安装 npm i html2canvas -S 引入使用 // vue文件 <!-- 海报html --> <template> <div class="c-code" v-if="showOriImg"> <div clas
vue+h5音乐可视化
qq_41960265的博客
11-26 1011
<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> <.
uniapp 多国语言实现
carbonzhao的专栏
01-12 1051
世界上不只是有汉字，你的程序也不只是针对国人开发，有时候，老外也需要使用，虽然汉语世界普及，但是并未完全普及，就像大秦帝国的秦国，书同文要求所有商贾使用秦篆进行合同约定一样。。这是个同化阴谋。。哈哈哈哈 我们的程序有时候为了提升体验，也会要求实现切换语言的功能，这个时候，本文就可以帮助到你啦！ 先下载vue-i18n.js这个库，网上到处都是，但是为了方便，我以源码的方式贴在这里，你可以直接复制粘贴到你的项目中的js文件中。 1、在项目中的某个目录中创建一个vue-i18n.js文件，如下，是我的存放
uni-app学习笔记
qq_31539817的博客
04-08 1641
uni-app 环境以及配置 开发环境 使用H-builder 开发，下载app开发版本，项目使用uni-app项目。 项目配置文件 static文件夹 用于静态资源文件存放，不会被webpack解析，因此less、sass文件不可存放在此文件夹 manifest.json 应用配置文件，可配置程序的权限、图标、名称等，同时可以为vue为h5设置跨域配置 vue.config.js vue项目配置文件，可配置webpack等。 pages.json uni-app全局配置，决定了项目
uni-app 学习笔记
fmk1023的博客
09-27 3988
文章目录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的优点
uni-app项目笔记
LM的博客
12-18 2109
1. npm init -y 初始化package.json文件夹 由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。 请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用 官方文档：https://www.npmjs.com/package/@escoo
Uni-app框架（小程序开发） 笔记
weixin_43925969的博客
09-18 1922
┌─components uni-app组件目录│ └─comp-a.vue 可复用的a组件├─hybrid 存放本地网页的目录， 详见├─pages 业务页面文件存放的目录│ ├─index│ │ └─index.vue index页面│ └─list│ └─list.vue list页面├─static 存放应用引用静态资源（如图片、视频等）的目录， 注意： 静态资源只能存放于此├─wxcomponents 存放小程序组件的目录， 详见├─main.js Vue初始化入口文件。
uni-app 自学笔记
qq_36842789的博客
03-05 450
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到各种平台，方便开发者快速交付，不需要转换开发思和更改开发习惯。uni-app 为开发者提供了一系列基础组件，类似HTML里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。
uniapp基础知识—大总结
热门推荐
john_QY的博客
11-01 7万+
uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app？ 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值