Vue HTML to JS compiler

Marcos Neves
vuejs-tips
Published in
2 min readMay 2, 2017

tip #18 https://vuejs-tips.github.io/compiler

Did you know that a v-model after compiled became this:

follow the fullName variable

But if used in a checkbox input like this <input type="checkbox" v-model="fullName"> it become this instead:

Knowing exactly how Vue compiles HTML to JavaScript can help you better understand why some things work while others don’t.

One of these days, someone asked me why I can't create a debounce filter like this <input @input="submit | debounce(500)">

That filter is impossible to work, and you understand why when you see the compiled javascript:

Vue doesn't understand filter syntax for events

To understand that and dozen others situations, I created this tool to interactively compile html to javascript:

https://vuejs-tips.github.io/compiler

You can type your own html or choose from almost all Vue tags in the side menu.

For example, this is how a v-for is compiled to javascript.

--

--

Marcos Neves
vuejs-tips

Ancient Brazilian web developer, from php, through Rails to Javascript, Vue.js enthusiast to React.