手撕Vue-实现事件相关指令
经过上一篇文章的学习，实现了界面驱动数据更新，接下来实现一下其它相关的指令，比如事件相关的指令，v-on 这个指令的使用频率还是很高的，所以我们先来实现这个指令。
v-on 的作用是什么，是不是可以给某一个元素绑定一个事件。
紧接着了解了 v-on 的作用之后，我在 example.html 的结构代码当中添加了一个 div 用 v-on 绑定了一个点击事件，然后在 methods 当中添加了一个 myFn 的方法，然后在点击事件触发的时候调用了 myFn 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本模板</title>
<script src="js/nue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name"/>
<div v-on:click="myFn">我是div</div>
</div>
<script>
let vue = new Nue({
el: document.querySelector('#app'),
data: {
name: "BNTang"
},
methods: {
myFn() {
alert('myFn被执行了');
},
}
});
</script>
</body>
</html>
如上已经将基本的结构搭建完毕了，现在需要做的事情就是需要处理一下 v-on 这个指令。
首先来看我们自己编写的 Nue 源码，在创建 Nue 实例的时候, 调用了 new Compiler(this);，进入 Compiler，constructor 方法继续往下看, 在进入 this.buildTemplate(fragment);，遍历所有的节点，判断是否是一个元素时，调用了 this.buildElement(node);, 进入 buildElement 方法，可以看到之前就是在这里处理了 v-model 这个指令，现在我们需要在这里处理 v-on 这个指令。
我先将 name, value 打印到控制台，输出结果如下：
type text
v-model name
v-on:click myFn
可以得出如果我们编写的是 v-model，那么 name 就是 v-model，value 就是 name，如果编写的是 v-on:click，那么 name 就是 v-on:click，value 就是 myFn。
知道了这些信息之后就可以开展下一步了，我在将 name 按照 : 进行分割一次就会拿到的是 v-on 与 click，click 就是待会我们要注册的事件类型，在用解构的方式将 name, value 取出来，代码如下：
let [directiveName, directiveType] = name.split(':');
directiveName 就是 v-on，directiveType 就是 click。
然后再将之前的代码 name.split('-'); 改写为 directiveName.split('-');, 这个时候我们将解构出来的结果如下：
model
on
这个时候就可以在之前的工具类当中添加一个 on 方法, 来用处理 v-on，在添加 on 方法之前，改造一下根据指令名称, 调用不同的处理函数的代码，将之前的代码改写为如下：
CompilerUtil[directive](node, value, this.vm, directiveType);
多了一个 directiveType 参数，这个参数就是指令的类型，比如 v-on:click，那么 directiveType 就是 click，这个时候就可以在工具类当中添加一个 on 方法了，代码如下：
on: function (node, value, vm, type) {
node.addEventListener(type, (e) => {
alert('事件注册成功了');
});
}
这个时候我们在页面上点击 div 的时候，就会弹出一个提示框，说明事件注册成功了。
事件注册成功了是没问题，但是这个事件执行的内容，是自己的，并不是通过 v-on 绑定的，所以我们需要将这个事件执行的内容改为通过 v-on 绑定的，这个时候就需要用到之前的 methods 对象了，我们需要通过 methods 对象来获取到对应的方法，然后将这个方法执行。
接下来要改造一下创建 Nue 实例的时候，将 methods 保存起来，改造一下 Nue 的构造函数，以后在根据对应的方法名称，获取到对应的方法, 再执行即可，代码如下：
this.$methods = options.methods;
改造完毕之后，我们就可以在工具类当中的 on 方法当中，通过 methods 对象获取到对应的方法，然后执行即可，代码如下：
on: function (node, value, vm, type) {
node.addEventListener(type, (e) => {
vm.$methods[value](e);
});
}
这个时候我们在页面上点击 div 的时候，就会弹出一个提示框，说明事件注册成功了，并且事件执行的内容也是通过 v-on 绑定的。
在 myFn 方法中打印一下 this，发现并不是 Nue 的实例，而是 myFn 本身：
这个时候就需要将 myFn 的 this 改为 Nue 的实例，这个时候就需要用到 call 方法了，代码如下：
node.addEventListener(type, (e) => {
vm.$methods[value].call(vm, e);
});
call 方法的第一个参数是改变 this 的指向，第二个参数是传递的参数，这个时候我们在 myFn 方法中打印一下 this，发现已经是 Nue 的实例了。
到此为止，v-on 指令的实现已经完成了。
手撕Vue-实现事件相关指令的更多相关文章
- Vue 事件相关实例方法---on/emit/off/once
一.初始位置 平常项目中写逻辑,避免不了注册/触发各种事件 今天来研究下 Vue 中,我们平常用到的关于 on/emit/off/once 的实现原理 关于事件的方法,是在 Vue 项目下面文件中的 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- VUE：内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- vue的事件绑定
vue事件有两方面内容:DOM事件 和 自定义事件. DOM事件 vue中采用DOM2级事件的处理方式,为IE9以上的浏览器服务.下面我们先来讲解一下什么是DOM2级事件吧! JS中DOM0级事件有两 ...
- 编译原理--05 用C++手撕PL/0
前言 目录 01 文法和语言.词法分析复习 02 自顶向下.自底向上的LR分析复习 03 语法制导翻译和中间代码生成复习 04 符号表.运行时存储组织和代码优化复习 05 用C++手撕PL/0 在之前 ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- 用C/C++手撕CPlus语言的集成开发环境（1）—— 语言规范 + 词法分析器
序言 之所以叫做CPlus语言,是因为原本是想起名为CMinus的,结果发现GitHub和Gitee上一堆的CMinus的编译器(想必都是开过编译原理课程并且写了个玩具级的语言编译器的大佬们吧).但是 ...
- MySQL通过bin log日志恢复数据｜手撕MySQL｜对线面试官
关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第二篇文章,今天介绍一下MySQL的二进制日志(bin log),注意不要和MySQL的InnoDB ...
- Vue(四) 内置指令
现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...
随机推荐
- Docker、CICD持续集成部署、Gitlab使用、Jenkins介绍
目录 1.Docker的基本操作 1.1镜像拉取 1.2镜像的操作 1.3容器的操作 运行容器 查看正在运行的容器 查看容器运行日志 进入到容器内部 停止容器运行 删除容器 启动容器 2.Docker ...
- 即构自研海量有序数据网络MSDN，构建全球可靠的多云通讯链路
2020是实时音视频技术应用大爆发的一年,电商直播.视频会议.在线课堂等多个场景获得了广泛关注.即构科技作为全球领先的云通讯商,截止目前已服务超过4000家企业客户,每日音视频通话时长超过20亿分钟, ...
- hexo博客主题，git上传，报错Template render error的解决方案
报错信息 INFO Start processing FATAL Something's wrong. Maybe you can find the solution here: http://hex ...
- Redis 集群偶数节点跨地域部署之高可用测试
笔者目前所在公司存在多套 Redis 集群: A 集群 主 + 从 共 60 个分片,部署在 3 + 3 台物理机上,每台机器各承载 10 个端口 主库 30 个端口在广州,从库 30 个端口在中山 ...
- 简单了解：Linux 硬盘分区管理命令 fdisk、parted、sfdisk、sgdisk
支持分区格式 详情链接 fdisk MBR https://zhuanlan.zhihu.com/p/56273534 parted MBR.GPT https://www.cnblogs.com/m ...
- CSS:使用透明色
使用如下代码: background-color="#00000000"
- 浏览器中的自动化操作插件：Automa
相信很多小伙伴跟我一样,每天都有大量基于浏览器的重复操作,比如:查看任务.查看新闻.查看各种每天要关注的内容,甚至可能还需要对其做一些操作.那么这些任务是否有办法自动化执行呢? 今天就给大家推荐一个浏 ...
- AcWing 第 92 场周赛 C题 4866. 最大数量 题解
原题链接 链表 + 并查集乱搞做法: 思路 首先可以发现,想要让度数尽量大,那我们应该构造成菊花图,即下图所示: 对于每个需求,我们可以知道,如果之前他们没有连在一起,那我们一定得把他们连在一起,该过 ...
- .NET ORM 鉴别器 和 TDengine 使用 -SqlSugar
SqlSugar ORM SqlSugar 是一款 老牌 .NET 开源多库架构ORM框架 ,一套代码能支持多种数据库像像Admin.net.Blog.Core.CoreShop等知名开源项目都采用了 ...
- CI+JUnit5并发单测机制创新实践
一. 现状·问题 针对现如今高并发场景的业务系统,"并发问题" 终归是必不可少的一类(占比接近10%),每次出现问题和事故后,需要耗费大量人力成本排查分析并修复.那如果能在事前尽可 ...