视图容器组件view
1.hover-class属性：实现鼠标摁下去的点击态效果。
代码：
<template>
<view class="container">
<view class="box1" hover-class="box1_active">
<text>我是盒子1</text>
</view>
</view>
</template>
<style>
.container {
height: 100vh;
}
.box1 {
height: 200upx;
width: 200upx;
background-color: #2C405A;
}
.box1 text {
color: white;
}
.box1_active {
background-color: #007AFF;
}
</style>
2.hover-stop-propagation属性：是用来阻止冒泡的。
首先我们来看下实际的冒泡效果（没有设置hover-stop-propagation属性的时候）
我们可以清晰地看到，当我们点击盒子2的hover-class的点击态效果时，盒子1的hover-class的点击态效果也会被同步触发，这就是所谓向上层层冒泡，有时候我们开发中是要阻止这种冒泡的。
而我们想要阻止这种冒泡，只需要给盒子2添加hover-stop-propagation属性即可。
然后2个盒子的各自点击态效果互不影响。
测试代码：
<template>
<view class="container">
<view class="box1" hover-class="box1_active">
<text>我是盒子1</text>
<view class="box2" hover-class="box2_active" hover-stop-propagation>
<text>我是盒子2</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container {
height: 100vh;
}
/*盒子1的样式*/
.box1 {
height: 400upx;
width: 400upx;
background-color: #4CD964;
}
.box1 text {
color: white;
}
.box1_active {
background-color: orange;
}
/*盒子2的样式*/
.box2 {
height: 200upx;
width: 200upx;
background-color: #ffaa7f;
}
.box2 text {
color: white;
}
.box2_active {
background-color: #ff007f;
}
</style>
3.hover-start-time属性和hover-stay-time属性都需要通过v-bind绑定使用。
:hover-start-time属性：鼠标摁下后，延迟多少秒才显示hover-class点击态的样式效果。
:hover-stary-time属性：鼠标松开后，这时候的hover-class点击态效果还能继续停留，停留时间的长短和你给的毫秒数有关，然后才恢复原本效果。
效果预览
测试代码：
<template>
<view class="container">
<view class="box1" hover-class="box1_active">
<text>我是盒子1</text>
<view
class="box2"
hover-class="box2_active"
hover-stop-propagation
:hover-start-time="2000"
:hover-stay-time="2000"
>
<text>我是盒子2</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style>
.container {
height: 100vh;
}
/*盒子1的样式*/
.box1 {
height: 400upx;
width: 400upx;
background-color: #4CD964;
}
.box1 text {
color: white;
}
.box1_active {
background-color: orange;
}
/*盒子2的样式*/
.box2 {
height: 200upx;
width: 200upx;
background-color: #ffaa7f;
}
.box2 text {
color: white;
}
.box2_active {
background-color: #ff007f;
}
</style>
button按钮组件的使用。
代码：
<view class="container">
<button type="default">default 默认是白色按钮</button>
<button type="warn">warn 警告按钮</button>
<button type="primary">绿色或者蓝色的按钮</button>
<button type="primary" disabled>disabled 禁用按钮</button>
<button type="warn" size="mini">mini 小尺寸按钮</button>
<button type="primary" plain>plain 镂空按钮 只有边框</button>
<button type="primary" loading>loading 会转圈圈的按钮</button>
</view>
注：type="primary"实现的效果在不同端实现的效果也不一样。
text文本组件的使用。
1.selectable属性，光标可选中。
<template>
<view class="content">
<view>
<text>我是文本，是不可选的那种</text>
</view>
<view>
<text selectable>
我也是文本，但我是可选的那种
</text>
</view>
</view>
</template>
2.space属性，实现连续空格功能，有三个参数，nbsp参数要设置字体尺寸才看出效果
我们以2个空格为例子,参数选择不一样，实现的效果也不一样。
<template>
<view class="content">
<view>
<text space="emsp">我 与春风皆过客</text>
</view>
<view>
<text space="ensp">
我 与春风皆过客
</text>
</view>
<view>
<text space="nbsp" style="font-size: 50upx;">
我 与春风皆过客
</text>
</view>
</view>
</template>
3.decode，这个属性是用来解码的。
支持这几个： < > & '    
<text decode>
< > & '    
</text>
image组件的使用
mode模式，属性不同，缩放比例也不一样。
常用的2个缩放属性：
aspectFit 保持纵横比缩放图片，可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
<view class="container">
<image src="../../static/test.jpg" mode=""></image>
<image src="../../static/test.jpg" mode="aspectFit"></image>
<image src="../../static/test.jpg" mode="aspectFill"></image>
</view>
