根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下面分享给大家,欢迎大家一起讨论。一、mvvm至少包含的内容指令集合,如:text、model等数据模型,与视图交互的数据组件的支持: ...
根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下面分享给大家,欢迎大家一起讨论。
一、mvvm至少包含的内容
- 指令集合,如:text、model等
- 数据模型,与视图交互的数据
- 组件的支持:也就是部分html代码的动态更新
二、我的实现
1. 变量的定义与watch的实现
var directives = {}; //指令集合var vNodes = new Array(); //解析的Dom集合var dataModel = { name:"name", title: "title"}; //数据Modelvar Watch = { isInit: false, watchs: new Array(), run: function(newValue, expOrfn){ var self = this; if(!self.isInit){ expOrfn.call(vModel); } this.watchs.map(function(data,index){ data.nodes.map(function(d,i){ if(self.isInit){ d.directive.init(newValue, d, data); //绑定初始化值, 以及初始化一些事件 }else{ d.directive.update(newValue, d, data); //只更新值,此时run的调用来值value-set } }); }); self.watchs = []; }, push:function(watch){ this.watchs.push(watch); }} //任务管理
原标题:对vue源码的初步认识和理解
关键词:VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。