实现一个简单的类 Vue 框架（一） —— 数据的绑定之简单粗暴方法

本文主要是介绍实现一个简单的类 Vue 框架（一） —— 数据的绑定之简单粗暴方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue框架的核心概念一个是数据绑定，一个是虚拟Dom;先实现数据绑定。本框架命名为Sue。旨在模拟实现一个类Vue

一.最简单粗暴的数据绑定方法

要点：1.call的使用。2.for in 

代码：

/* 最简单粗暴的数据绑定 */
function Sue(options) {initData(this,options)if (typeof options.ready === 'function') {options.ready.call(this)}
}function initData (vm,options) {var data = options.data;data = typeof data === 'function' ? data() : data || {};for (var key in data) {if (data.hasOwnProperty(key)) {vm[key] = data[key]}}
}new Sue({data(){return {name:'ssx',age:18}},ready(){console.log("name",this.name);console.log("age",this.age);}
})

存在的问题：数据修改后不能监听到。所以需要有一种机制来实现数据修改可以监听到。看下篇文章：Vue数据监听的方法

这篇关于实现一个简单的类 Vue 框架（一） —— 数据的绑定之简单粗暴方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---