vuejs—数据双向绑定

上一篇文章，介绍了如何通过vue.js实现页面输出hello vue.js，这篇文章将介绍如何通过其实现数据双向绑定

我们有这样一个需求，文本框中输入什么内容，文本框中的内容就显示在页面上。
你会说，这个很简单，我只要监听文本框内容改变事件就可以实现了。
但是这里的需求只是修改一处，如果文本框内容改变后需要同时修改20个地方的显示呢？
那得执行大量的DOM操作。

vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再重复，我介绍肯定也没网上大神们介绍的详细，大家可以自行百度，谷歌。

什么？在墙内谷歌不了，那我推荐你一个软件，不需要任何配置，只需要双击运行，支持MAC、Windows、Unbuntu、Android，真的很好用，狠戳这里。

废话不多说，来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>demo01</title>
    <link rel="stylesheet" href="../css/base/bootstrap.min.css">
    <link rel="stylesheet" href="../css/base/common.css">
</head>
<body>

    <div class="container mt15">
      <fieldset class="form-group" id="unameGroup">
        <label for="userName">名字：</label> <span id="title">{{ uname }}</h1>
        <input type="text" class="form-control" id="userName" placeholder="请输入名字" v-model="uname">
      </fieldset>
    </div>

    <script src="../js/base/vue.js"></script>   
    <script src="../js/base/jquery.min.js"></script>
    <script src="../js/base/bootstrap.min.js"></script>
    <script>
        new Vue({
          el: '#unameGroup',
          data: {
            uname: ''
          }
        });
    </script>
</body>
</html>

页面初始化效果：