写在前面本篇是从零实现 vue2 系列第七篇，在 YourVue 中实现 v-if 和 v-for。文章会最先更新在公众号：BUPPT。代码仓库：https://github.com/b...

写在前面本篇是从零实现 vue2 系列第四篇，为 YourVue 添加虚拟 dom。之前在第一篇实现 vue 流程的时候，将模版解析成 ast，直接生成了真实 dom。这并不是 vue 的实现方式，真正的实现方式是将 parse(template) 生成的 ast 通过 gencode 生成 render 函数，然后执行 render 函数生成 VNode，构建虚拟 dom 树，然后通过虚拟 dom 树创建真实 dom。代码仓库：https://github.com/buppt/YourVue正文

写在前面本篇是从零实现 vue2 系列第三篇，为 YourVue 添加数组监听。文章会最先更新在公众号：BUPPT。代码仓库：https://github.com/buppt/YourVue正文上一篇我们实现了双向绑定，篇幅原因没有处理数组。我们知道 vue 是通过重写了几个数组的方法实现的数组监听，先在 Observer 中添加几行代码。class Observer{ constructor(value) { this.value = value this

写在前面本篇是从零实现 vue2 系列第二篇，为 YourVue 添加双向绑定。双向绑定大家可能都比较熟悉来，如果你能回答出下面几个问题，就可以跳过看下一篇了：vue2 通过 Object.defineProperty 修改 get 和 set 方法，实现订阅发布。为什么要用栈结构的 Dep.target 来存储当前 watcher ？为什么 watcher 每次更新后要 cleanupDeps，以及是如何 cleanupDeps 的？代码仓库：https://github.com/buppt

写在前面vue3 马上要来了，vue2 学会了吗？最近看到了不少类似标题的文章，虽然 vue 的双向绑定、虚拟dom、diff算法等等面试常见问题你可能在几年前就学过了，不过让从零开始实现一个 vue，你可以吗。本着学习的最好方法就是自己实现一次的原则，趁着疫情无法返校，计划实现一个尽量完整的 vue，删掉了 flow 和很多的类型判断，只保留各功能的主流程，旨在为直接阅读 vue 源码提供过渡。毕竟 vue 源码还是比较难啃的，看网上的文章也很难将各个模块联系起来。跟着我先搭起整个框架，然后一个功

网上实现虚拟dom的文章也很多了，本项目代码结构、函数等完全按照vue@2.5.17源码思路实现，主要也是为了总结一下自己的学习。github地址在这里。从图中可以看到，这个dom树改变了许多地方，但是只新建了一个div元素，这说明其余的元素只是做了移动和文本内容的修改，这比重新渲染整棵dom树要节省很多资源。不多解释了，下面直接看代码吧。因为vue是通过模版解析之后生成的虚拟dom，我主要...

其实写双向绑定的文章也挺多了，不过都没有仔细讲发布者-订阅者模式在其中的使用，本文尽量讲解清楚所有代码，代码结构、函数等完全按照vue@2.5.17源码思路实现（除了新建vue类以及初始化的时候）。github地址在这里。图中，input的value、h1、h2都与data.name绑定，可以通过input改变data.name，data.name改变后（发布者）与之绑定的h1、h2（两个订阅者...

最近想仿一下美团app里的榛果民宿，当做移动端的练习。github地址在这里，还没做完。按照app里的图片切换效果想了一个简单的实现思路，在这个基础上做更复杂一点更炫酷一点的轮播应该也是可以的。效果如图。代码其实很简单，<div id="slider" class="slider"> <img v-

mongodb的下载和使用可以看这篇文章 。koa2也可以查看我之前的文章。项目源码在github。开始mongodb后，使用nodejs建立一个mongodb数据库的连接。var MongoClient = require('mongodb').MongoClient;var url = "mongodb://localhost:27017/";var dbMongoClient....

做这个主要是学习使用一下canvas和websocket，项目地址。你画我猜大家应该都玩过，一个人画，其他人猜。现在刚刚实现了最基本的功能，以后还会慢慢修改的。先安装node的ws模块，然后使用node做一个简单的后端，作用就是接受websocket连接，将收到的一个用户发过来的数据发送给所有用户。// 导入WebSocket模块:const WebSocket = require('w...

最近实习的项目需求上要求不多，就学了下项目优化，主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 安装npm install --save-dev webpack-bundle-analyzer在webpack中设置如下，然后npm run dev 的时候默

前端开发时，请求后台接口经常需要跨域，vue-cli实现跨域请求只需要打开config/index.js，修改如下内容即可。

打开vue-cli项目中的 router.js 文件，修改如下...

jquery和bootstrap真的是神器哈哈~引入jquery1.在vue-cli目录下运行npm install jquery –save-dev，如果安装了cnpm淘宝镜像建议使用cnpm。2.打开build/webpack.base.conf.js，加入以下代码var webpack = require('webpack');plugins:[ new webpack.optimi

我们知道父组件通过props可以控制子组件，如果需要子组件控制父组件就需要加一个v-on自定义事件。将vue官方文档中的props和v-on绑定自定义事件结合起来，就可以实现父组件与子组件之间的双向绑定了。