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

Posted 2021-08-28 小小白学计算机

1.项目准备

1.1开发方式

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

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

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

1.2脚手架搭建项目

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

npm install -g @vue/cli

2. 创建项目。

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

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

npm run dev:mp-weixin

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

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