【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>