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

相关推荐
90后的晨仔12 小时前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔12 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
专注前端30年13 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue
90后的晨仔13 小时前
TypeScript是什么?为什么前端必须学它?
前端
用户479492835691513 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在13 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好113 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
Boale_H14 小时前
如何获取npm的认证令牌token
前端·npm·node.js
qq_3391911414 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
帅气的花泽类14 小时前
npm error code ERR_SSL_TLSV1_UNRECOGNIZED_NAME
前端·npm·node.js