郑剑峰的个人博客

安装vue-cli

➜  cnpm install -g @vue/vue-cli
➜  vue create vue2project
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

在创建项目的时候选择Vue2即可

如果不希望使用最新版的cli可以安装只支持vue2的clie

cnpm install -g @vue/cli@3.10.0

背景

长久以来都想找一个画流程图的工具，有几个需求，可以将组件拖到绘图面板中，并且组件间可以通过线进行关联，在属性面板可以配置组件的属性，这里的组件可能是html的组件，也可能是一个功能，为什么需要这么一个东西呢？如果有这东西，很多想法就可以实现，比如

• 工作流
• 服务编排

但一直找不到满意的框架，很大原因就是这些框架颜值太低，直到遇到NodeRed，NodeRed是物联网开发工具，提供可视化界面通过配置就能实现物联网程序的开发，让我感兴趣的是NodeRed可视化界面，颜值高，操作便利，简洁不花哨

因为NodeRed是开源的，也花了一段时间去研究他的代码，想把可视化工具抽离出为我所用，种种原因失败了，既然抽离不出来，能不能自己实现一个？之前从来没想过自己开发一个，但细想觉得并不难实现，可视化界面核心有两点

概述

在上一篇中，我们实现了vue对象的构建，并且已经初步实现了变量的绑定和事件绑定，现在我们就剩下一个问题需要解决，就是v-for指令的实现，这也是本系列中最难的部分。

难点

实现v-for有以下几个难点

• 表达式解析，v-for有两种语法item in items和(item,index) in items，第二种可以获取到序号，程序需要解析这两种语法
• 编译v-for内的元素，虽然已经有了compile函数，但是v-for循环内的上下文和vue并不一致，什么意思呢，compile里面绑定的值和变量是vue，vue是全局的，但v-for内绑定的变量是循环内的，每次都不一样

编译

在compile中，如果遇到v-for会先将v-for内的节点全部生成好，再作为子节点append到父节点上，因此第一步就是判断是否包含v-for指令

概述

在之前的章节中，我们创建了一个没有任何逻辑的vue对象，仅仅只是保证了var app = new Vue({...})不报错而已，这一篇我们将构建一个真正的vue对象，实现真正的值绑定。

build（构建）

这是html中创建vue的代码

var app = new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []
            },
            methods: {
                addTodo: function () {
                    this.todos.push({ text: this.newTodo });
                    this.newTodo = '';
                },
                deleteTodo: function (index) {
                    this.todos.splice(index, 1);
                }
            }
        })

思路是

• 创建vue对象
• 将data数据直接挂载到对象上，这样可以实现vue.newTodo的访问效果
• 将method直接挂载到桂香上，可以实现vue.addTodo的效果

# 背景

在上一章中，我们保证了代码不报错，并且参数也成功传进去了，但未实现任何的逻辑，这一章我们的工作就是完成dom的解析，在vue中，通过构建虚拟dom结构实现dom的高效更新和渲染，模仿这个思路，我们构建一个超级简单虚拟的dom结构，本着让所有人都能看得懂的目的，这次构建的dom结构不考虑性能，不考虑设计，以能实现功能为目的。

domParser（dom解析）

基本的思路：

• 从参数el指定的节点开始遍历
• 解析节点
• 解析子节点
• 递归的方式完成所有节点的解析

在上一章节中，我们用vue实现了简单的todo应用，如果我们把vue.js引用去掉，首先是界面显示原始文本内容

然后console报错

index.html:22 Uncaught ReferenceError: Vue is not defined
    at index.html:22

原因是我们在代码中通过代码var app = new Vue({...})创建了Vue对象，Vue对象是定义在vue.js中，现在没了vue.js自然报错。

这章的内容就是解决Vue对象找不到问题，让代码不再报错，为什么要先解决js报错问题而不是文本显示问题？因为Vue对象提供了Vue所有的功能，其中就包括值绑定，解决了值绑定的问题，界面自然也会恢复正常，所以先解决Vue对象找不到问题。

背景

首先声明，本人并不是前端大神，看过我之前的内容应该知道，我擅长做后端，虽然前端略有涉略，但谈不上精通，连熟悉都勉强。写这个系列的目的仅仅只是出于好奇，好奇为何前几年还是JQuery一统天下的前端局面如今为何如此混乱，好奇好好的js是如何被玩的亲妈都不认识，之所以选择vue作为切入点，完全是因为vue简单，基本看下demo就能入门，既然vue作为目前流行的前端三大框架之一，那么只要了解vue是怎么实现的，是不是对前端稍微有了一点认识，于是在这种想法的促使下，有了这个系列。

这里模仿vue并不是指我把vue的源码看了一遍，看懂了然后模仿vue写，而是语法还是vue的语法，但是实现我自己想办法实现，当然可以参考vue，但以我前端的水平想完全看懂vue难度有点大，所以如果你想了解vue源码实现，这个系列不适合你，但如果你和我一样，稍微会点js，又对vue源码无从下手，但又想知道如何实现跟vue一样的功能，那么就跟着我一起，我们不看源码，自己琢磨实现一个简单的vue。