uni-app基础

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

烂泥也能扶上墙

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

阅读量574

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/qsj0606/article/details/114180152

版权

这篇博客介绍了uni-app的基础知识，包括基本语法、事件处理、组件使用和生命周期对比。讲解了数据展示、循环、条件编译以及事件绑定的不同用法。此外，还详细阐述了组件的定义、引入、注册和使用，特别提到了组件间的数据传递和uni-app的全局数据共享方法。最后，文章提供了一些示例项目的创建和配置，如命令行创建项目、HBuilder X面板创建、文件结构和配置清理。

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

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:'王五'},
]

条件编译

v-if：操作DOM，需要重新编译，所以不适合频繁切换
v-show：只操作样式，不管显不显示，都会存在这个元素

计算属性

类似于计算数据的处理接口，减少在模板中对数据的复杂逻辑操作，比如数据过滤，去除不要渲染的某个或某些数据

// 使用计算属性
<view>
  <view v-for="item in filterList" :key="item.id">
    {
   {
   item.name}}
  </view>
</view>
// 计算属性节点
computed:{
   
money(){
   

return "$"