概述

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