vue 模板解析 --- 事件指令

最新推荐文章于 2023-06-17 23:00:15 发布

zxf_CN

最新推荐文章于 2023-06-17 23:00:15 发布

阅读量266

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zxf_CN/article/details/110110905

版权

本文探讨Vue中事件指令的工作原理，包括从指令名获取事件名、解析表达式找到事件处理函数、绑定DOM事件监听器以及移除指令属性的过程。通过示例代码详细解释了Vue如何进行事件绑定，并提供了相关视频资源作为补充。

摘要由CSDN通过智能技术生成

还是先来个图片，压压惊：

在这里插入图片描述

在 vue 中，我们使用的事件指令 v-on 事件绑定，对 vue 进行操作，但 vue 的内部是怎么进行事件的绑定的呢？以下就是 vue 所做的操作：

主要步骤：

从指令名中取出事件名；
<button v-on:click="dianJi">按钮</button>
根据指令的值（表达式）从 methods 中得到对应的事件处理函数对象；
fn = vm.$options.methods && vm.$options.methods[dianJi];
给当前元素节点绑定指定的事件名和回调函数的 dom 事件监听；
node.addEventListener(click, dianJi.bind(vm), false);
指令解析完后，移除此指令属性；

我们的页面为：

<body>
	<div id="app">
		<p>{
  {show}}</p>
		<button v-on:click="dianJi">按钮</button>
	</div>

<script src="./bil/mvvm.js"></script>
<script src="./bil/compile.js"></script>
<script src="./bil/observer.js"></script