uni-app学习之路

MVC模式
1. model:模型层，数据的增删改查
2. view：视图层，前端页面
3. controller:控制层，处理业务

文件页面结构
1. 页面以`.vue`结尾
2. `template`,`script`,`style`三个标签，一个页面只能存在一个
3. 代码段分析如下所示：

<script>
    //vm(view-model)：协调者调度器
    export default {
        // model 所有的数据
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        // 所有自定义的方法函数都写在这里
        methods: {

        }
    }
</script>

 

v-if与v-show的区别
前者在DOM中被移除，后者display:none

在不同端进行编译

<template>
    <view>
        <!-- #ifdef H5 -->
            <view>只在H5编译</view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
            <view>只在ios/安卓编译</view>
        <!-- #endif -->
        <!-- #ifdef MP -->
            <view>只在小程序编译</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
            <view>只在微信小程序编译</view>
        <!-- #endif -->
        
        <!-- #ifndef MP -->
            <view>不在小程序编译</view>
        <!-- #endif -->
        
        <view class="color"></view>
    
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        onLoad(){
            // #ifdef H5
            console.log("只在H5编译");
            // #endif
            
            // #ifdef APP-PLUS
            console.log("只在ios/安卓编译");
            // #endif
            
            // #ifdef MP
            console.log("只在小程序编译");
            // #endif
            
            // #ifdef MP-WEIXIN
            console.log("只在微信小程序编译");
            // #endif
        },
        methods: {
            
        }
    }
</script>

<style>
    .color{
        /* #ifdef H5 */
            background-color: #008000;
        /* #endif */
        
        /* #ifdef MP-WEIXIN */
            background-color: #007AFF;
        /* #endif */
        
        width: 250upx;
        height: 250upx;
    }
    
    
</style>

flex布局
1. flexible box:弹性盒状布局
2. 容器控制内部元素的布局定位
3. 伸缩元素，自由填充，自适应

布局优势
- 可在不同方向排列元素
- 控制元素排序的方向
- 控制元素的对齐方式
- 控制元素之间的差距
- 控制单个元素放大与缩放比例、占比、对齐方式

flex布局常用术语
1. flex contaier:flex容器
2. flex item: flex项目（元素）
3. flex direction: 布局方向

flex容器的属性
1. flex-direction:设置元素的排列方向

 

.container{
        /* 定义flex容器 */
        display: flex;
        /* 设置容器内部元素的排列方向
         row: 定义排列方向 从左到右
         row-reverse: 从右到左
         column: 从上到下
         column-reverse: 从下到上
         */
        flex-direction: column-reverse;
    }

 

引入外部样式：

<style>
@import url("flex-direction.css");
</style>

flex-wrap:使容器内的元素换行

/*
 nowrap:不换行
 wrap:换行
 */
flex-wrap: nowrap;

jsutify-content:设置元素在主轴上的对齐方式

/* 
    设置元素在主轴上的对齐方式
    flex-start:默认属性，左对齐 或者向上对齐
    flex-end:右对齐 或者向下对齐
    center:居中对齐
    space-between: 两端对齐，空白均匀的填充到flex成员项之间
    space-around:元素两边平均等分剩余空白间隙部分，最左(上)或最右(下)和元素之间距离是1:2
 */
justify-content: space-between;

align-items:设置元素在交叉轴上的对齐方式

/* 
 设置容器元素在交叉轴中上对齐的方式
 stretch: 默认值，当元素的高度没有设置，则元素的高度会拉甚至容器高度一致
 flex-start:在交叉轴上向起点位置(向上/向左)对齐
 flex-end: 在交叉轴上向结束(向下/向右)位置
 center: 居中对齐
 baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线)
 */
 align-items: baseline;