手撕Vue-编译指令数据

经过上一篇的分析,完成了查找指令和模板的功能,接下来就是编译指令的数据了。

所以本章节主要处理的方法则是 buildElement 方法,我们先分析一下我们所拿到的数据在进行编码,这样会更加清晰一些。

我将 name, value 打印出来,分别对应的值是 name: v-model, value: name,在今后我们的命令中可不止只有 v-model,还有 v-text、v-html、v-on 等等,所以我们需要对这些指令进行分类,然后再进行编译。

所以我这里特意定义了一个工具类叫 CompilerUtil,用来处理指令的分类,代码如下:

let CompilerUtil = {/*** 处理 v-model 指令* @param node 当前元素* @param value 指令的值* @param vm Nue 的实例对象*/model: function (node, value, vm) {},html: function (node, value, vm) {},text: function (node, value, vm) {}
}

然后我们在 buildElement 方法中调用这个方法,代码如下:

// 解构 name
let [, directive] = name.split('-');
// v-model -> [v, model]// 2.根据指令名称, 调用不同的处理函数
CompilerUtil[directive](node, value, this.vm);

这样我们就可以根据指令的名称,调用不同的处理函数了。

接下来我们就来处理 v-model 指令,代码如下:

/*** 处理 model 指令* @param node 当前元素* @param value 指令的值* @param vm Nue 的实例对象*/
model: function (node, value, vm) {node.value = vm.$data[value];
},

这样我们就可以将数据渲染到页面上了,打开浏览器,可以看到效果如下:

image-20231015171034901

v-model 指令已经可以正常使用了,但是还有问题,就是我们的数据结构目前是比较简单的,那么如果我们的数据是一个对象呢,例如:

image-20231015172334067

time: {h: 10,m: 10,s: 10
}

在用 input 绑定 v-model 进行渲染发现,只有第一个 input 能够正常渲染,其他的 input 都是 undefined,这是为什么呢?

<input type="text" v-model="time.h">
<input type="text" v-model="time.m">
<input type="text" v-model="time.s">

那么这里就要去看一下我们 model 方法的实现了,如果是 time.h,value 等于的值为 time.h, 然后我们在执行 vm.$data[value] 就变为了 vm.$data[time.h], 正常的获取这种数据结构的方式应该是先 vm.$data[time] 拿到 time 对象,然后再 time[h] 拿到 h 的值,所以我们需要对这种数据结构进行处理,为了已维护,我这里单独抽离了一个方法出来进行处理获取 value,方法名字叫做 getValue,代码如下:

getValue(vm, value) {// time.h --> [time, h]return value.split('.').reduce((data, currentKey) => {// 第一次执行: data=$data, currentKey=time// 第二次执行: data=time, currentKey=hreturn data[currentKey];}, vm.$data);
},

reduce 方法被用于迭代这个字符串数组。它接受一个回调函数,这个回调函数在每次迭代中被调用。在这个回调函数中,data 是上一次迭代的结果,而 currentKey 是当前迭代的数组元素(键路径中的一个部分)在每次迭代中,回调函数通过 data[currentKey] 的方式访问嵌套对象的属性,然后将这个属性的值作为下一次迭代的 data, 最终,reduce 方法将遍历整个键路径,直到达到最深层的属性,然后返回该属性的值。这样我们就可以正常的获取到数据了,最后在改造一下之前 model 方法获取值的地方,调用下刚刚编写的 getValue 方法即可:

model: function (node, value, vm) {node.value = this.getValue(vm, value);
},

再次打开浏览器,可以看到效果如下:

image-20231015172812038

这个搞定之后,我们紧接着把 v-html 和 v-text 也搞定,代码基本上都是一样的,只是渲染的方式不一样,代码如下:

/*** 处理 html 指令* @param node 当前元素* @param value 指令的值* @param vm Nue 的实例对象*/
html: function (node, value, vm) {node.innerHTML = this.getValue(vm, value);
},
/*** 处理 text 指令* @param node 当前元素* @param value 指令的值* @param vm Nue 的实例对象*/
text: function (node, value, vm) {node.innerText = this.getValue(vm, value);
}

