手动实现一个vue的mvvm,思路解析
1、解析dom、fragment编译,初始化new watcher
2 ,数据劫持,Object.defineProperty(obj,key,{
configurable:true,// 可以配置
enumerable:true, // 可以枚举
get:function(){return value}, // 添加wacher,添加订阅者
set:function(newValue){ return newValue} // noticfy:执行,更新数据
})
3, 发布订阅模式:
什么是发布订阅者模式呢?举个例子:大爷我要传授们手艺,我这里收了很多徒弟,为了节约时间,我将他们记录在我的邮件里,等我准备好资料,在我这里留底的人员进行群发
接下里开始代码实现的过程
1,创建一个简单的应用,
<div id="mvvm-app"><input type="text" v-model="word"><p>{{word}}</p><button v-on:click="sayHi">change model</button> </div><script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js/mvvm.js"></script> <script> var vm = new MVVM({ el: '#mvvm-app', data: { word: 'Hello World!' }, methods: { sayHi: function() { this.word = 'Hi, everybody!'; } } }); </script>
效果:
2,我们先初始化将模板中的 {{}}替换,创建compile函数进行编译,替换
function MVVM(options) {
this.$options = options; // this是挂载vm上的,防止和data里面取值冲突,我们这里定义属性的,传递的data,用一些特定的字符来区别,按照我们在var data = this._data = this.$options.data;// 源码上注解,我们的data采用,_data,我们的属性采用$optionsobserve(data, this);this.$compile = new Compile(options.el || document.body, this) }
3,我们要开始实现我们的Compile函数
实现watcher
实现observe
整体实现此路,需要一张图演示实现思路
图片上传不好使了,上传一个图片,沾上图片链接
https://wx2.sinaimg.cn/mw690/9f27f7e9ly1g2v1spxutbj20s00860tp.jpg
转载于:https://www.cnblogs.com/yayaxuping/p/10837744.html
手动实现一个vue的mvvm,思路解析相关推荐
- vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置...
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
- uglifyjs报错 webpack_基于vue2.X的webpack基本配置,教你手动撸一个webpack4的配置
webpack说复杂也不复杂.不复杂,核心概念不外乎是entry, output, loader, plugins.webpack4还新增了optimization选项,用于代码分割和打包优化.现在w ...
- 【数据结构与算法】详解什么是图结构,并用代码手动实现一个图结构
本系列文章[数据结构与算法]所有完整代码已上传 github,想要完整代码的小伙伴可以直接去那获取,可以的话欢迎点个Star哦~下面放上跳转链接 https://github.com/Lpyexplo ...
- c# mvvm模式获取当前窗口_对Vue中的MVVM原理解析和实现
首先你对Vue需要有一定的了解,知道MVVM.这样才能更有助于你顺利的完成下面原理的阅读学习和编写 下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向 ...
- vue 分模块打包 脚手架_手动撸一个webpack4脚手架(仿vuecli2)
其实vue的脚手架是真的多,vue的nuxt脚手架的,vue的webpack脚手架的,还有各种gitHub上的后台管理系统模板的..... 而vue-cli2的webpack模板,这个相信是大多数人最 ...
- 手把手教你Vue从零撸一个迷你版MVVM框架
这段时间 在工作之余的休息时间,学习了解Vue ,学习Vue的设计思想,通过Vue官网学习Vue的语法,通过Vue前端技术,搭建构建了一个简单的项目,在项目学习完之后,发现Vue是一个很有意思的前端技 ...
- Mvvm、第一个Vue程序、Vue基本语法
一.MVVM概述 1.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silv ...
- 对类Vue的MVVM前端库的实现
关于实现MVVM,网上实在是太多了,本文为个人总结,结合源码以及一些别人的实现 关于双向绑定 vue 数据劫持 + 订阅 - 发布 ng 脏值检查 backbone.js 订阅-发布(这个没有使用过, ...
- C# 淘宝商品微信返利助手开发-(九)编写一个vue页面用于复制淘口令
系列教程一目录:返利助手原理 系列教程二目录:返利助手开放文档以及帐号申请地址 系列教程三目录:返利助手开发(1)API介绍 系列教程四目录:返利助手开发(2)淘宝分享的内容如何只取淘口令 系列教程五 ...
- 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
最新文章
- 史上最简单粗暴获取阿里巴巴iconfont图标,并引用到vant的方法(没有之一)
- ES6 常用的特性整理
- python上下文管理器with
- Linux -- free 命令 内存适用状态监控
- ubuntu软件(查看文件差异)
- JVM学习笔记-01-JVM的学习方式
- 96.2. Yum 安装
- 用汇编的眼光看C++(之虚函数)
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
- 众说纷“云”之云安全企业用户追踪寻访
- linux新建mysql用户命令_使用MySQL命令行新建用户并授予权限
- 煤矿智能更衣柜管理系统解决方案
- 数字图像处理笔记(九)基本的形态学算法
- Life feelings--9--Mamba out 科比走了,给我们留下的那些惦念
- git官网下载不了或下载很慢的解决办法!
- Java代码简洁-validation参数校验
- 零时科技 || DPC攻击事件分析
- java商城毕业设计 JavaWeb家具家居购物商城毕业设计(8)商品评论列表
- 64编码格式数据转 json数据 php,PHP的json数据编译和解译,字符编码无关。
- JS求最接近5的倍数