你的位置:首页 > 软件开发 > Java > 对vue源码的初步认识和理解

对vue源码的初步认识和理解

发布时间:2017-06-14 12:00:19
根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下面分享给大家,欢迎大家一起讨论。一、mvvm至少包含的内容指令集合,如:text、model等数据模型,与视图交互的数据组件的支持: ...

对vue源码的初步认识和理解

      根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下面分享给大家,欢迎大家一起讨论。

一、mvvm至少包含的内容

  1. 指令集合,如:text、model等
  2. 数据模型,与视图交互的数据
  3. 组件的支持:也就是部分html代码的动态更新

二、我的实现

对vue源码的初步认识和理解

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

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。