BNTang

2023年10月21日

摘要：前言经过上一篇文章的学习，完成了 v-on 指令的实现，接下来我们来实现将数据代理到 Vue 实例上。为什么要完成这个功能呢？因为我们在使用 Vue 的时候，可以直接通过 this.xxx 的方式来访问 data 中的数据，这样就不用每次都去访问 data 中的数据了，这样就方便了很多。现在在阅读全文

posted @ 2023-10-21 20:31 BNTang 阅读(50) 评论(0) 推荐(0)

手撕Vue-实现事件相关指令

摘要：经过上一篇文章的学习，实现了界面驱动数据更新，接下来实现一下其它相关的指令，比如事件相关的指令，v-on 这个指令的使用频率还是很高的，所以我们先来实现这个指令。 v-on 的作用是什么，是不是可以给某一个元素绑定一个事件。紧接着了解了 v-on 的作用之后，我在 example.html 的结构阅读全文

posted @ 2023-10-21 16:42 BNTang 阅读(409) 评论(2) 推荐(1)

手撕Vue-界面驱动数据更新

摘要：经过上一篇文章，已经将数据驱动界面改变的过程实现了，本章节将实现界面驱动数据更新的过程。界面驱动数据更新的过程，主要是通过 v-model 指令实现的, 只有 v-model 指令才能实现界面驱动数据更新的过程。好了，那么说了是通过 v-model 那么直接处理下 CompilerUtil 中的阅读全文

posted @ 2023-10-21 00:31 BNTang 阅读(66) 评论(0) 推荐(0)

2023年10月19日

手撕Vue-数据驱动界面改变下

摘要：经过上一篇的介绍，数据驱动界面改变 v-model 的双向绑定已告一段落, 剩余的就以这篇文章来完成。首先完成我们的 v-html，v-text, 其实很简单，就是将我们之前的 v-model 创建观察者的方法，在 v-html 和 v-text 中再写一次即可，创建属于 v-html 和 v-t 阅读全文

posted @ 2023-10-19 23:55 BNTang 阅读(721) 评论(0) 推荐(1)

2023年10月15日

手撕Vue-数据驱动界面改变中

摘要：经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中，实现数据驱动界面改变。在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二阅读全文

posted @ 2023-10-15 23:07 BNTang 阅读(58) 评论(0) 推荐(0)

手撕Vue-数据驱动界面改变上

摘要：经过上一篇的介绍，已经实现了监听数据的变化，接下来就是要实现数据变化后，界面也跟着变化，这就是数据驱动界面改变。想要实现数据变化之后更新UI界面，我们可以使用发布订阅模式来实现，先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。接下来我们就来实现这个代码。定义阅读全文

posted @ 2023-10-15 22:00 BNTang 阅读(95) 评论(0) 推荐(0)

手撕Vue-监听数据变化

摘要：经过上一篇的介绍，已经实现了将模板编译成具体数据，接下来要介绍的是如何监听数据的变化，本章主要完成这个需求即可。在我们文章的开始，我写了一个 Vue 双向数据绑定原理的文章当中封装了一个 Observer 类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。阅读全文

posted @ 2023-10-15 18:58 BNTang 阅读(75) 评论(0) 推荐(0)

手撕Vue-编译模板数据

摘要：经上一篇编译指令数据后，我们已经可以将指令数据编译成具体需要展示的数据了，上一篇只是编译了指令数据，还没有编译模板数据，这一篇我们就来编译模板数据。也就是 {{}} 这种模板的形式我们该如何编译，其实和指令数据编译的思路是一样的，废话不多说，直接上代码。改造一下 buildText 方法，让它支阅读全文

posted @ 2023-10-15 18:14 BNTang 阅读(63) 评论(0) 推荐(1)

手撕Vue-编译指令数据

摘要：经过上一篇的分析，完成了查找指令和模板的功能，接下来就是编译指令的数据了。所以本章节主要处理的方法则是 buildElement 方法，我们先分析一下我们所拿到的数据在进行编码，这样会更加清晰一些。我将 name, value 打印出来，分别对应的值是 name: v-model, value: 阅读全文

posted @ 2023-10-15 17:33 BNTang 阅读(444) 评论(0) 推荐(2)

手撕Vue-查找指令和模板

摘要：接着上一篇文章，我们已经实现了提取元素到内存的过程，接下来我们要实现的是查找指令和模板。大致的思路是这样的：遍历所有的节点需要判断当前遍历到的节点是一个元素还是一个文本如果是一个元素, 我们需要判断有没有v-model属性如果是一个文本, 我们需要判断有没有{{}}的内容那么随着思路的展阅读全文

posted @ 2023-10-15 10:51 BNTang 阅读(373) 评论(0) 推荐(1)

公告