02Vue.js的数据绑定

理解Vue的双向数据绑定

Vue有一个显著的地方就是它拥有双向数据绑定功能，那么何为双向数据绑定呢？
双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。
这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代，远远抛弃了Dom开发主导的时代了。

下面我们来简单看一个示例实现一个简单的双向数据绑定代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 在页面上放置一个input标签 通过v-model双向绑定数据 -->
        <input type="text" v-model="info">
        <p>{{info}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                info:'数据双向绑定',
            }
        })
    </script>
</body>
</html>

显示的效果如下所示:

image.png

02Vue.js的数据绑定

理解Vue的双向数据绑定

推荐阅读更多精彩内容