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

2024-05-15 14:52:25

1.项目准备

1.1开发方式

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

使用DCloud公司提供HBuilderX工具来快速开发；
使用脚手架来快速开发（我们这次项目使用此方式）；

1.2脚手架搭建项目

全局安装，如果你以前安装过就不需要重复安装了。

npm install -g @vue/cli

创建项目。

vue create -p dcloudio/uni-preset-vue dnpicture

启动项目（微信小程序）。

npm run dev:mp-weixin

在微信小程序开发者工具导入项目。

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）事件传参
组件的简单使用

（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

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

【vn.py学习笔记（六）】vn.py constant源码阅读、委托生命周期
[vn.py学习笔记(六)]vn.py constant源码阅读.委托生命周期写在前面 1 constant 1.1 Direction 1.2 Offset 1.3 Status 1.4 Prod ...
学习笔记（5):JavaWeb基础核心技术-5. 佟刚_JavaWEB_Servlet 的配置及生命周期方法
立即学习:https://edu.csdn.net/course/play/1060/15786?utm_source=blogtoedu 3. servlet 容器:运行 Servlet, JSP, ...
【学习笔记】大数据技术之Scala（下）
[学习笔记]大数据技术之Scala(上) 大数据技术之Scala 第 6 章面向对象 6.1 Scala 包 6.1.1 包的命名 6.1.2 包说明(包语句) 6.1.3 包对象 6.1.4 导包 ...
oracle数据库开多线程,学习笔记:Oracle表数据导入 DBA常用单线程插入多线程插入 sql loader三种表数据导入案例...
天萃荷净 oracle之数据导入,汇总开发DBA在向表中导入大量数据的案例,如:单线程向数据库中插入数据,多线程向数据表中插入数据,使用sql loader数据表中导入数据案例 1.Oracle数据库 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vs2010 学习Silverlight学习笔记(11)：数据与通信之WebClient
概要: 基础知识终于学完了,我今天又从第一篇看到第十篇,发现明白了一些东西,还有忘记了部分东西.呵呵,咱不能猴子掰玉米,学了新的忘记旧的.要经常去复习,去用.这一篇是数据通信部分的第一篇,有些东西没接 ...
微信小程序开发：学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存快速开始说明本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
HALCON 21.11：深度学习笔记---Data（数据）(3)
HALCON 21.11:深度学习笔记---Data(数据)(3) HALCON 21.11.0.0中,实现了深度学习方法.其中,关于术语"数据"的介绍如下: 术语"数据 ...
CCC3.0学习笔记_证书数据
CCC3.0学习笔记_证书数据系列文章目录文章目录系列文章目录前言 1. [A] - SE Root CA Certificate 2. [B] - SE Root Certificate 3 ...

最新文章

热门文章