Uniapp学习笔记(数据展示、数据循环、条件编译、计算属性、组件的使用、组件插槽、生命周期)

最新推荐文章于 2024-04-08 12:00:18 发布
最新推荐文章于 2024-04-08 12:00:18 发布
阅读量514 收藏 4
点赞数
文章标签： 小程序 uniapp vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827418/article/details/119146846
版权

1.项目准备

1.1开发方式

uni-app为我们提供2种开发方式：

  1. 使用DCloud公司提供HBuilderX工具来快速开发；

  2. 使用脚手架来快速开发（我们这次项目使用此方式）；

1.2脚手架搭建项目

  1. 全局安装，如果你以前安装过就不需要重复安装了。
npm install -g @vue/cli
  1. 创建项目。
vue create -p dcloudio/uni-preset-vue dnpicture

在这里插入图片描述

在这里插入图片描述

  1. 启动项目（微信小程序）。
npm run dev:mp-weixin

在这里插入图片描述

  1. 在微信小程序开发者工具导入项目。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

1.3搭建过程中可能遇到的问题

容易出现 vue 和 vue-template-complier版本不一致的问题。

1.3搭建过程中可能遇到的问题
容易出现 vue 和 vue-template-complier版本不一致的问题。

在这里插入图片描述

根据提示重新安装对应的vue版本即可 npm install vue@2.6.10，然后再重新运行项目 npm run dev:mp-weixin。

1.4安装sass依赖

npm install sass-loader@7.3.1
npm install node-sass@4.14.1

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

2. 项目目录结构

官网https://uniapp.dcloud.io/
在这里插入图片描述

3. 基本语法

  1. 数据的展示
    在这里插入图片描述

  2. 数据的循环
    在这里插入图片描述

  3. 条件编译
    在这里插入图片描述

  4. 计算属性
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  5. 事件
    在这里插入图片描述
    （1）事件的基本使用
    在这里插入图片描述
    在这里插入图片描述
    （2）事件传参
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  6. 组件的简单使用

（1）组件的定义
在这里插入图片描述

（2）组件的引入
在这里插入图片描述

（3）组件的注册
在这里插入图片描述

（4）组件的使用
在这里插入图片描述
在这里插入图片描述
7. 组件传递参数
在这里插入图片描述
（1）父向子传递参数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（2）子向父传递参数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（3）使用全局数据传递参数
在这里插入图片描述
通过Vue的原型共享数据：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
通过globaldata共享数据：
在这里插入图片描述
8. 组件插槽slot
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
具名插槽：
在这里插入图片描述
在这里插入图片描述
9. 生命周期
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
完整的生命周期：
uniapp:
https://uniapp.dcloud.io/frame?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vue: https://cn.vuejs.org/v2/guide/instance.html?#生命周期图示
在这里插入图片描述

微信小程序: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
在这里插入图片描述