编写测试代码:

image-20231015173151943

html: `<div>我是div</div>`,
text: `<div>我是div</div>`

编写HTML代码:

<div v-html="html">abc</div>
<div v-text="text">123</div>

打开浏览器,可以看到效果如下:

image-20231015173252270

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Redis】Zset 有序集合命令

目录 命令ZADDZCARDZRANGEZCOUNTZREVRANGEZRANGEBYSCOREZPOPMAXBZPOPMAXZPOPMINBZPOPMINZRANKZREVRANKZSCOREZREMZREMRANGEBYRANKZREMRANGEBYSCOREZINCRBY 命令 ZADD 添加或者更新指定的元素以及关联的分数到zset中&#xff0c;分数应该符合double类型&#xff0c;inf/-inf作为…

mac M1 pro 安装grpc 报错

pecl install grpc # a few moments later 。。。。# 执行 php -i | grep grpc## 报错 PHP Warning: PHP Startup: Unable to load dynamic library grpc.so(tried: /opt/homebrew/lib/php/pecl/20190902/grpc.so (dlopen(/opt/homebrew/lib/php/pecl/20190902/grpc.so, 0x0…

JVM八股文

1.JVM的内存结构&#xff1f; 2.OOM是什么&#xff0c;怎么排查&#xff1f; 3.请解释四种引用是什么意思有什么区别&#xff1f; 4.GC的回收算法有哪些&#xff1f; 5.怎么判断对象是否存活&#xff1f; 1.什么是JVM内存结构 jvm将虚拟机分为5大区域&#xff0c;程序计数器、…

脚本:文件拷贝

#!/bin/bashdst_path"/mnt/Perception/home/xxx/code/data_hub/" src_path"/mnt/jumpserver_data/xxx_data/"# 帮助函数 show_help() {echo "用法: ./copy_files.sh [选项] 参数"echo "这是一个演示脚本的帮助文档。"echo "选项:…

计算机网络 | 传输层

计算机网络 | 传输层 计算机网络 | 传输层功能概述UDP协议TCP协议TCP协议的特点TCP报文段TCP连接管理TCP连接的建立TCP连接的释放 TCP可靠传输序号确认重传 TCP流量控制TCP拥塞控制慢开始和拥塞避免快重传和快恢复 第5章总结 参考视频&#xff1a;王道计算机考研 计算机网络 参…

【vim 学习系列文章 10 -- vim 将代码中空格高亮显示方法】

文章目录 vim 高亮空格使用背景如何配置vim 可以自动显示空格呢&#xff1f;vim highlight 命令使用介绍vim 空白行的处理vim match 命令详细介绍 vim 高亮空格使用背景 开发人员在编写代码之后&#xff0c;在review通过之后会将代码推到服务器然后merge&#xff0c;但是有些代…

学习嵌入式系统的推荐步骤:

学习嵌入式系统的推荐步骤&#xff1a; 00001. 选择一款Linux发行版作为主要操作系统&#xff0c;如RedHat、Ubuntu、Fedora等。进入Linux后&#xff0c;使用终端进行任务操作。建议不要使用虚拟机&#xff0c;如有需要可考虑双系统安装。 00002. 00003. 学习C语言、数…

内存溢出、内存泄漏与内存抖动

文章目录 前言一、内存溢出二、内存泄漏三、内存抖动四、会引发内存泄漏的情况1、单例引起的内存泄漏2、非静态内部类创建静态实例引起的内存泄漏3、Handler 引起的内存泄漏4、WebView引起的内存泄露5、Asynctask引起的内存泄露6、资源对象未关闭引起的内存泄露7、其他一些 前言…

2023年【天津市安全员C证】模拟考试及天津市安全员C证实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员C证模拟考试是安全生产模拟考试一点通生成的&#xff0c;天津市安全员C证证模拟考试题库是根据天津市安全员C证最新版教材汇编出天津市安全员C证仿真模拟考试。2023年【天津市安全员C证】模拟考试及天津市…

云上攻防-云原生篇KubernetesK8s安全APIKubelet未授权访问容器执行

