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 中的列表渲染和事件处理。敬请期待!

相关推荐
伍哥的传说9 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783811 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊23 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为