29 ms·
> Let's see how this is false: <label @click="edit(todo)"> > This is not Javascript. If it was, it would assign the result of the function call to @click.
by likeclockwork 8y ago
> Let's see how this is false:
<label @click="edit(todo)">
> This is not Javascript. If it was, it would assign the result of the function call to @click. It doesn't. It's a Javascript-like scripting language that has magical binding into regular Javascript.
You're wrong. The contents of the event handler is JS, the whole snippet is obviously HTML.
<button onclick="alert('Hi')">Say Hi.</button>
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.
- dmitriid 8y agoI 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 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/Event_handlers 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>