一、頁(yè)面模塊介紹

1.默認(rèn)創(chuàng)建后的代碼示例：

template類(lèi)型Android靜態(tài)文件，對(duì)view進(jìn)行聲明
<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>
//script 即 js代碼，針對(duì)數(shù)據(jù)進(jìn)行動(dòng)態(tài)處理
<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>
//style 對(duì)于靜態(tài)頁(yè)面樣式的聲明
<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

2.增加view以及動(dòng)態(tài)修改view文本
通過(guò)以上代碼，我們大致已經(jīng)對(duì)vue文件聲明有了基礎(chǔ)了解。現(xiàn)在我們需要在以上頁(yè)面添加一個(gè)輸入框，實(shí)現(xiàn)通過(guò)輸入框修改title view 即title數(shù)據(jù)的一個(gè)修改。以下是修改后的內(nèi)容：

<template>
    <view class="content" >
        <image class="logo" src="/static/logo.png"></image>
        <view >
            <text class="title">{{title}}</text>
//添加輸入框 view即input標(biāo)簽 同時(shí)將其默認(rèn)展示文本賦值為title。
//關(guān)鍵點(diǎn)：添加@input即對(duì)輸入框輸入動(dòng)作的監(jiān)聽(tīng)，并聲明傳入change事件。此事件的具體邏輯在下方
//js代碼模塊中
            <input type="text"  :value="title" @input="change"/>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello Word',
            }
        },
        onLoad() {

        },
        methods: {
//聲明change事件，并根據(jù)我們邏輯對(duì)數(shù)據(jù)進(jìn)行處理操作.
//由于titleview引用的為title變量，故我們只需要在文本輸入后動(dòng)態(tài)修改title變量即可實(shí)現(xiàn)view的刷新
            change(e){
//獲取輸入框的內(nèi)容
                var textTitle=e.detail.value;
//修改title變量?jī)?nèi)容為輸入框的內(nèi)容
                this.title=textTitle;
            
            }

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

由此我們就實(shí)現(xiàn)了對(duì)text title的一個(gè)動(dòng)態(tài)修改，通過(guò)以上代碼我們學(xué)習(xí)到了輸入框標(biāo)簽為input以及輸入框的輸入監(jiān)聽(tīng)為@input。