Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You can think of it as sugar for `React.createElement()`, and some other stuff (like spread) but that's it. It's really easy to translate into javascript in your head.

Why is this good?

1. Let's say I want to stick a debugger in my template or render function. How would you do it in Vue? Angular? I don't know, gotta look it up, not even sure if possible. How would you do it in React? I don't have to look anything up, I just have to think (use an iife):

   <div>
     <SomeComponent
       debug={(() => { this.state; debugger; })()}
       someProp="prop"
     />
   </div>
2. Let's say I want to use Immutable.JS instead of plain js arrays. How would I iterate over an immutable list in Vue. In Angular? I don't know, probably have to download some third party directive. React:

    <ul>
      {immutable.toSeq().map(x => <li>x</li>)}
    </ul>


I use ractive, which uses a virtual DOM and simple mustache templates. I'd use a ractive expression to do the debugging.

People seem to think using a familiar templating language excludes using the full power of JavaScript. It doesn't.


You can totally use JSX with Vue.


>How would you do it in Vue?

     {{ data | json }}
will give you formatted json output of the data object (i.e. state/props) In reality you can put anything that's in the Vue object's scope between curly braces, pipe it through the json filter.

>immutable list in Vue

    <li class="for-example" v-repeat="item in list">{{item}}</li>


> {{ data | json }}

So neither debugger support nor printf-debugging, you just have to hope you'll be dumping garbage in a place where it can be seen and doesn't break the page entirely?

> <li class="for-example" v-repeat="item in list">{{item}}</li>

Ignoring that vue changed the name of the directive a while ago[0] that doesn't even remotely work, according to its documentation v-for (née v-repeat) works on native arrays, it's not going to work in any sensible manner on immutable.js structures.

[0] https://github.com/vuejs/vue/issues/1200




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: