【UNI-APP】基础语法与使用

<template>
    <view class="content" :class="className" @click="open">
        <!-- 双向绑定 -->
        姓名:{{ name }}
        <!-- 双向绑定 -->



        <!-- IF 语句的使用 -->
        <view class="content" :class="className" v-if="is_show">
            IF==Ture 语句
        </view>
        <view class="content" :class="className" v-if="is_true=='show' ">
            is_true=='show' 的时候显示
        </view>
        <button @click="changeIF">隐藏IF语句</button>
        <!-- IF 语句的使用 -->





        <!-- FOR 语句的使用 -->
        <view class="content" :class="className" v-for="item,index in data_list">
            {{ item.name }} -- {{ item.id }} -- {{ index }}
        </view>
        <!-- FOR 语句的使用 -->






        <!-- 基础组件的使用 注意：组件属性一定是放在属性标签内的，显示的效果是放在属性组件里面的标签内进行显示-->
        <view>
            <scroll-view class="scroll"  scroll-y="true"  @scroll="scroll"  show-scrollbar="true" enable-flex="true">
                <view v-for="item in 50" >
                    {{ item }}
                </view>
            </scroll-view>
            
             <input class="uni-input"  placeholder="请输入值" v-model="text"/>
             <button @click="beatIt">打印输入框的值</button>
             <view>输出的值：{{ input_text }}</view>
        </view>
        <!-- 基础组件的使用 -->
        
        
        
        
        
        
        
        
        <!--  自定义组件 -->
        <view>
            <!-- 条件编译  #ifndef 除了哪个平台都编译 -->
            <!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
            <btn class="color"></btn> <!-- 使用导入的本地样式包 样式名-->
            <!-- #endif -->
            <!-- 条件编译 -->
        </view>
        <!--  自定义组件 -->
        
    </view>

</template>

<script>
    /* 只要导入就可以使用*/
    import btn from "../../components/btn/btn.vue"
    
    export default {
        // 声明一下导入组件
        components:{
            btn,
        },
        /* 数据默认定义 */
        data() {
            return {
                name: "wanghong",
                className: 'active',
                is_show: true,
                is_true: "",
                input_text: "",
                text:"",

                data_list: [{
                        id: 1,
                        name: 'wanghong'
                    },
                    {
                        id: 2,
                        name: 'zhangsan'
                    },
                    {
                        id: 3,
                        name: 'lisi'
                    },
                ],

            }
        },
        
        // 页面加载的时候
        onLoad() {
            // 条件编译   #ifdef 
            /* 使用封装好的API */
            uni.getSystemInfo({
                success(res) {
                        console.log(res)
                },
                fail(err) {
                    console.log(err)
                },
                complete(mes) {
                    console.log(mes)
                }
            })
        },
        
        // 监听页面的初次渲染完成
        onReady() {
            console.log("监听页面的初次渲染完成")
        },
        
        // 监听页面显示
        onShow() {
            console.log("监听页面显示")
        },
        // 监听页面隐藏
        onHide() {
            console.log("监听页面隐藏")
        }
        // 监听页面卸载
        onHide() {
            console.log("监听页面卸载")
        }
        
        methods: {
            // 条件编译   #ifdef 
            
            /* 双向绑定 */
            open() {
                // console.log("我被点击了")
                this.name = "我被修改了"
                // this.className = 'scroll'  # 点击后更换CLASS样式名 

            },

            /* IF语句 */
            changeIF() {
                this.is_show = false
                this.is_true = "show"
                console.log(this.is_true)
            },

            /*  基础组件的使用 */
            scroll(e) {
                // console.log(e)
            },
            refresher(){
                console.log("我被啦了")
            },
            beatIt(){
            
                this.input_text = this.text
            },
            
            
            

        }
    }
</script>

<style>
    /*   导入样式包 */
    /* @import url(""); */   /* 导入CDN*/  
    @import "./index.css"; /* 导入本地*/
    
    /* 条件编译 #ifdef */
    .active {
        color: #4CD964;
    }

    .scroll {
        height: 100px;
        border: #007AFF 1px solid;
    }
    
    page{
        /* 背景颜色 */
        background-color: #007AFF;
    }
</style>