一、页面模块介绍

1.默认创建后的代码示例：

template类型Android静态文件，对view进行声明
<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代码，针对数据进行动态处理
<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>
//style 对于静态页面样式的声明
<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以及动态修改view文本
通过以上代码，我们大致已经对vue文件声明有了基础了解。现在我们需要在以上页面添加一个输入框，实现通过输入框修改title view 即title数据的一个修改。以下是修改后的内容：

<template>
    <view class="content" >
        <image class="logo" src="/static/logo.png"></image>
        <view >
            <text class="title">{{title}}</text>
//添加输入框 view即input标签 同时将其默认展示文本赋值为title。
//关键点：添加@input即对输入框输入动作的监听，并声明传入change事件。此事件的具体逻辑在下方
//js代码模块中
            <input type="text"  :value="title" @input="change"/>
        </view>

    </view>
</template>

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

        },
        methods: {
//声明change事件，并根据我们逻辑对数据进行处理操作.
//由于titleview引用的为title变量，故我们只需要在文本输入后动态修改title变量即可实现view的刷新
            change(e){
//获取输入框的内容
                var textTitle=e.detail.value;
//修改title变量内容为输入框的内容
                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>

由此我们就实现了对text title的一个动态修改，通过以上代码我们学习到了输入框标签为input以及输入框的输入监听为@input。