安装vue-cli

vue-cli最新版支持vue3和vue2项目的创建
➜  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

Read the rest of this entry

背景

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

  • 工作流
  • 服务编排

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

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

Read the rest of this entry

概述

上一篇中,我们实现了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指令

Read the rest of this entry

概述

之前的章节中,我们创建了一个没有任何逻辑的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的效果

Read the rest of this entry

# 背景

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

domParser(dom解析)

基本的思路:

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

Read the rest of this entry

上一章节中,我们用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对象找不到问题。

Read the rest of this entry

背景

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

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

Read the rest of this entry