用vue的双向绑定简单实现一个todo-list的示例代码-创新互联
前言
最近在学习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的示例代码-创新互联
文章来源:http://scyanting.com/article/cecjie.html