3 ms·

i was in the same boat as you regards to syntax but in 10 mins you will grasp everything about vuejs. of all the frameworks, vuejs has the simplest syntax to l

i was in the same boat as you regards to syntax but in 10 mins you will grasp everything about vuejs. of all the frameworks, vuejs has the simplest syntax to learn. its no where as complex as angular and way more elegant. also beats jsx in terms of making your code more cleaner and prettier. im never going back to jsx.

mateuszf 9y ago
> i was in the same boat as you regards to syntax but in 10 mins you will grasp everything about vuejs. Not sure about the original poster, but I prefer react/jsx not because it's simpler, but it's more powerful - it's a simple extension to a full programming language. You can do whatever you want with it.
- jaequery 9y ago
  perhaps you might be thinking that you can't run raw js with vue? well you get js and more. it's just less coding and boilerplate if anything. vue also optimizes your reactive codes and is faster in many cases. react can get pretty slow and heavy if you don't know what you are doing and trying to debug those situations can get pretty hairy. otoh, i've not seen any similar issues with vue. what vue does with the bindings is really neat.
dmitriid 9y ago
Which part of this is clean or pretty? <button v-bind:disabled="isButtonDisabled">Button</button> <div v-bind:id="'list-' + id"></div> <form v-on:submit.prevent="onSubmit"></form> <a @click="doSomething"></a> There are some redeeming qualities compared to say, Polymer. But it's neither clean nor pretty
- chj 9y ago
  You can make it cleaner: <button :disabled="isButtonDisabled">Button</button> <div :id="'list-' + id"></div> <form @submit.prevent="onSubmit"></form> <a @click="doSomething"></a>
  - hansede 9y ago
    Vue allows you to use Pug syntax in your templates, so this can be even simpler: button(:disabled='isButtonDisabled') Button div(:id='`list-${id}`") form(@submit.prevent='onSubmit') a(@click='doSomething')
    - scottmf 9y ago
      I'm sorry but that is hideous. JSX is incredibly simple. Why would you do that to yourself and other devs?
      - hansede 9y ago
        Eloquently put.
    - dmitriid 9y ago
      And Pug amkes this... cleaner and prettier than JSX? I'm afraid not. And it's far from being simpler
  - dmitriid 9y ago
    Doesn't make it either clean or pretty
- jaequery 9y ago
  1) @ is just a shorthand for v-on:*, like onclick,onmouseover,on submit, etc. (ie; v-on:submit is alias ed by @submit) @click="say_something('hello')" new Vue({ methods: { say_something (str) { ... } } }) 2) : is just a shorthand for v-bind (ie; v-bind:disabled="is_disabled()" is aliased by :disabled="is_disabled()"). and this basically allows you to run pure javascript code inside of it. 3) the only other syntax to know is, v-for and v-if, but thats pretty self explanatory i believe. <h3 v-if="user.name">{{name}}</h3> <h3 v-if="!user.name">What is your name?</h3> <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3> i like this approach more than JSX where you have several if else clauses mixed into your HTML. it's kind of like pattern matching if you like that sort of thing. or you can simply do <h3>{{some_message()}}</h3> and just handle the logic inside the some_message() method.
  - hesarenu 9y ago
    It looks way more complicated then jsx. Why invent v-if etc when JavaScript has those built in.
    - jaequery 9y ago
      1) separation of html and js 2) shorter to write and simpler to read
      - brlewis 9y ago
        1) v-if is not html. In html if you see <h3 ...> you immediately think, "there's a level-3 header element here". The thought "there's a level-3 header element here if..." is something new you have to learn for Vue. 2) Shorter is not always easier. For example, using quotes to delimit logical expressions makes it easy to make errors. See the misplaced quote here? <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>
      - dmitriid 9y ago
        > separation of html and js That's the thing. You do not really separate js and HTML. There's a weird extension to HTML. There-are JS-like expressions, JS expressions and bindings to outside JS code It's also neither shoryer to write nor easier to read.

mateuszf 9y ago

> i was in the same boat as you regards to syntax but in 10 mins you will grasp everything about vuejs. Not sure about the original poster, but I prefer react/jsx not because it's simpler, but it's more powerful - it's a simple extension to a full programming language. You can do whatever you want with it.

jaequery 9y ago
perhaps you might be thinking that you can't run raw js with vue? well you get js and more. it's just less coding and boilerplate if anything. vue also optimizes your reactive codes and is faster in many cases. react can get pretty slow and heavy if you don't know what you are doing and trying to debug those situations can get pretty hairy. otoh, i've not seen any similar issues with vue. what vue does with the bindings is really neat.

dmitriid 9y ago

Which part of this is clean or pretty? <button v-bind:disabled="isButtonDisabled">Button</button> <div v-bind:id="'list-' + id"></div> <form v-on:submit.prevent="onSubmit"></form> <a @click="doSomething"></a> There are some redeeming qualities compared to say, Polymer. But it's neither clean nor pretty

chj 9y ago
You can make it cleaner: <button :disabled="isButtonDisabled">Button</button> <div :id="'list-' + id"></div> <form @submit.prevent="onSubmit"></form> <a @click="doSomething"></a>
- hansede 9y ago
  Vue allows you to use Pug syntax in your templates, so this can be even simpler: button(:disabled='isButtonDisabled') Button div(:id='`list-${id}`") form(@submit.prevent='onSubmit') a(@click='doSomething')
  - scottmf 9y ago
    I'm sorry but that is hideous. JSX is incredibly simple. Why would you do that to yourself and other devs?
    - hansede 9y ago
      Eloquently put.
  - dmitriid 9y ago
    And Pug amkes this... cleaner and prettier than JSX? I'm afraid not. And it's far from being simpler
- dmitriid 9y ago
  Doesn't make it either clean or pretty
jaequery 9y ago
1) @ is just a shorthand for v-on:*, like onclick,onmouseover,on submit, etc. (ie; v-on:submit is alias ed by @submit) @click="say_something('hello')" new Vue({ methods: { say_something (str) { ... } } }) 2) : is just a shorthand for v-bind (ie; v-bind:disabled="is_disabled()" is aliased by :disabled="is_disabled()"). and this basically allows you to run pure javascript code inside of it. 3) the only other syntax to know is, v-for and v-if, but thats pretty self explanatory i believe. <h3 v-if="user.name">{{name}}</h3> <h3 v-if="!user.name">What is your name?</h3> <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3> i like this approach more than JSX where you have several if else clauses mixed into your HTML. it's kind of like pattern matching if you like that sort of thing. or you can simply do <h3>{{some_message()}}</h3> and just handle the logic inside the some_message() method.
- hesarenu 9y ago
  It looks way more complicated then jsx. Why invent v-if etc when JavaScript has those built in.
  - jaequery 9y ago
    1) separation of html and js 2) shorter to write and simpler to read
    - brlewis 9y ago
      1) v-if is not html. In html if you see <h3 ...> you immediately think, "there's a level-3 header element here". The thought "there's a level-3 header element here if..." is something new you have to learn for Vue. 2) Shorter is not always easier. For example, using quotes to delimit logical expressions makes it easy to make errors. See the misplaced quote here? <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>
    - dmitriid 9y ago
      > separation of html and js That's the thing. You do not really separate js and HTML. There's a weird extension to HTML. There-are JS-like expressions, JS expressions and bindings to outside JS code It's also neither shoryer to write nor easier to read.