您的位置:首页 > Web前端 > Vue.js

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

2019-05-17 15:12 676 查看

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

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

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

代码:

[code]/* 最简单粗暴的数据绑定 */
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数据监听的方法

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: