Vue.js如何选择`v-on：click`选择器？

我试图复制Vue.js只是为了学习的目的。Vue.js如何选择`v-on：click`选择器？

在非常基本的方面，我可以这样做：

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

var element = document.querySelectorAll('[v-on-click]')[0]

但是，我想知道他们是如何选择v-on:click。

当我尝试document.querySelectorAll('[v-on:click]')我得到这个错误：

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[v-on:click]' is not a valid selector.

来源

2017-08-14 relidon

检查你的元素，看看是什么产生。您也可以使用Vue.js Chrome扩展。事实是，事件已注册，并且您不会看到任何v-on：在vue.js渲染根后单击。 –

望着repository on Github for Vue，它看起来像他们首先获得所有属性的一个元素。然后他们针对每个属性测试正则表达式const onRE = /^@|^v-on:/，如果匹配，则从属性名称（通过name.replace(onRE, '')）删除前缀v-on:或@，留下要处理的事件的名称。然后他们处理这个事件。

这里是他们的方法的一个简单的例子：

const vonReg = /^@|^v-on:/; 
 
let attributes = document.getElementById("foo").attributes; 
 

 
let names = []; 
 
for (let i = 0; i < attributes.length; i++) { 
 
    names.push(attributes[i].nodeName); 
 
} 
 

 
names.forEach((name) => { 
 
    if (vonReg.test(name)) { 
 
    let eventName = name.replace(vonReg, ''); 
 
    console.log('We need to handle this event: ' + eventName); 
 
    } 
 
})

<div id="foo" v-on:click="test"></div>

如果你想使用querySelectorAll，this post解释说，你需要躲避结肠。在你的情况下，它看起来像这样：

document.querySelectorAll('[v-on\\3A click]')

来源

2017-08-14 17:46:10 thanksd

Vue.js如何选择`v-on：click`选择器？

回答

相关问题