最后更新：2020年11月6日20点37分
目录
一、View
1、新建demo页面
2、View组件
官方文档地址：
截图：
3、使用
代码：
截图：
备注：
二、Text组件
1、text组件
官方文档地址：
截图：
2、使用
代码：
截图：
备注：
一、View
1、新建demo页面
我们来新建一个demo页面，并将其放在第一个，作为启动页，专门用来进行学习；
2、View组件
官方文档地址：
https://uniapp.dcloud.net.cn/component/view
截图：
3、使用
代码：
<template>
<view>
<view class="v1" hover-class="v1-uni" hover-stay-time="100">第一个view</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.v1{
width: 200upx;
height: 200upx;
background: #09BB07;
color: #2C405A;
margin: 100upx;
}
.v1-uni{
background: #FF0000;
}
</style>
截图：
备注：
结合CSS和属性进行相关设置即可；
二、Text组件
1、text组件
官方文档地址：
https://uniapp.dcloud.net.cn/component/text
截图：
2、使用
代码：
<template>
<view>
<text class="t1" selectable="true">这是text文本组件</text>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.t1{
width: 200upx;
height: 200upx;
background: #09BB07;
color: #2C405A;
margin: 100upx;
}
</style>
截图：
备注：
结合文档进行设置即可，过于简单，不做具体演示；
