用vue的双向绑定简单实现一个todo-list的示例代码-创新互联

前言

创新互联长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为珠海企业提供专业的网站设计制作、网站设计，珠海网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。

github地址：todo-list

学习链接

前排感谢以下文章，对我理解vue的基本原理有很大的帮助！

剖析vue实现原理，自己动手实现mvvm by DMQ 

对vue早期源码的理解 by 梁少峰

实现效果

数据代理

1.简单介绍数据代理

正常情况下，我们都会把数据写在data里面，如下面所示

var vm = new Vue({
  el: '#app',
  data: {
    title: 'hello world'
  }
  methods: {
    changeTitle: function () {
      this.title = 'hello vue'
    }
  }
})
console.log(vm.title) // 'hello world' or 'hello vue'

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：用vue的双向绑定简单实现一个todo-list的示例代码-创新互联
URL分享：http://wjwzjz.com/article/cecjie.html