DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Microservices Decoded: Unraveling the Benefits, Challenges, and Best Practices for APIs
  • Web Development Checklist
  • Cypress Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Best Practices for Securing Infrastructure as Code (Iac) In the DevOps SDLC

Trending

  • Microservices Decoded: Unraveling the Benefits, Challenges, and Best Practices for APIs
  • Web Development Checklist
  • Cypress Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Best Practices for Securing Infrastructure as Code (Iac) In the DevOps SDLC
  1. DZone
  2. Coding
  3. JavaScript
  4. Vue Tutorial 2 - Conditionals, Loops, and Transitions

Vue Tutorial 2 - Conditionals, Loops, and Transitions

Begin your journey to becoming a Vue master!

Łukasz Mądrzak user avatar by
Łukasz Mądrzak
CORE ·
Oct. 28, 19 · Tutorial
Like (6)
Save
Tweet
Share
7.47K Views

Join the DZone community and get the full member experience.

Join For Free

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:click, which 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

  • Vue Development in 2019: What You Need to Know.
  • Creating a Real-Time Data Application Using Vue.js.
  • Vue.js Tutorial: Build a Tesla Battery Range Calculator.
Vue.js Npm (software) Directive (programming) app IT Element Console (video game CLI) application

Opinions expressed by DZone contributors are their own.

Trending

  • Microservices Decoded: Unraveling the Benefits, Challenges, and Best Practices for APIs
  • Web Development Checklist
  • Cypress Tutorial: A Comprehensive Guide With Examples and Best Practices
  • Best Practices for Securing Infrastructure as Code (Iac) In the DevOps SDLC

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: