Vue数据绑定

Vue核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>data-bind</title>
</head>

<body>
    <!--
        数据绑定：
            1.单向数据绑定：v-bind:属性名，数据只能从data流向页面
            2.双向数据绑定：v-model，数据可以在data和页面双向流动，默认收集的是data数据
    -->
    <div id="root">
        单项数据绑定：<input type="text" v-bind:value="name" disabled>
        <br />
        双向数据绑定：<input type="text" v-model="name">
    </div>
    <script>
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            data: {
                name: "atguigu",
            },
        });
    </script>
</body>

</html>