组件
在 UniApp 中,组件是可复用的 Vue 实例。与 Vue 组件十分相似,你可以自定义组件,或者使用内置组件。
内置组件
UniApp 提供了一系列内置组件,比如 view
、text
、image
等。
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 中的列表渲染和事件处理。敬请期待!