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

最新推荐文章于 2023-07-20 08:30:00 发布

zxf_CN

最新推荐文章于 2023-07-20 08:30:00 发布

阅读量237

点赞数

分类专栏： vue

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

版权

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

在这里插入图片描述

在 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">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zxf_CN

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 模板解析 --- 事件指令

还是先来个图片，压压惊：在 vue 中，我们使用的指令 v-on 事件绑定, v-text 等等指令，对 vue 进行操作，但 vue 的内部是怎么使用这些指令的呢？以下就是 vue 所做的操作：主要步骤：从指令名中取出事件名；<button v-on:click="dianJi">按钮</button>根据指令的值（表达式）从 methods 中得到对应的事件处理函数对象；fn = vm.$options.methods && vm.$opti
复制链接

扫一扫