Vue HTML to JS compiler

tip #18

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:

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.

Show your support

Clapping shows how much you appreciated Marcos Neves’s story.