小小白学计算机
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记
04-29
1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统如v-if、v-for、v-bind和v-on提供条件渲染、...
本人开发初级阶段学习VUE整理笔记.zip
10-23
7. **生命周期**：每个Vue实例都有其特定的生命周期，从创建到销毁，包括初始化数据、编译模板、挂载、更新和卸载等一系列过程。 8. **插槽**：Vue的插槽机制允许组件内部定义可替换的部分，增强组件的灵活性。 9....
uni-app数据循环
L_Meimei的博客
01-07 3822
通过v-for来指定要循环的数组，item和index分别为循环想和循环索引，:key指定唯一的属性，来提高循环效率 数据： 数据循环： 结果：
uniapp--循环
魏依一的博客
02-06 2634
v-show判断为false的内容在页面不显示，代码中显示，只是以css形式添加了display=“none”index:其下标（0 1 2 3 4 ..........）；index:其下标（0 1 2 3 4 ..........）；v-if ，v-else-if ，v-else 必须紧挨着写。用法：
uni-app：循环数据点击事件获取每行指定数据（获取参数）
weixin_46001736的博客
09-27 1378
uni-app：循环数据点击事件获取每行指定数据（获取参数）
网络IO模型的介绍引出nginx的网络IO模型
Linuxhus的博客
11-10 174
1. 什么是IO？ 简单来说就是输入输出 2. 网络IO经历步骤 用户在获取网络资源是在进入网卡，经过网络七层模型将请求交给nginx用户进程 用户进程无法直接获取磁盘上的资源，会将请求获取什么资源翻译并转发给内核，内核驱动磁盘寻道找到文件（最耗时间的环节） 文件同样也不能直接交给用户进程，首先磁盘将文件放至内核缓冲区，然后内核告知用户进程请求的资源结果已准备好（耗时比较短） 内核缓冲区将文件拷贝一份至用户进程缓冲区，用户进程拿到文件 构建响应报文，通过ht...
uni-app计算属性
L_Meimei的博客
01-08 969
可以理解为是对data中的数据提供了一种加工或者过滤功能，通过computed来定义计算属性
vue_notes:vue原始码学习笔记
03-30
每个Vue组件都有一个完整的生命周期，包括创建、挂载、更新、销毁等阶段。理解这些阶段可以帮助开发者在适当的时间执行初始化、计算、渲染等任务。 6. **模板语法**： Vue使用HTML模板语法，使得声明式的编写界面...
全国计算机三级网络技术笔记.doc.pdf
10-11
10. 软件开发：生命周期包括计划、开发和运行阶段，每个阶段有相应的文档和活动，如需求分析、编码、测试和维护。 11. 编程语言：机器语言、汇编语言和高级语言，各有优缺点，高级语言更易学习，但需要编译或解释...
计算机三级网络技术新版教材笔记精华版(一).pdf
10-13
网络的基本概念中，信息技术涵盖了信息生命周期的全过程。计算机网络的发展大致分为四个阶段，随着技术的演进，网络的规模、速度和应用范围不断扩大，促进了全球信息化的进程。 总结起来，计算机三级网络技术不仅...
记录v-for 循环插槽在 uni-app 中渲染 bug
jaqi.csdn
07-17 795
父组件：importfrom</</</</</子组件：stylepositionrelative;</</</</插槽的内容分别在插槽的绝对定位中显示。
UniApp插槽
最新发布
2301_79886516的博客
04-08 1351
前端插槽需求，使用的时uniapp+springboot，需求是做一个问题发布和评论，要求每个插槽显示不同类型，并且数据显示要求能看到第一条评论的信息
uni-app之数据的存储
weixin_43845137的博客
04-07 6164
目录uni-app之数据的存储存储 取 删 数据同步的 存储 取 删 数据 uni-app之数据的存储 存储 取 删 数据 官网 uni.setStorage(obj) 存储数据 obj里面有着以下参数：obj 为 { key, data, success, fail, complete } 其中：key为存储的值，data为存储的数据，suc为成功的回调，fail为失败的回调，complete为接口调用结束的回调函数（调用成功、失败都会执行） uni.getStorage(obj) 拿
用uniapp写一个内外循环的全选与反选，不会的赶紧围观
CRMEB小程序商城的博客
04-13 1675
根据项目需求；写的一个内外循环的全选与反选；遇到问题：由于是分页，选择全选，当上拉加载时；新加载的数据并没有被选中等问题，都被解决；如果有其他些问题；欢迎提出。 注意：这只我项目中的页面；有些全局引用的例如提示或是一些组件；使用的时候可以删除；并不影响主要功能；获取数据时；由于后台传的是以为数组；但实际需要的二维数据；下面获取数据的接口已经过处理；根据你们返回的数据格式可自行更改；我们项目中有一键换色；牵扯到颜色变量的可删除；写成固定颜色 以下是详细代码： Html： <template> .
uniapp v-for循环组件遇到的问题
weixin_52716609的博客
05-26 967
当使用v-for循环组件时，有个需求在子组件内点击跳转详情页面需要传详情页面id，打印获取的id为数据循环最后一项值的id，我感觉这里是因为循环同一组件后面组件的值覆盖了一开始的值然后后面想到循环时为组件添加ref属性或key属性，发现还是不行。在最近开发项目中用到了uniapp进行h5端开发，在使用v-for循环自己封装的组件过程中遇到了一个问题。
uniapp使用v-for页面不刷新解决办法
herojeo的博客
11-11 1343
DOM中的列表却没有更新。
uniapp动态刷新数组，组件无法动态渲染问题
likesomething的博客
04-22 1992
一定注意组件所有显示元素，在组件属性中都有声明，定义，输入 且一定不要对所传变量进行任何形式的计算、修改、赋值到data显示。。。等等一切输入不等输出的行为，也就是输入即输出，这样就不会出现加上_this.$forceUpdate()也没有更新的情况了 ...
uniapp——自定义组件插槽及使用
努力、拼搏、奋进
10-20 1667
uniapp——自定义组件插槽及使用
Uniapp数据展示
随便写写
12-22 3261
uniapp 后端以ssm框架拟写接口 前端利用uniapp调用接口,实现数据的展示以及基本的增删改查. 1.状态码POJO类 public class DataStatus { private Integer StatusCode; //状态码 private String StatusDescription; //提示信息 public Integer getStatusCode() { return StatusCode; } publi
uniapp的组件生命周期
09-03
uniapp的组件生命周期包括以下几个阶段：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。 - beforeCreate：在实例初始化之后被调用，此时实例上的数据和方法还未初始化。 - created：在实例创建完成后被立即调用，此时实例已经完成了数据的观测，但还未开始DOM的编译和挂载。 - beforeMount：在挂载开始之前被调用，此时模板编译已完成，但还未将编译好的模板挂载到DOM上。 - mounted：在挂载到实例上去之后调用，此时实例已经挂载到DOM上，可以进行DOM操作。 - beforeUpdate：在数据更新时调用，但在DOM重新渲染之前被调用，可以在这个阶段进行一些数据的处理操作。 - updated：在数据更新之后时调用，此时DOM已经完成了重新渲染。 - beforeDestroy：实例销毁之前调用，此时实例仍然完全可用，可以进行一些清理工作。 - destroyed：Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 总结来说，uniapp的组件生命周期可以帮助我们在不同的阶段执行相应的操作，确保组件的正确渲染和销毁。在不同的生命周期阶段，我们可以执行不同的操作，比如初始化数据、处理数据更新、进行DOM操作等。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [uniapp笔记.rar](https://download.csdn.net/download/weixin_43167546/12691276)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uni-app 生命周期](https://blog.csdn.net/YWW_ABC/article/details/121720505)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值