[moo360]

Since the logic inside of JSX is just JavaScript encapsulated in braces, you're basically saying that Vue's angular like attributes are better than just simple javascript syntax?

I don't understand how

    <ul>	
        <li v-for="num in listItems">{{num}}</li>
    </ul>

is less readable than

    <ul>
        {listItems.map((num, i) => <li key={i}>{num}</li>)}
    </ul>

Both are pretty readable, but the latter is essentially normal javascript, with the idea that you can return dom elements in it. The only thing that a javascript developer with zero jsx experience needs to know is that you can express dom elements within your javascript and treat them exactly like functions that return that element (which is what they are).

What someone has to know to parse your vue example is the exact syntax for for loops in vue, evidently the syntax in this example is quite simple but what if they want to perform extra logic in that loop to modify which elements to show? In the react example all they have to do is know javascript.... in Vue they have to go look up how to do that in Vue.