码迷,mamicode.com
首页 > 移动开发 > 详细

uni-app学习之路

时间:2021-06-17 17:15:08      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:nta   load   initial   cti   xib   之间   one   程序   nload   

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

 
 

uni-app学习之路

标签:nta   load   initial   cti   xib   之间   one   程序   nload   

原文地址:https://www.cnblogs.com/leoych/p/14893131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!