uni-app开发（二）（基础组件及样式） uni-app

!!!
框架
一、底部导航tabBar
文章图片

二、view和text组件 view
文章图片

text

文章图片

!!!
使用Vue.js注意事项
生命周期
data属性
三、CSS3选择器类选择器：
ID选择器：
奇偶选择器：

文章图片

nth-of-type
first-of-type/last-of-type
nth-child
四、flex布局 【uni-app开发（二）（基础组件及样式）】display：flex
flex-direction:
justyfy-content:
align-items:
flex-shrink:设置是否被压缩
五、数据渲染 .name>view
六、Class与Style绑定：class
style==>color/font-size/
七、条件渲染 v-if:
v-show:
@tap
框架简介下官方推荐：template-view

v-else-if
八、列表渲染循环一维数组
循环二维数组
循环对象
v-for
框架简介下官方建议用block-view
九、事件处理器 @tap:手机上的点击事件建议用此关键字
@click

.button-box{ background: #09BB07; color: #FFFFFF; width: 80%; margin: auto; height: 80upx; font-size: 50upx; border-radius:30upx; border: 1upx solid #EEEEEE; display: flex; justify-content: center; align-items: center; }, .name-font{ font-size: 50upx; border: 1upx solid #CCCCCC; padding: 20upx; margin: 20upx; }

冒泡事件的解决

.box-inner{ width: 100%; height: 500upx; background: #007AFF; color: #FFFFFF; font-size: 40upx; display: flex; justify-content: center; align-items: center; } .box-outer{ width: 300upx; height: 300upx; background: #09BB07; color: #FFFFFF; font-size: 40upx; display: flex; justify-content: center; align-items: center; }

以上代码执行时，当点击里面的框框会打印–》点击了里面 + 点击了外面，这就是典型的冒泡事件，要解决此问题只需要将对应的@tap改成@tap.stop即可。
十、监听属性——watch 十一、计算属性 computed