Vue Part 2 - Template Syntax and For loops

This is the second article of the series and we will discuss how template syntax works as well as how Vue's for loop can be used to loop over different iterables to avoid ES6 of Javascript or rendering the list in some other manner.

Template Syntax - Basically what works and what not in that {{}} thing or the normal HTML, when data is passed through it, and what parts of Javascript works in this and what directives are and how it works.

Basically, JS can be rendered inside the double mustache but with some restrictions. What are these?

Multiline JS doesn't work in it. eg:-
```
<h1>{{ header; header.toLocaleUpperCase(); }}</h1>
```
the above contains multiple lines of JS that don't work in this particular case.

Cannot Define variables inside the mustache eg:-

<h1>{{ var head = header.toLocaleUpperCase(); }}</h1>

Conditional Rendering using flow control won't work eg:-
```
<h1>{{ if(head) return head;}}</h1>
```
If you want to render something conditionally we can use the v-if directive or ES6 to do so.
User-defined globals can't be accessed in the templating syntax
Shorthand syntax can be used like for v-on:click can be used as @click and in case of v-bind:href we can use :href
Directives such as v-if, v-on, v-bind, v-model, v-for and more you can find here

Now let's discuss more on the for loop directive and how to leverage it with ease and efficiency.

For loop directive

<li v-for="item in items">{{item}}</li>

Where your items is the list defined in the data in the Vue Instance. Now see how easy it seems to use for loop over a certain list of items. eg:-

<body>
    <div id="app">
        <h1>{{header}}</h1>
        <ul>
            <li v-for="item in works">{{item}}</li>
            <!--v-for is also reactive, it works similar to how 
                the for loop works
            -->
        </ul>
    </div>
    <script src = "https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                header: "the todo list",
                works: [
                    'Do homework',
                    'Do workout',
                    'Go to school'
                ]
            }
        })
    </script>
</body>

This is it for now and we will move further in the next article. Stay tuned for some exciting articles.

dubesar

dubesar

Vue Part 2 - Template Syntax and For loops