Vue Tutorial 2 - Conditionals, Loops, and Transitions
Begin your journey to becoming a Vue master!
Join the DZone community and get the full member experience.
Join For Free
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>
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.
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:
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
Opinions expressed by DZone contributors are their own.
Comments