I love it how you chose just one of so many things listed. And how you got it so wrong:
> This is also plain regular HTML and has been since HTML4 (1997).
What below is plain regular HTML? Taken from here: https://vuejs.org/v2/examples/tree-view.html
<div
:class="{bold: isFolder}" <--- binding to JS-like objects doesn't exist in HTML
@click="toggle" <--- If it was HTML it would've been toggle()
@dblclick="changeType"> <--- If it was HTML it would've been changeType()
{{ model.name }} <--- etc
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
Oh. Ooops. None of it. It's a custom HTML-like DSL with three types of magic attributes (magically bound to some Javasdcript code) with three different scripting languages in it.For reference: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Ev... etc.
Edit
Let's add more "plain old HTML". Plain old HTML v-ifs that accept JS booleans. Ah, plain old HTML v-fors that accept a ES6-like (but not truly ES6) mini-DSL. And other plain old HTML attributes.
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="(model, index) in model.children"
:key="index"
:model="model">
</item>
<li class="add" @click="addChild">+</li>
</ul>
You're wrong. The contents of the event handler is JS, the whole snippet is obviously HTML.
This is also plain regular HTML and has been since HTML4 (1997). The value of the onclick attribute is a string of JS. There's no assignment of the result happening. It registers a click handler. The only difference between the two, on a surface level, is that the Vue example has things in scope (edit and todo) that aren't globals.