UniApp 基础教程:第二篇

组件

在 UniApp 中,组件是可复用的 Vue 实例。与 Vue 组件十分相似,你可以自定义组件,或者使用内置组件。

内置组件

UniApp 提供了一系列内置组件,比如 viewtextimage 等。

View 组件

<view> 组件用于布局,类似于 HTML 中的 <div>

vue 复制代码
<template>
  <view class="container">
    <!-- 内容 -->
  </view>
</template>

自定义组件

你可以创建自己的组件并在其他页面或组件中使用它们。

src/components/MyComponent.vue:

vue 复制代码
<template>
  <view>
    <text>This is my component.</text>
  </view>
</template>

在页面中使用自定义组件:

vue 复制代码
<template>
  <view>
    <my-component></my-component>
  </view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

样式

UniApp 支持多种样式语言,包括 CSS、SCSS、SASS 等。

使用 SCSS

首先,安装 SCSS:

bash 复制代码
npm install node-sass sass-loader --save-dev

.vue 文件中:

vue 复制代码
<style lang="scss">
.container {
  color: red;
}
</style>

模板和条件渲染

v-if / v-else-if / v-else

vue 复制代码
<template>
  <view>
    <text v-if="condition1">Text 1</text>
    <text v-else-if="condition2">Text 2</text>
    <text v-else>Text 3</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      condition1: true,
      condition2: false
    };
  }
}
</script>

总结

在这一篇中,我们介绍了 UniApp 中的组件、样式和条件渲染。这些是构建 UniApp 应用的基础。

更多细节和高级功能,请参考官方文档


下一篇我们将探讨 UniApp 中的列表渲染和事件处理。敬请期待!

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#