Uni-app初体验（页面绑定数据）

template中：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
            <input :value="title" @input="changeWords"/>
        </view>
    </view>
</template>

添加一个input标签，:value会监控data()里面的值，并给自身赋初始值。那么一开始输入框的值就是title的值。

@input表示监听输入时间，调用方法。

<script>
    //ViewModel 协调者调度器
    export default {
        //Model  所有的数据
        data() {
            return {
                title: '阿杜的处子秀'
            }
        },
        onLoad() {

        },
        methods: {
            changeWords(e){
                var words=e.detail.value;
                this.title=words;
            }
        }
    }
</script>

在methods写入方法。当输入值就改变title的值，由于是双向绑定，所以本身的标题也会随着输入改变。

然后自定义数据

        data() {
            return {
                title: '阿杜的处子秀',
                Adu:{
                    Age:18
                },
                Skills:["Sing","Dance","Rap","Play Basketball"]
            }
        },

在template中

        <view>
            I am Adu,I am {{Adu.Age}} years old.
            I can {{Skills[0]}},{{Skills[1]}},{{Skills[2]}},{{Skills[3]}}.
        </view>

引入双括号{{}}就可以使用data()中自定义的数据了