vuejs—数据双向绑定

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

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

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

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

废话不多说，来看代码：

    
    
    
    
    
    



    

      

        名字： {{ uname }}
        
      
    

       
    
    
    

页面初始化效果：

页面初始效果.png

修改文本框内容：

改变文本框内容1.png

改变文本框内容2.png

注意点：

• 这里的span标签以及文本框必须包含在id为unameGroup的容器中，俗话说就是得在这个“作用域内”，不然没有效果。
• input上不是value={{uname}}，而是v-model="uname"

下一篇文章将学习如何渲染列表。