Vue2的响应式数据

在Vue2中，我们如果希望我们的数据是响应式的，我们应该把数据写在data配置项中

<template>
    <div>
        <!-- 差值表达式,将数据展示在页面上 -->
        <h3>{{ msg }}</h3>
        <!-- 给按钮绑定点击事件 -->
        <button @click='changeMsg'>把四川成都修改为四川绵阳</button>
    </div>
</template>

<script>
export default { 
    name: 'TestComponent',
    data(){ 
        
        return { 
            // 由data配置项返回的对象里面的数据都是具有响应式的
            msg: '四川成都'
        }
    },
    // methods配置项，用于配置方法
    methods: { 
        changeMsg(){
            console.log(this) // TestComponent组件实例对象
            this.msg = '四川绵阳'
        }
    }
}
</script>

这样当我们点击按钮的时候，我们把data返回的对象改变了，页面上的数据页自动更改了，这就是一个数据响应式的基本使用，页面上的内容根据我们的数据进行动态的改变