手撕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: ...
随机推荐
- QOJ 6504. CCPC Final 2022 D Flower's Land 2题解
QOJ 6504. CCPC Final 2022 D Flower's Land 2题解 题意简述 给你一个只含 \(0,1,2\) 的序列,相邻两个相同的数字可以直接消掉. 询问包含两种 区间所有 ...
- [Spring+SpringMVC+Mybatis]框架学习笔记（五）：SpringAOP_顾问
上一章:[Spring+SpringMVC+Mybatis]框架学习笔记(四):Spring实现AOP 下一章:[Spring+SpringMVC+Mybatis]框架学习笔记(六):Spring_A ...
- [爬虫]2.3.1 使用Python操作文件系统
Python提供了许多内置库来处理文件系统,如os.shutil和pathlib等,这些库可以帮助你创建.删除.读取.写入文件和目录. 读取文件 在Python中,你可以使用内置的open函数来打开一 ...
- 关于Linux下服务器MySQL的安装和搭建
一.检测是否已经安装Mysql 检测 # yum list installed | grep mysql //检查安装 # yum -y remove mysql-libs.x86_64 //卸载 / ...
- java位运算及移位运算你还记得吗
本文中所提到的运算都是基于整数来说的,因为只有整数(包括正数和负数)在操作系统中是以二进制的补码形式运算的,关于原码.反码.补码.位运算.移位运算的背景这里不再介绍,网上资料很多,感兴趣的可自行搜索. ...
- 论文解读（APCA）《Adaptive prototype and consistency alignment for semi-supervised domain adaptation》
[ Wechat:Y466551 | 付费咨询,非诚勿扰 ] 论文信息 论文标题:Adaptive prototype and consistency alignment for semi-super ...
- Ubuntu安装后续工作
更新源: sudo gedit /etc/apt/sources.list 清华的源 deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial ma ...
- Log4j疯狂写日志问题排查
一.问题是怎么发现的 最近有个 Java 系统上线后不久就收到了磁盘使用率告警,磁盘使用率已经超过了 90% 以上,并且磁盘使用率还在不停增长. 二.问题带来的影响 由于服务器磁盘被打满,导致了系统正 ...
- 项目开展CICD的实践探路
本文介绍了作者对CICD的理解以及在项目中开展CICD的几种场景,总结了每种场景实践的关键节点.带来的收益,以及结合具体项目开展的实际应用.读者可以借鉴本文中描述的场景,或借鉴文中提到的实践方式,在项 ...
- tomcat远程部署
使用maven的插件对tomcat进行远程部署,大大降低了部署步骤,对于远程部署调试也有一定的帮助 要让maven对够进行远程部署,我们需要对tomcat进行配置,主要是配置tomcat-user.x ...