drunknhik
> I love how you could find exactly one thing out of a whole list of things that may be just ever so slightly better than JSX.
It's not a question of "better" or "worse". It's a question of tradeoffs on spectrum of abstraction.
I'm not here to bash JSX or react. But you apparently are, and I'm just trying to open your eyes a bit.
When vue came out with JSX, I tried to force it on my team, and there are a serious backlash, to the point where I came to realization that the vue's major strength is actually the templates, and the magic.
You may not like the magic, but a lot of folks do.
As for your specific questions
@ and : are just short hands. That's like saying: what's the difference between `map` vs `reduce` in my component to iterate over an array. They _can_ do the same thing, but map is shorter. In plain JS I can do `i = i + i` `i += i` or `i++` to increment an variable.
@ just means "event handler". @click = "onClick" : just means "use a dynamic value for this prop { } you can put any JS expression, with the plus that you don't have to litter your code with `this`.
> <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.
Great, so it's not javascript.
To a lot of folks it looks a lot nicer than
<label onClick={() => this.edit(this.state.todo)}>
There's a lot less noise, and it's _much_ friendlier for (most) designers.
I have never felt that I had to keep hundreds of gotchas in my mind while using vue. The syntax is extremely intuitive (unlike angular). Takes maybe one hour to read through the docs, and you have it.