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

!!!
框架

一、底部导航tabBar

二、view和text组件

view
text

!!!
使用Vue.js注意事项

生命周期
data属性

三、CSS3选择器

类选择器：
ID选择器：
奇偶选择器：

nth-of-type
first-of-type/last-of-type
nth-child

四、flex布局

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

<template>
	<view>
	<view class="name-font">{{name}}</view>
	<view class="button-box" @tap="clickevent()">点击按钮</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"请点击按钮"
			}
		},
		methods: {
			clickevent:function(){
				this.name="按钮已点击";
			},
		}
	}
</script>

<style>
.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;
}
</style>

冒泡事件的解决

<template>
	<view>
		<view class="box-inner" @tap="boxouterevent()">
			外面
			<view class="box-outer" @tap="boxinnerevent()">里面</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"请点击按钮"
			}
		},
		methods: {
			boxinnerevent:function(){
				console.log("点击了里面");
			},
			boxouterevent:function(){
				console.log("点击了外面");
			},
		}
	}
</script>

<style>
.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;
}
</style>

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

十、监听属性——watch

十一、计算属性 computed