实现一个简单的类 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数据监听的方法
相关文章推荐
- 实现一个简单的类 Vue 框架(二) —— 数据的绑定之修改可监听的数据绑定方法
- VUE+SSM 以VUE做项目前端,SSM做后端框架,难点在于数据的传输处理,下面我记录一下一个简单的登录退出功能的实现,如果有缺陷还请大佬指出,个人菜鸟 一个,正在学习当中,以此记录一下自己的学习
- Vue数据双向绑定原理及简单实现方法
- 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定
- 应用defineProperty简单实现vue的双向数据绑定
- JavaScript数据绑定实现一个简单的 MVVM 库
- JavaScript实现简单的双向数据绑定(Ember、Angular、Vue)
- 用vue的双向绑定简单实现一个todo-list的示例代码
- Vue组件内部实现一个双向数据绑定的实例代码
- RoboBinding:一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架
- C#数据绑定(DataBinding)简单实现方法
- 基于vue框架手写一个notify插件实现通知功能的方法
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- 简单实现Vue数据双向绑定
- Vue数据绑定原理及简单实现
- 理解vue实现原理,实现一个简单的Vue框架
- 利用 JavaScript 数据绑定实现一个简单的 MVVM 库
- vue 标签属性数据绑定和拼接的实现方法
- Yii框架批量插入数据扩展类的简单实现方法
- 基于vue实现一个简单的MVVM框架