javascript - How does Vue.js select `v-on:click` selector? -

i'm trying replicate vue.js learning purposes.

in basic terms can this:

<button v-on-click="reversemessage">reverse message</button> 

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

but, i'm interested know how select v-on:click.

when try document.queryselectorall('[v-on:click]') error:

uncaught domexception: failed execute 'queryselectorall' on 'document': '[v-on:click]' not valid selector.

looking @ repository on github vue, looks first of attributes element. test regex const onre = /^@|^v-on:/ against each attribute, , if matches, remove v-on: or @ prefix attribute name (via name.replace(onre, '')) leaving name of event handle. handle event.

here's simplified example of method:

const vonreg = /^@|^v-on:/;  let attributes = document.getelementbyid("foo").attributes;    let names = [];  (let = 0; < attributes.length; i++) {    names.push(attributes[i].nodename);  }    names.foreach((name) => {    if (vonreg.test(name)) {      let eventname = name.replace(vonreg, '');      console.log('we need handle event: ' + eventname);    }  })

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

---

if want use queryselectorall, this post explains need escape colon. in case this:

document.queryselectorall('[v-on\\3a click]')