文章目录 K8S集群架构解释K8S集群攻击点-重点API Server未授权访问&kubelet未授权访问复现k8s集群环境搭建1、攻击8080端口&#xff1a;API Server未授权访问2、攻击6443端口&#xff1a;API Server未授权访问3、攻击10250端口&#xff1a;kubelet未授权访问 K8S集群架构解…

QT中使用QVTKOpenGLNativeWidget的简单教程以及案例

先添加一个带有ui的QT应用程序。 一、在ui界面中添加QVTKOpenGLNativeWidget控件 先拖出来一个QOpenGLWidget控件 修改布局如下&#xff1a; 然后将QOpenGLWidget控件提升为QVTKOpenGLNativeWidget控件&#xff0c;步骤如下&#xff1a; 右击QOpenGLWidget窗口&#xff0c;选…

springboot配置swagger

springboot配置swagger Swagger 是什么Swagger配置springboot代码展示总结 Swagger 是什么 Swagger 是一个用于构建、文档和调用 RESTful Web 服务的强大工具。它提供了以下几方面的好处&#xff1a; 自动生成 API 文档: Swagger 可以自动生成 API 文档&#xff0c;包括接口的…

【Golang】grpc环境踩的坑

关于’protoc-gen-go’ 不是内部或外部命令 这个问题的出现是因为没有这个文件导致的 这个文件要通过我们下载的google.golang.org这个文件编译生成的 这里建议下载google提供的grpc包 protobuf的源码&#xff1a; git clone https://github.com/golang/protobuf 下载好之后进…

用go封装一下二级认证功能

用go封装一下二级认证 本篇为用go设计开发一个自己的轻量级登录库/框架吧 - 秋玻 - 博客园 (cnblogs.com)的二级认证业务篇&#xff0c;会讲讲二级认证业务的实现&#xff0c;给库/框架增加新的功能。 源码&#xff1a;github.com/weloe/token… 在一个系统中&#xff0c;为了…

win11 定时计划任务

控制面板 任务计划 添加任务计划 &#xff0c;选按步骤添加。

谷歌浏览器访问127.0.0.1时报错 Failed to read the ‘sessionStorage‘ property from ‘Window‘

谷歌浏览器访问 127.0.0.1 时报错如下&#xff1a; Uncaught DOMException: Failed to read the ‘sessionStorage’ property from ‘Window’: Access is denied for this document. 原因&#xff1a; 谷歌浏览器设置中禁止了 127.0.0.1 存储数据到浏览器设备上 解决方法…

NewStarCTF2023公开赛道-压缩包们

题目提示是压缩包 用010editor打开&#xff0c;不见PK头&#xff0c;补上50 4B 03 04 14 00 00 00 将文件改成.zip后缀&#xff0c;打开&#xff0c;解压出flag.zip 尝试解压&#xff0c;报错 发现一串base64编码 SSBsaWtlIHNpeC1kaWdpdCBudW1iZXJzIGJlY2F1c2UgdGhleSBhcmUgd…

metaRTC7集成lvgl ui demo编译指南

概要 开源轻量级嵌入式图形库lvgl:Light and Versatile Graphics Library&#xff0c;最低只需8kb内存&#xff0c;可为任何 MCU、MPU 和显示类型创建漂亮的 UI。 metaRTC新增lvgl demo&#xff0c;可在linux下编译运行。 源码下载 https://github.com/metartc/metaRTC/rel…

安卓程序执行入口

Android程序执行入口 Android应用程序的执行入口是在一个特定的 Java 类中&#xff0c;通常是 MainActivity 或 SplashActivity&#xff0c;具体取决于应用的设计和结构。 Android应用程序的执行入口通常通过以下方式进行定义&#xff1a; 在 AndroidManifest.xml 文件中&am…

@Component在类上构造器注入无法注入

Component注解是Spring框架提供的一个注解&#xff0c;用于标识一个类为组件&#xff0c;并让Spring自动进行组件扫描和实例化。在类上使用Component注解时&#xff0c;并不能实现构造器注入。 如果你希望在类中进行构造器注入&#xff0c;可以使用其他注解来实现&#xff0c;…