vue 的点击事件获取当前点击的元素方法

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

在Vue项目中，可以通过Vue性能工具与浏览器的开发工具来获取页面响应时间。

1 Vue性能工具：Vue性能工具可以用于监控各组件的性能表现，包括加载速度、渲染时间等指标。在Vue项目中，你可以按以下步骤来使用Vue性能工具：

- 首先，安装vue-devtools扩展程序。

- 启动Vue项目，然后在Chrome浏览器上打开开发者工具，进入Vue选项卡。

- 在Vue选项卡下，你可以看到实时的性能监控信息，包括各组件的加载速度、渲染时间等。

2 浏览器开发工具：浏览器开发工具可以监测页面响应时间、网络传输时间、DOM加载时间等。在Chrome浏览器开发工具中，你可以按以下步骤来获取页面响应时间：

- 打开Chrome浏览器，进入开发者工具。

- 点击网络选项卡，然后在地址栏中输入你要测试的网站地址，回车进入该网站。

- 完成加载后，在开发者工具中可以看到各个网络请求的具体信息，包括加载时间、传输时间、DOM加载时间等。

需要注意的是，页面响应时间是一个相对变化的值，受到多种因素的影响，包括网站基础设施、网络延迟、设备性能等。因此，你可以通过多次测试并与其他网站进行比较，找到优化网站性能的最佳策略。

ref可以绑定dom节点或字组件，用于获取子组件的方法和属性。但是只有组件 完成渲染 时，才可以获取得到，且$refs也不是响应式的！

响应式处理可以包括以下几种方法：也就是说，在子组件完成渲染以后，动态修改的data或method，在父组件都可以实时获取。

（1）使用nexttick（）；子组件 同步 更改数据可反映到父组件上，nexttick属于微任务，也就是说，在本轮事件循环完成之前，可以执行异步 *** 作，从而保证实时性。

（2）如果子组件数据更新是异步，比如说从接口请求回来的这种，使用nexttick，甚至settimeout(()=>{},0) 都无法读取到已经修改的data，因为在消息队列里面，异步任务作为宏任务始终排在队尾。常发生的情况是，接口请求的数据还没到，父组件中已经读取了refs[componets]xxx的数据，这会导致这个数据打印出来是undefined。

解决办法是：

>>>settimeout(100ms）的等待，这种方法虽然可以解决，但是非常不好，原因是你无法控制接口要多少秒才能到达响应结果

打印结果：

由此可见 settimeout 0 会在接口响应前执行。

>>> 使用回调的方式。接口响应完，在then里，通过$emit触发父组件获取refs的方法。这种回调必然可以保证数据已经set到，再次手动获取，即可得到响应值。

（3）以上分别用于解决子组件同步和异步的问题，但如果子组件使用v-if（资料发现v-for同样会有这种问题），子组件未被渲染，同样会出现$refs无法读取的问题。暴力解决法是，v-if换成v-show。区别在于：v-show不会发生重拍，只是display：none。这种方式虽然可以保证 $refs获取到子组件的数据，但在某些特定的业务场景下（比如子组件请求必须在父组件完成某 *** 作的时候进行），会导致一些逻辑错误。因此合理的解决办法是，用（2）中回调的方法。

其他解决办法待更新

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

<style type="text/css">

#outside{width:200px;height:100px;border:1px solid #ccc;}

#inside{width:80%;height:80%;border:1px solid #c00;}

</style>

<div id="outside"><div id="inside">sdf</div></div>

<script src='jqueryminjs'></script>

<script>

alert(parseInt($('#inside')css('width'))100/parseInt($('#outside')css('width'))+"%");

</script>

以上就是关于vue 的点击事件获取当前点击的元素方法全部的内容，包括:vue 的点击事件获取当前点击的元素方法、vue获取页面响应时间、vue获取使用$refs获取自组件方法和属性注意问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！