如何通过单击获取currentTarget对象

Question

当我使用Jquery从当前目标中获取对象时，它工作正常。

但是我想通过vueJs实现相同的行为，但VueJs返回一个dom而不是对象。

使用Jquery

    <a onclick="test(this)" type="button">Button</a>

    function test(e){
      console.log($(e));
    })

结果：

init [a.cursor_pointer, context: a.cursor_pointer]
    0: a.cursor_pointer
    context: a.cursor_pointer
    length: 1
    __proto__: Object(0)

使用VueJs

<a @click="test" type="button">Read more</a>

 methods:{
    test(e){
       console.log(e.target);
    }
}

结果：

<a type="button" class="cursor_pointer">Read more</a>

Answer 1

TL / DR；对于您想做的事情，没有1：1的jQuery与Vue等效。

看起来您正在记录jQuery中的事件 this（在这种情况下为<a>元素），在您的jQuery中被强制转换为jQuery [prototype]对象例子。

Vue示例中的e.target等同于jQuery click处理程序中未经修饰的e。

通过将{{1}中的e中的$()包装起来，您就将jQuery原型注入了test()（因此它可以访问jQuery API和所有其方法）。

在Vue中没有直接等效于jQuery原型的东西，但是您可以：

1. 在您的Vue应用程序中包含jQuery
2. 或者在<a>上使用等效的普通JavaScript来完成类似的操作。如果您不熟悉http://youmightnotneedjquery.com/
，jQuery Source是很好的资源。

编辑根据您的澄清（您应该将其编辑为原始问题），您似乎已经遇到了如何解决jQuery问题与框架解决方案之间的主要区别如Vue，React，Angular（等等）。也就是说，命令式和声明式编程之间的区别。 Here很好地说明了这种差异。

要以“ Vue方式”执行您想要的操作，您可以为“评论”块创建一个component，每个评论都会处理其“更多/更少”状态并相应地进行切换。

通过使用jQuery并在e.target {{3}中添加点击监听器，您可以使用香草JavaScript 或在Vue应用程序中完成所需的操作}。虽然不是错误，但它并没有利用Vue的声明性。