{{announcement.body}}
{{announcement.title}}

Vue Tutorial 2 - Conditionals, Loops, and Transitions

DZone 's Guide to

Vue Tutorial 2 - Conditionals, Loops, and Transitions

Begin your journey to becoming a Vue master!

· Web Dev Zone ·
Free Resource

man-looking-over-mountain-at-sunset

Last week we were introduced to Vue.js, and we started our very first project. We imported the library and created our first ever instance of a Vue app. In this tutorial, we get more familiar with basic syntax and look into conditionals, loops, and some basic transitions that are nicely baked into Vue. 

(If you missed the previous tutorial you can read it here.)

Conditionals

In the previous tutorial, I imported Vue using a CDN; in this tutorial, I’ll switch to using npm for the convenience of development and harnessing the power of our IDE’s autocomplete feature, which is otherwise not available. 

It’s up to you which way you’d like to manage your imports but in order to use npm you’d need NPM installed in your development environment. NPM installation is outside of the scope of this tutorial, but it's very simple, and you can easily find many tutorials online on how to do it. 

You may also like: How and Why We Moved to Vue.js.

Once npm is installed you’ll have to use the following 3 commands to get vue.js in the project

npm init 

npm install

npm install vue 

Create a new HTML file, hoops.html, and then import Vue.

<script src="node_modules/vue/dist/vue.js"></script>


Conditional statements can be implemented using the  v-if directive. Let’s create a new app that uses the v-if directive, which will show or hide a particular element depending on a variable named seen

<div id="app-3">
        <p v-if="seen">Now you see me</p>
</div>

<script>
    var app = new Vue({ 
        el: "#app-3",
        data: {
            seen: true
        }
    });
</script>

Initial output

Initial output

Now, let’s update the seen variable to false in the console and watch the conditional directive do it’s thing

 app.seen = false 

I personally think it’s quite cumbersome to be heading into the console to adjust this variable. Let’s add a button that will toggle this state and effectively make the text appear and disappear. 

<button v-on:click="seen = !seen">Toggle</button>


Notice the new directive that we’ve used  v-on:clickwhich means that every time this button is pressed, it will toggle assign the value of seen to the opposite of what it currently is. Exactly what we needed.  

Toggling seen variable with button

Toggling seen variable with button

With every press of our amazing toggle button, the text appropriately adjusts its visibility. However, I feel like we could do with a nice transition effect to make our web app even more impressive. 

Transitions

We are in luck. As it turns out, Vue provides a very convenient and powerful transition system that can automatically apply transitions when elements are inserted, updated, or removed. It would be a shame not to use them!

Here’s how to apply a simple transition to our disappearing text. First let’s surround our disappearing block of text with the transition tag and specify the type of transition which in our case is “fade.”

<transition name="fade">
    <p v-if="seen">Now you see me</p>
</transition>


Let’s add some CSS inside the <head> tag

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>


If you try the button now, you will get to experience some slick entry and exit transitions. Wow!


Loops

Our next task is to learn about loops in Vue.js. As you have probably guessed, there’s a directive for that,

 v-for.

 v-for is basically a for-each loop. We pass it a list of items and assign a name to each individual item, which we can then use to display it. 

Html

<ul>
    <li v-for="grocery in groceries">
        {{ grocery.name }}
    </li>
</ul>


Vue

var app = new Vue({
    el: "#app-3",
    data: {
        seen: true,
        groceries: [
            {name: "Milk"},
            {name: "Cheese"},
            {name: "Bread"},
            {name: "Butter"},
        ]
    }
});


If you've done everything right, this is what you'll end up with, for now:

Looping through grocery items

Looping through grocery items

Conclusion

Today, we learned how to implement conditionals and loops along with some basic transitions with Vue.js.

So much power yet there’s still so much to learn! I think it would be cool if we added an input box with a submit button, which would take our input and add it to the list of groceries, so let’s do that in the next tutorial where we’ll discuss handling user input in more detail.

Code

https://github.com/madrzak/dzone-vue-laravel


Further Reading

Topics:
vue app ,vuejs 2 tutorial ,vuejs 2 ,vuejs ,conditionals ,loops ,transitions ,tutorial ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}