手撕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: ...
随机推荐
- 性能优化之window.onload
前言 最近在做一些性能优化相关的工作,相信大家在工作过程中也会遇到一些性能优化相关的场景,这对于前端开发者来讲是一项加分技能.为了我们的用户在使用我们的产品时能够有一个非常好的体验,我们需要对页面进行 ...
- .NET周刊【7月第2期 2023-07-09】
由于这周比较忙,只给出了标题和链接,没有具体的简介. 另外根据粉丝朋友的反馈,".NET周报" 更名为 ".NET周刊",希望大家喜欢 : ) 国内文章 Ava ...
- 前端关于table的设置
表格超长度后加... table{ table-layout:fixed; } td{ overflow:hidden; text-overflow:ellipsis; white-space:now ...
- ChatGPT在工业领域的研究与应用探索-产品化部署及应用
<ChatGPT在工业领域的研究与应用探索-数据与工况认知> <ChatGPT在工业领域的研究与应用探索-AI助手实验应用> ChatGPT在工业领域的应用需要解决两个问题:( ...
- Nextcloud登录界面输入用户名和密码后报内部故障
查询~/nextcloud/data/nextcloud.log,找到日志报出如下错误 "Something is wrong with your openssl setup: error: ...
- shell: xscp
#!/bin/bash ips=( 1.1.1.1 1.1.1.2 ) user= passwd= for i in ${ips[@]} do echo "== $i ==" ss ...
- 2021-7-6 vue音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- Redis 主从同步原理
一.什么是主从同步? 主从同步,就是将数据冗余备份,主库(Master)将自己库中的数据,同步给从库(Slave). 从库可以一个,也可以多个,如图所示: 二.为什么需要主从同步? Redis 虽然有 ...
- pandas 根据列的值选取所有行
原文链接:https://blog.csdn.net/changzoe/article/details/82348913 在其他论坛上看到的,原文链接如上所示.为方便记忆,原文如下所示: 选取等于某些 ...
- 从序号和确认号理解TCP三次握手
头部信息 TCP首部存储的数据和建立连接有关,具体每个字段的用途可以参考这一篇文章,其中序号和确认号决定了发送数据的内容. 头部中间部分"保留"和"窗口"中间是 ...