uni-app学习之路

时间：2021-06-17 17:15:08 收藏：0 阅读：0

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:设置元素的排列方向