Javascript Vue.js如何选择“v-on:单击”选择器？

我尝试复制Vue.js只是为了学习

基本上，我可以做到这一点：

<button v-on-click="reverseMessage">Reverse Message</button>

但是，我很想知道他们如何选择

v-on:click

当我尝试

document.querySelectorAll（'[v-on:click]'）

时，我遇到以下错误：

未捕获的DomeException:未能对“文档”执行“querySelectorAll”：“[v-on:click]”不是有效的选择器

查看，看起来他们首先获得了元素的所有属性。然后，他们针对每个属性测试正则表达式

常量onRE=/^ | ^v-on://

，如果匹配，则从属性名称中删除

v-on:

或

@

前缀（通过

name.replace（onRE），）

），留下事件名称进行处理。然后他们处理事件

下面是他们方法的简化示例：

const vonReg=/^@^v-on:/；
让attributes=document.getElementById（“foo”）.attributes；
让名称=[]；
for（设i=0；i{
if（vonReg.test（名称））{
让eventName=name.replace（vonReg'）；
log（'我们需要处理此事件：'+eventName）；
}
})

---

检查元素并查看生成的内容。您还可以使用Vue.js Chrome扩展。事实上，事件已注册，您不会看到任何v-on：在vue.js渲染根之后单击。