阿里P7架构师，纯手写Uni-app入门教程，堪称巅峰之作

最新推荐文章于 2024-08-09 17:45:21 发布

编程-老鸟

最新推荐文章于 2024-08-09 17:45:21 发布

阅读量471

点赞数

文章标签： vue 小程序 js 前端

本文链接：https://blog.csdn.net/pc_372/article/details/114190220

版权

本文是阿里P7架构师撰写的uni-app入门教程，讲解了uni-app的基本概念、推荐UI框架uView，深入探讨uni-app的基础语法、事件处理、组件使用、生命周期，并通过实例项目演示了如何创建和配置uni-app应用。此外，还介绍了Sass样式的配置和使用。

摘要由CSDN通过智能技术生成

介绍

uni-app是什么？

是一个基于 Vue.js 的全端开发框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。一次开发，到处运行。

阿里P7架构师，纯手写Uni-app入门教程，堪称巅峰之作

二、uni-app基础

01 基本语法

数据的展示

定义：在data定义

使用：在tempelate中插值{ { }}使用，不需要使用this

注意点：在属性中不需要括号，属性名前需要加‘：’，这一点区别于微信小程序。

数据循环

微信小程序中的用法

wx:for="{ {数据源}}" wx:for-index="index的别名" wx:for-item="item的别名"

vue中的用法

vue-for="item in 数据源" 或者 vue-for="（item，index） in 数据源"

<view v-for="(item) in list" :key="item.id">
  {
  {item.name}} --- {
  {item.id}}
</view>

// 数组
list: [
  {id:0,name:'张三'},
  {id:1,name:'李四'},
  {id:2,name:'王五'},
]