首先
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组件中获取全局的点击事件方法
你可以在循环的时候 给当前的循环 dom 添加 事件 事件回调函数里面的参数 加入$event
比如：
<ul><li v-for="item in list" @click="clickEvent($event)">{{itemname}}</li>
</ul>export default {
data () {
return {
list:[{name: 'aaa'}, {name: 'bbb'}]
}
},
methods: {
clickEvent(e){
// etarget就是你当前点击的dom元素
}
}
}
vue生命周期的栗子
注意触发vue的created事件以后,this便指向vue实例,这点很重要
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="/js/vuejs"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test" style="border: 1px black dashed;padding: 8px;">
{{a}}
</div>
<div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
我是内容二
</div>
<script type="text/javascript">
var myVue = new Vue({
el: "test",
data: {
a: "我是内容,在控制台输入myVuea=123456,可以改变我的值"
},
created: function () {
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。
//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即thisa存在,可打印出来 。
consolelog("建立");
},
beforeCompile: function () {
consolelog("未开始编译");
},
compiled: function () {
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
consolelog("编译完成");
},
ready: function () {
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm$appendTo() 等方法或指令更新）才触发 ready 钩子。
consolelog("一切准备好了");
},
attached :function () { //myVue$appendTo("test2")暂时触发不了,不知道怎么解决
//在 vm$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接 *** 作 vm$el 不会 触发这个钩子。
consolelog("插入DOM成功");
},
detached :function () { //触发事件 myVue$destroy(true),其中参数true控制是否删除DOM节点或者myVue$remove()
//在 vm$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接 *** 作 vm$el 不会 触发这个钩子。
consolelog("删除DOM成功");
},
beforeDestroy: function () { //触发方式,在console里面打myVue$destroy();
//在开始销毁实例时调用。此时实例仍然有功能。
consolelog("销毁前");
},
destroyed: function () { //触发方式,在console里面打myVue$destroy();其中myVue$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
consolelog("已销毁");
}
});
</script>
</body>
</html>
直接在标签中添加click事件（@click＝fn），然后在vue实例中的（methods）配置项里添加方法fn，实现你的功能。这样不行吗？vue框架不是不能用原生js获取dom元素，只是用框架就是为了避免 *** 作dom元素
this$el 可以获取当前组件的容器节点，然后你就：1this$elquerySelect('my-class')// 获取节点。编程是编写程序的中文简称，就是让计算机代为解决某个问题，对某个计算体系规定一定的运算方式，是计算体系按照该计算方式运行，并最终得到相应结果的过程。
拓展：
1、为了使计算机能够理解人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。
2、编程:设计具备逻辑流动作用的一种"可控体系"注:编程不一定是针对计算机程序而言的，针对具备逻辑计算力的体系，都可以算编程。为了解决使用机器语言编写应用程序所带来的一系列问题，文件系统驱动编程流程人们首先想到使用助记符号来代替不容易记忆的机器指令。这种助记符号来表示计算机指令的语言称为符号语言，也称汇编语言。
再有一棵树形结构的 JavaScript 对象后，我们现在需要做的就是将这棵树跟真实的 Dom 树形成映射关系，首先简单回顾之前遇到的 mountComponent 方法：
我们已经执行完了 vm_render 方法拿到了 VNode ，现在将它作为参数传给 vm_update 方法并执行。 vm_update 这个方法的作用就是就是将 VNode 转为真实的 Dom ，不过它有两个执行的时机：
我们现在先来看下 vm_update 方法的定义：
这里的 vm$el 是之前在 mountComponent 方法内就挂载的，一个真实 Dom 元素。首次渲染会传入 vm$el 以及得到的 VNode ，所以看下 vm__patch__ 定义：
__patch__ 是 createPatchFunction 方法内部返回的一个方法，它接受一个对象：
nodeOps 属性：封装了 *** 作原生 Dom 的一些方法的集合，如创建、插入、移除这些，再使用到的地方再详解。
modules 属性：创建真实 Dom 也需要生成它的如 class / attrs / style 等属性。 modules 是一个数组集合，数组的每一项都是这些属性对应的钩子方法，这些属性的创建、更新、销毁等都有对应钩子方法，当某一时刻需要做某件事，执行对应的钩子即可。比如它们都有 create 这个钩子方法，如将这些 create 钩子收集到一个数组内，需要在真实 Dom 上创建这些属性时，依次执行数组的每一项，也就是依次创建了它们。
这里大家记住一句话即可，无论 VNode 是什么类型的节点，只有三种类型的节点会被创建并插入到的 Dom 中：元素节点、注释节点、和文本节点。
我们接着来看下 createPatchFunction 它究竟返回一个什么样的方法：
首次渲染时没有 oldVnode ， oldVnode 就是 $el ，一个真实的 dom ，经过 emptyNodeAt(oldVnode) 方法包装：
再将传入的 $el 属性转为了 VNode 格式之后，我们继续：
createElm 方法开始生成真实的 Dom ， VNode 生成真实的 Dom 的方式还是分为元素节点和组件两种方式，所以我们使用上一章生成的 VNode 分别说明。
大家可以先看下这个流程图有一个印象即可，接下来再看具体实现时相信思路会清晰很多：
开始创建 Dom ，我们来看下它的定义：
依次判断是否是元素节点、注释节点、文本节点，分别创建它们然后插入到父节点里面，这里主要介绍创建元素节点，另外两个并没有复杂的逻辑。我们来看下 createChild 方法定义：
开始创建子节点，遍历 VNode 的每一项，每一项还是使用之前的 createElm 方法创建 Dom 。如果某一项又是数组，继续调用 createChild 创建某一项的子节点；如果某一项不是数组，创建文本节点并将它添加到父节点内。像这样使用递归的形式将嵌套的 VNode 全部创建为真实的 Dom 。
再看一遍流程图，相信大家疑惑已经减少很多：
首先还是看张简易流程图，留个印象即可，方便理清之后的逻辑顺序：
执行 createComponent 方法，如果是元素节点不会返回任何东西，所以是 undefined ，会继续走接下来的创建元素节点的逻辑。现在是组件，我们看下 createComponent 的实现：
首先会将组件的 vnodedata 赋值给 i ，是否有这个属性就能判断是否是组件 vnode 。之后的 if(isDef(i = ihook) && isDef(i = iinit)) 集判断和赋值为一体， if 内的 i(vnode) 就是执行的组件 init(vnode) 方法。这个时候我们来看下组件的 init 钩子方法做了什么：
activeInstance 是一个全局的变量，再 update 方法内赋值为当前实例，再当前实例做 __patch__ 的过程中作为子组件的父实例传入，在子组件的 initLifecycle 时构建组件关系。将 createComponentInstanceForVnode 执行的结果赋值给了 vnodecomponentInstance ，所以看下它的返回的结果是什么：
再组件的 init 方法内首先执行 createComponentInstanceForVnode 方法，这个方法的内部就会将子组件的构造函数实例化，因为子组件的构造函数继承了基类 Vue 的所有能力，这个时候相当于执行 new Vue({}) ，接下来又会执行 _init 方法进行一系列的子组件的初始化逻辑，我们回到 _init 方法内，因为它们之间还是有些不同的地方：
前面都还执行的好好的，最后却因为没有 el 属性，所以没有挂载， createComponentInstanceForVnode 方法执行完毕。这个时候我们回到组件的 init 方法，补全剩下的逻辑：
我们在 init 方法内手动挂载这个组件，接着又会执行组件的 _render() 方法得到组件内元素节点 VNode ，然后执行 vm_update() ，执行组件的 __patch__ 方法，因为 $mount 方法传入的是 undefined ， oldVnode 也是 undefined ，会执行 __patch__ 内的这段逻辑：
这次执行 createElm 时没有传入第三个参数父节点的，那组件创建好的 Dom 放哪生效了？没有父节点也要生成 Dom 不是，这个时候执行的是组件的 __patch__ ，所以参数 vnode 就是组件内元素节点的 vnode 了：
很明显这个时候不是组件了，即使是组件也没关系，大不了还是执行一遍 createComponent 创建组件的逻辑，因为总会有组件是由元素节点组成的。这个时候我们执行一遍创建元素节点的逻辑，因为没有第三个参数父节点，所以组件的 Dom 虽然创建好了，并不会在这里插入。请注意这个时候组件的 init 已经完成，但是组件的 createComponent 方法并没有完成，我们补全它的逻辑：
无论是嵌套多么深的组件，遇到组件的后就执行 init ，在 init 的 __patch__ 过程中又遇到嵌套组件，那就再执行嵌套组件的 init ，嵌套组件完成 __patch__ 后将真实的 Dom 插入到它的父节点内，接着执行完外层组件的 __patch__ 又插入到它的父节点内，最后插入到 body 内，完成嵌套组件的创建过程，总之还是一个由里及外的过程。
再回过头来看这张图，相信会好理解很多~
接下来会将 updateComponent 传入到一个 Watcher 的类中，这个类是干嘛的，我们下一章再说明，接下来执行 mounted 钩子方法。至此 new Vue 的整个流程就全部走完了。我们回顾下从 new Vue 开始它的执行顺序：
最后我们还是以一道 vue 可能会被问到的面试题作为本章的结束吧~
顺手点个赞或关注呗，找起来也方便~
你可能会用的上的一个vue功能组件库，持续完善中
以上就是关于vue 的点击事件获取当前点击的元素方法全部的内容，包括:vue 的点击事件获取当前点击的元素方法、vue v-for 为元素添加点击事件的时候怎么才能处理当前dom元素、vue 怎么获取到dom渲染vm数据完毕之后的生命周期钩子等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）