Vue.js 2 Web Development Projects

JSX

JSX is a special notation used inside the JavaScript code to express HTML markup. It makes the code responsible for describing the view closer to the pure HTML syntax, while still having the full power of JavaScript available.

Here's an example of a render function written with JSX:

<script>export default {  data () {    return {      movies: [        { title: 'Star Wars' },        { title: 'Blade Runner' },      ],    }  },  render (h) {    const itemClass = 'movie'    return <ul class='movies'>      {this.movies.map(movie =>        <li class={ itemClass }>{ movie.title }</li>      )}    </ul>  },}</script>

You can use any JavaScript expression inside single brackets.

As you can see in this example, we can use any JavaScript code to compose our view. We can even use the map method of the movies ...