5 ms·

The amount of special cases in Vue templating syntax is comparable to the special cases and gotchas of JSX. It's not much, really. I personally find Vue templa

• dmitriid 8y ago
  > The amount of special cases in Vue templating syntax is comparable to the special cases and gotchas of JSX This is patently not so. Vue has: - three different html-like attributes - three different scripting languages in templates (two Javascript-like, one Javascript, but only expressions) - one scripting language for controller/model which actually breaks JS assumptions (about what `this` is, for example) by magiacally hoisting some (but not all) properties of an object https://pbs.twimg.com/media/DbVEoKOX0AEEen6.jpg:large https://pbs.twimg.com/media/DbVEoKOX0AEEen6.jpg:large
  • ipntu 8y ago
    This is patently not so. Maybe if you are used to JSX. - three different html-like attributes : and @ are just shorthand for v-bind and v-on attributes. v-bind and v-on (and v-if) accept regular javascript, and it's not just expressions... you can use `active = true` to change a data value, for instance. The only exception is v-for, as you mentioned, but it is close enough to ES6 for syntax to make sense, at least IMO. - three different scripting languages in templates (two Javascript-like, one Javascript, but only expressions) This is splitting hairs a bit, isn't it? Apart from v-for, you can write pretty much anything you want in the other two. - one scripting language for controller/model which actually breaks JS assumptions (about what `this` is, for example) by magiacally hoisting some (but not all) properties of an object You mean the script part of components? Do you have any examples of that?
    • dmitriid 8y ago
      > just shorthand > accept regular javascript... The only exception is... but it is close enough to ES6 So you basically validated all I've said. And it's also incomplete. Because the amount of gotchas and things that you have to constantly keep in mind in Vue is mind-boggling compared to JSX. Because JSX is a paper-thin wrapper on top of React.createComponent, and goes out of its way to keep everything in Javascript. Unlike Vue. Lets see your defence: - : and @ as shorthands It means new syntax that you have to learn, and know differences between. For all intents and purposes Vue has three different types html-like attributes. JSX has only one: javascript names. - v-bind etc. accepting regular Javascript 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. - exception is v-for, as you mentioned, but it is close enough to ES6 for syntax to make sense So, it's not Javascript (unlike some other places where it is Javascript), and it's not ES6 syntax, but it's "close enough to ES6". So it's not. It's a different Javascript-like scripting language. The only place where Vue allows regular unadulterated Javascript is inside curly braces: {{}}. And there it only allows expressions (Note: JSX also only allows expressions inside curly braces). However. Even there it's not Javascript. Not really: {{ record.commit.message | truncate }} Valid Vue. Invalid Javascript. - You mean the script part of components? Do you have any examples of that? Of course. See inline comments. Example from here: https://vuejs.org/v2/examples/tree-view.html https://vuejs.org/v2/examples/tree-view.html Vue.component('item', { template: '#item-template', props: { model: Object }, data: function () { return { open: false } }, computed: { isFolder: function () { // `this.model` magically hoisted into `this` // from `object.props.model` return this.model.children && this.model.children.length } }, methods: { toggle: function () { // `this.isFolder` magically hoisted into `this` from // `object.computed.isFolder` if (this.isFolder) { // `this.open` magically hoisted into `this` from // `object.data` which is a function that // returns an object whose keys and values are hoisted // into `this` this.open = !this.open } }, changeType: function () { if (!this.isFolder) { // this.open can be set directly. Magic // this.model.children cannot. Not magic Vue.set(this.model, 'children', []) // `this.addChild` magically hoisted into `this` from // `object.methods.addChild` this.addChild() this.open = true } }, addChild: function () { this.model.children.push({ name: 'new stuff' }) } } })
      • sbjs 8y ago
        Just wanted to add to your argument an inverse argument (for JSX, instead of against Vue): JSX is actually just JavaScript with this one special rule: <foo bar={baz}>child1 {child2}</foo> becomes transform("foo", { bar: baz, children: ["child1 ", child2] }) That's it. All the rules of JSX can be inferred from that one transformation.
      • 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 ago
          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 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>