{3}uni-app和vuejs基础快速上手

一、css3选择器

1.<template>

2.

3.           

4.class="view-box animated" hover-class="view-box-hover bounceIn">

5.             第一个view  

6.

7.id="view2">view2

8.class="box">

9.text1

10.view1

11.view2

12.view3

13.view4

14.view5

15.

16.           

17.这是第一行\n这是第二行\n这是第三行

18.:selectable="true">这是第一行\n这是第二行\n这是第三行

19.

20.

1、id选择器

1. #view2{  

2.border: 1upx solid #CCCCCC;

3.background-color: #FFDF34;

4.width: 100upx;

5.height: 100upx;

6.padding: 5upx;

7. }  

2、下级选择器

1. .box>view:nth-child(1){/**/  

2.color: #007AFF;

3. }  

4. .box>view:nth-child(2){  

5.color: #09BB07;

6. }  

7. .box>view:nth-of-type(3){  

8.color: #FFDF34;

9. }  

10. .box>view:first-child{  

11.font-size: 36upx;

12. }  

13. .box>view:last-child{  

14.font-size: 20upx;

15. }  

16. .box>view:first-of-type{  

17.background-color: #CCCCCC;

18. }  

19. .box>view:last-of-type{  

20.background-color: #FFFFFF;

21. }  

22. .box>view:nth-of-type(odd){/*奇数选择*/  

23.font-weight: bolder;

24. }  

25. .box>view:nth-of-type(even){/*偶数选择*/  

26.font-weight: lighter;

27. }  

二、flex布局

1、display:flex默认排列在一行

2、自动换行flex-wrap: wrap;  

3、倒序自动换行flex-wrap:wrap-reverse;

4、水平居中justify-content: center;

5、左右对齐justify-content: space-between;

6、左对齐justify-content: flex-start;

7、右对齐justify-content: flex-end;

8、垂直居中align-items: center;

9、竖直排列flex-direction: column;

10、不压缩flex-shrink: 0;

11、填充比例flex:1(平均填充)

三、数据渲染

1、数据绑定{{}}

1.   

11.   

12.   

四、class和style绑定

1.<template>

2.

3.