A Vue Blog

Conditional Rendering and List Rendering in Vue.js

Sat, 31 Aug 2019 21:45:00 GMT

In my post on directives I talked about v-if and v-for. Today let’s take a deeper look into both.

`v-if`

We can use this directive to conditionally render a block. Whether the block will get rendered depends on the truthiness of the expression in the directive. v-if removes the block from the DOM and hence won’t be rendered.

<p v-if="isTrue">You can see me!</p>

`v-else`

You can use v-else directive for rendering an alternate block when the v-if condition is not true.

<p v-if="isTrue">You can see me!</p>
<p v-else>Now you don't!</p>

`v-else-if`

There is a v-else-if directive as well, which can be chained multiple times and it can serve an ‘else-if’ block.

<div v-if="number === 1">
  One
</div>
<div v-else-if="number === 2">
  Two
</div>
<div v-else-if="number === 3">
  Three
</div>
<div v-else>
  Not One or Two or Three
</div>

One thing to keep in mind while using v-else and v-else-if is that they should immediately follow a v-if or a v-else-if.

`v-if` on `<template>`

Now there might come situations where we have to render multiple blocks based on a condition. We can use v-if on <template> in that case to create an invisible wrapper. The output that gets rendered will not include the <template> element. This can also help us avoid the unwanted use of <div> tags.

<template v-if="showUser">
  <h1>Name</h1>
  <p>Username</p>
  <p>Title</p>
</template>

`v-show`

We have another directive for conditionally displaying elements called v-show. We can use it similarly to v-if.

<p v-show="isShow">You can see me!</p>

The difference is that the block will get always rendered but just hides it when the expression is falsy. It toggles the display CSS property of the element. You can view this in the ‘Elements’ tab of your browser’s developer tools.

<p v-show="isShow">You can see me!</p>
<button v-on:click="isShow = !isShow"></button>

The above toggles the value of isShow on the button click. In the developer console, you can see that a style display: none is being added to the <p> element.

A thing to keep in mind is that v-else and v-else-if cannot be used with v-show. v-show also does not support <template> element.

`v-for`

v-for directive lets us render a list of items in an array or an object. The required syntax is item in items where item is the element currently being iterated on from the items array or object.

`v-for` on arrays

<ul>
  <li v-for="ingredient in ingredients">{{ ingredient }}</li>
</ul>

data: {
  	ingredients: ['meat', 'fruit', 'cookies']
}

The above v-for will render an unordered list with the array elements in ingredients as list items.

meat
fruit
cookies

v-for also allows, you to have an optional second parameter, the index of the item.

<ul>
  <li v-for="(ingredient, index) in ingredients">{{ ingredient }} - {{ index }}</li>
</ul>

`v-for` on objects

Similar to iterating through the elements of an array, v-for can be used to iterate through the properties of an object.

<ul>
  <li v-for="object in myObject">{{ object }}</li>
</ul>

data: {
  myObject: {
    title: 'Lord of the Rings',
    author: 'J.R.R. Tolkien',
    books: '3'
  }
}

Result:

Lord of the Rings
J.R.R. Tolkien
3

You can also provide a second and a third argument to get the property name (or key) and index.

<ul>
  <li v-for="(object, k, i) in myObject">{{ k }}: {{ object }} - {{ i }}</li>
</ul>

title: Lord of the Rings - 0
author: J.R.R. Tolkien - 1
books: 3 - 2

Similar to v-if, v-if can also be used with <template> to render a block multiple times.

v-if can also be used with v-for to check whether the block should be rendered for each element based on a condition. v-if can be used on the wrapper element of v-for to skip the loop.

v-for can be used to render a block a given number of times by passing it an integer.

<ul>
  <li v-for="n in 10">{{ n }} </li>
</ul>

Result:

1 2 3 4 5 6 7 8 9 10

Providing a `key` to `v-for`

Vue uses an “in-place patch” strategy where if the order of the items changes, Vue will patch element in place to match the new order instead of reordering the items. While this is efficient, in complex cases it could cause hindrance.

To let Vue track each item, we can provide a unique key to each element. This lets Vue identify the elements and track changes and then reuse and reorder them when necessary. This essentially avoids the re-render of the entire loop.

You can provide key with the help of v-bind.

<li v-for="(ingredient, i) in ingredients" :key="ingredient">{{ ingredient }} ({{ i }})</li>

So Vue makes our life easier by providing us v-for and v-if. They are flexible and can even be used together to solve routine use cases easily.

Dynamic Binding of Classes and Styles in Vue.js!

Tue, 27 Aug 2019 21:45:00 GMT

We know how to attach classes to a tag. But what if we want to do so dynamically. For this we can use the v-bind directive with class. v-bind can be used along with style to apply styles dynamically.

Classes

Object Syntax

We pass an object to v-bind:class where the key is the name of the class and the value is a boolean to decide whether we want to display the class or not.

<div class="box" v-bind:class="{ active: isActive }"></div>

So if isActive is true, the class active gets attached to the node.

We can also have multiple classes by having more fields in the object that is being passed. For the given template,

<div class="box" v-bind:class="{ active: isActive, redBorder: hasError }"></div>

And the following data,

data: {
  isActive: true,
  hasError: false
}

The rendered node will look like this.

<div class="box active"></div>

When hasError become true, hasError class will get tagged on.

The object doesn’t have to be inline. It can be stored in data and then be accessed in the template. We could also use the computed property to return the object.

<div class="box" v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    redBorder: false
  }
}

Or with computed properties:

data: {
  isActive: true,
  hasError: false
},
computed: {
  classObject: function() {
    return {
      active: this.isActive,
      redBorder: this.hasError
    }
  }
}

Array Syntax

We can also pass classes to a node by an array. This is extremely useful when we have a list of classes to apply.

<div class="box" v-bind:class="[ activeClass, errorClass ]"></div>

data: {
  activeClass: 'active',
  errorClass: 'redBorder'
}

This will render:

<div class="box isActive hasError"></div>

You could also have objects in these arrays which can be useful in case of dynamically attaching classes.

<div class="box" v-bind:class="[ { active: isActive }, errorClass ]"></div>

data: {
  isActive: true,
  errorClass: 'redBorder'
}

Inline Styles

Object Syntax

Similar to the case of classes, we can pass an object to v-bind:style. CSS properties can be either camelCase or kebab-case(mention within quotes).

<div class="box" v-bind:style="{ backgroundColor: currentColor, fontSize: fontSize + 'px' }"></div>

data: {
  currentColor: 'red',
  fontSize: 30
}

You could also bind style through an object from data property or through a computed property that returns an object.

<div class="box" v-bind:style="styleObject"></div>

data: {
  styleObject: {
    backgroundColor: 'red',
    color: 'white'
    fontSize: 30 + 'px'
  }
  
}

Array Syntax

We can also pass multiple style objects to v-bind:style with the help of an array.

<div class="box" v-bind:style="[ blandStyle, dashingStyle]"></div>

As an exercise, you could create events to change the colour of the background and text of a div. For example, a click event changes the colour of a div from red to green and back and forth. And to take a step further, try creating a progress bar! Good luck!

Watchers, to Watch Your Properties!

Sat, 24 Aug 2019 11:30:00 GMT

Last time we looked into Computed Property. Now as teased, let’s diverge our attention to the other property to watch out for. Watchers!

Computed properties are great and useful but there are times when we need to just react to a particular property and you can do that using watchers. Another advantage that watchers have over computed is that they can be used to perform asynchronous operations. So you can perform your API calls in watchers when a particular property changes. Let’s see a small example of watchers.

<div id="app">
  <input type="text" v-model="value">
  <div>Square: {{ square }}</div>
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 0,
    square: 0
  },
  watch: {
    value: function() {
      this.square = Math.pow(this.value, 2)
    }
  }
});

Using v-model for two way data-binding, we change the value of the value property from the input field. We then created a watcher for it by creating a function with name of the property we want to watch inside watch. And now whenever value changes, we calculate the square of it and assign it to the square property, which we then print on the screen.

So you can see how incredibly useful watchers are. You can write declarative code which you want to execute only when a particular property changes. It is also good for executing logic that applies to a different property when a change occurs in the property being watched.

Another useful tidbit is that your watcher functions can accept 2 parameters. The first is the new value and the other is the old value.

watch: {
  value: function(newValue, oldValue) {
    console.log(newValue, oldValue)
  }
}

I mentioned how watchers are advantageous over computed in case of asynchronous operations. So let’s simulate an asynchronous operation inside a watcher by using setTimeout.

 <div id="app">
    <div>
        <p>Current Value: {{ value }}</p>
        <button v-on:click="value += 5">Add 5</button>
        <button v-on:click="value += 1">Add 1</button>
        <button v-on:click="reset()">Reset</button>
        <p>{{ result }}</p>
    </div>
</div>

So over here we have 3 buttons and we display two properties. The first two buttons are to add 5 and 1 to value property respectively while the third resets value to zero. result should show ‘Not there yet’ when value is not equal to 42 and it should show ‘Done!’ when it is. And value should be reset to zero, 5 seconds after the result changes. We can get this done by setting a watcher for result.

let app = new Vue({
	el: '#app',
  data: {
  	value: 0,
    
  },
  methods: {
  	reset: function() {
    	this.value = 0;
    }
  },
  computed: {
  	result: function() {
    	return this.value === 42 ? 'Done!' : 'Not there yet'
    }
  },
  watch: {
    result: function() {
    	const self = this;
      setTimeout(function {
        if(self.value === 42) {
          self.value = 0;
        }
      }, 5000);
    }
  }
});

You can see that we are storing this in a variable before we access value inside setTimeout. This is because the Vue instance’s this is not accessible within the function and we wouldn’t be able to access value the way we usually do, this.value.

We watch for changes in result and when it changes we reset value to zero which in turn resets result to ‘Not there yet’.

That’s all for watchers. You could try and call dummy APIs inside them using fetch(). Here’s a cool one, Dog API. Display images of dogs and change on the button click!

Catch you on the next post!

Computed Properties, What Are They?

Wed, 21 Aug 2019 22:00:00 GMT

Let’s go back to the very first blog post where we talked about templates. Another useful thing about templates is that you can write simple JavaScript expressions in them.

<div>{{ count * 10 }}</div>

While this is extremely useful, they are limited to single expressions. And when they tend to get long, the code gets bloated and can be tough to read. And in case you need to repeat the same at multiple places, it leads to repetitive code.

In comes the computed property to save the day. Let’s look at an example.

<div id="app">{{ getFullName }}</div>

let app = new Vue({
  el: '#app',
  data: {
    firstName: 'Light',
    lastName: 'Yagami',
  },
  computed: {
    getFullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

And we get the full name printed! Now whenever you change the value of the data properties being used inside the getFullName computed property, it returns a new full name. So if you go ahead and make a change like app.lastName = “Kira”, a new full name ‘Light Kira’ gets printed!

Computed vs Methods

You must have noticed we could’ve received the same result by using methods.

To begin with, although computed properties are functions at the end of the day, we didn’t have to call them by getFullName(), like methods. We can call them the same way we do with data properties.

Although the end results are the same, the way computed and method properties get there are different. Computed properties are cached. What it means is that the result of a computed property is internally cached and is re-evaluated only when a reactive source gets updated. This means as long as firstName and lastName remains the same, subsequent calls to getFullName does not cause a re-execution of the function and in turn returns the previously calculated cached result.

It is also important to note that the dependant property has to be reactive. Hence the following will not cause a re-render.

computed: {
  nowDate: function() {
    return Date.now();
  }
}

It will render once and will not update on subsequent re-renders.

A huge upside of using computed over methods is the caching. In a case where we have a huge computed property with a lot of computations, execution of computed property on every re-render even when the data source hasn’t changed can be expensive. Computed property lets us skip this by caching the result and returning the same till a re-execution is needed.

But that’s not all! In the next post, we have another property to look out for. Or should I say, watch out for?

Until next time, bye!

Methods in Vue.js

Wed, 14 Aug 2019 23:30:00 GMT

Vue instances can have methods defined in it along with data instances. In this article, we will look into the ‘methods’ property of the Vue instance.

Methods

The method property is where we define the functions that are to associated with the Vue instance. They are very useful for providing functionalities to directives, events or to get work done like regular reusable functions.

Let’s give this a test by creating a function to call alert when a button is clicked.

let app = new Vue({
  el: '#app',
  data: {
    message: 'ALERT!'
  },
  methods: {
    callAlert: function() {
      alert(this.message);
    }
  }
});

<div id="app">
  <button v-on:click="callAlert">Click me!</button>
</div>

Here we let the button know to call callAlert() function when it’s click event is triggered using the v-on directive. (You can go here to get a quick refresh on directives)

We don’t have to call a function as v-on:click=“callAlert()”. This is unnecessary. v-on:click=“callAlert” will suffice.

Then we go ahead and define the callAlert function inside the methods property of the Vue instance.

Now we want to show the value stored in the message data property in the alert box. We can access data properties inside methods using the this property. So, in this case, we can access the value of message using this.message. And that’s how we pass the value of message to the alert box.

There we go! We just called our very first method in Vue!

And this demonstrates how useful methods are in the case of event handling in Vue.js.

Passing Parameters

Like normal functions, Vue.js methods can also accept parameters. v-on:click=“methodName(param)” is how we can pass parameters to methods. Let’s try to expand this on our previous example.

let app = new Vue({
  el: '#app',
  methods: {
    callAlert: function(textMessage) {
      alert(textMessage);
    }
  }
});

<div id="app">
  <button v-on:click="callAlert('Parameter says hi!')">Click me!</button>
</div>

You can access the event object the way you usually do in normal Javascript functions.

But in case you need to accept another parameter along with the event object, we pass a keyword reserved by Vue in the method call, $event.

<input type="text" v-on:keydown="storeValue('Mr.', $event)">
<p>{{ value }}</p>

new Vue({
  el: '#exercise',
  data: {
    value: ''
  },
  methods: {
    storeValue: function(salutation, event) {
    	this.value = salutation + ' ' + event.target.value;
    }
  }
});

Here the output will have the salutation passed to the method, which we attach to the value.

Event and Key Modifiers

Calling event.preventDefault or event.stopPropogation inside event handlers is very common. Vue lets us skip this step of calling them inside the event handlers and thus have only data logic inside it. Vue provides event modifiers which can be postfixed with a dot after the v-on directive.

<!-- the propagation of the click event  will be stopped -->
<a v-on:click.stop="handleClick"></a>

<!-- the form submit event will no longer cause a reload of the page -->
<form v-on:submit.prevent="onFormSubmit"></form>

There are many other event modifiers like .capture, .self, etc. You can check them out in the official docs.

Key Modifiers on the other hand lets us listen for specific keys during keyboard events.

<!-- `handleInput()` will only be called when the key is `Enter` -->
<input v-on:keyup.enter="handleInput">

This can help us in cases where we want to change a data property only when enter is pressed. You can find many more key modifiers in the official docs.

Now that we have got our heads around Vue methods, it’s time for a challenge. Remember that we set up a counter that increments on every button click in the last post? Now you could try to do that with Vue.js methods! So you guys give that a try and let me know how it goes.

See you on the next post!

Fantastic Directives and How To Use Them!

Mon, 12 Aug 2019 22:00:00 GMT

Welcome to another edition of A Vue Blog, a blog for beginners to Vue.js from a beginner to Vue.js. Last time we saw how to print Hello World! on to the screen using string interpolation. Let’s move forward and look into directives.

Directives are attributes provided by Vue that can help us apply a special behavior on to our HTML and DOM. They all start with v- which indicates that they are provided by Vue.

We can create our own directives but in this article, we will play with some of the default directives which can be most useful.

`v-bind`

Let’s try and create a link that takes us to the blog of the creator of Vue.js, Evan You. We will create a property called url inside the data property and try to pass it to the href attribute of the anchor tag using templates.

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
    url: 'https://evanyou.me'
  }
});

<div id="app">
  <a href="{{ url }}">Evan You's blog!</a>
</div>

Then you go ahead and click the link, but it doesn’t take you to the URL. This is because templates don’t work with attributes.

Inorder to use properties inside attributes, we use a directive called v-bind.

<div id="app">
  <a v-bind:href="url">Evan You's blog!</a>
</div>

And now the link takes you to the URL in the data property.

`v-once`

v-once is a directive which forces a tag to render only once. Now any time the value of message changes, the rerender will not occur.

<div id="app">
  <h1 v-once>{{ message }}</h1>
</div>

You can try to reassign app.message a new value, but the output will not change.

`v-text`

This directive does what template syntax does. Show the value of a data property.

<h1 v-text="message"></h1>

`v-html`

Vue.js by default escapes HTML. What this means is that if we use templates to print a property that contains HTML, it will get printed as text and not as a tag. This protects the program from XXS attacks.

In case we need to output HTML, we use v-html directive.

<span>{{ htmlToDisplay }}</span>      <!-- <p>Hey fellas!</p> -->
<span v-html="htmlToDisplay"></span>  <!-- Hey fellas! -->

`v-model`

This directive can be used to create two-way data bindings on form input, select and other elements. It lets us update data properties on user inputs.

<input v-model="message" placeholder="Edit the message">
<p>Message is: {{ message }}</p>

The initial message shown will be ‘Hello World!‘. The input field will also have the same value. When you edit the input field, you will see the same changes getting reflected below.

`v-if, v-else` and `v-else-if`

Vue has provided directives for conditional rendering. This helps us to render only when a given condition is satisfied.

<p v-if="showThem">Hey Guys!</p>

The above tag will only get rendered when showThem is true.

`v-for`

This directive lets us print a list of items.

<ul>
  <li v-for="fruit in fruits">{{ fruit }}</li>
</ul>

let app = new Vue({
  el: '#app',
  data: {
    fruits: [
      'Apple',
      'Orange',
      'Grape'
    ]
  }
});

This will render an unordered list of fruits.

`v-on`

v-on directive lets us listen to DOM events and execute a piece of code when the event gets triggered.

<div>
  <button v-on:click="count += 1">Increment by 1</button>
  <p>
    The count is: {{ count }}
  </p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

On every click event on the button, the data property, count gets incremented by 1. We see the change getting reflected below where we display the count.

There are many more ways we can use the v-on directive and we will look at them in the future.

Vue.js instances can not only have data properties. They can also be home to methods. And that’s what we will get into next time!

Hello World!

Wed, 07 Aug 2019 22:00:00 GMT

Welcome to my blog!

This is a blog for absolute beginners to Vue.js, from an absolute beginner to Vue.js! But a basic understanding of HTML, CSS, and Javascript is recommended.

Here I will talk about everything I cover on Vue.js and then try and teach the same to you, my faithful readers. So to kick off let’s start with the archetypal first program everyone writes. Printing Hello World! on to the screen.

Before we get our hands dirty with code, what is Vue.js?

Vue.js is a progressive Javascript framework used to build user interfaces. It’s called progressive because it is incrementally adoptable - it is easy to use and to integrate with other frameworks and libraries.

I’m sure this will become more apparent to us as we go along so let’s get started.

There are many possible ways to install Vue.js, but we will start easy by using the Vue.js CDN. You can use JSFiddle or create an HTML file and attach the following script:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

In the HTML file create a div tag and assign it an id ‘app’. Inside the div, write {{ message }}. Our HTML code will look something like this.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  {{ message }}
</div>

In the JS file write the following, save and then run.

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
});

Voila! And that’s our very first Vue.js app done and dusted!

We got the desired output, but like me, you must be wondering what just happened?

As you can see, we pass an object to the new Vue() instance. Thanks to the CDN we attached at the beginning of the HTML file, we get access to the Vue() constructor. Vue.js binds itself to the element with the id that we provide in the el property. And now everything, from what to display in the element to managing how it behaves during events can be controlled from the Vue instance.

Now you must have noticed this data property. All the properties inside it are used to store the values needed in our app. These properties are now added to Vue’s reactivity system. Whenever the values of these properties change, the view will rerender and the new value will be shown. Go to the console of your browser and set app.message to a new value and you can see the output change.

Vue.js uses template syntax - the curly brackets - to bind the DOM to the Vue instance’s data. In {{message}}, the tag gets replaced with the value of message property. Now whenever the value of this property changes the tag will get updated.

On a side note, the properties defined in data are only reactive if they existed when the instance was created. So if you go ahead and create a new property called app.newMessage = ‘World says hello back!’, any changes to newMessage will not cause a rerender.

So there you have it. Your very first Vue app where you say hello to the world! As a “homework/exercise” you could display your name and a title you want to give yourself in separate tags. Give yourself a cool title. Too bad ‘Star-Lord’ is taken.

If you have any corrections, suggestions or feedback for me, feel free to reach out to me at twitter.

See you next time when we jump into directives.

A Vue Blog

Conditional Rendering and List Rendering in Vue.js

v-if

v-else

v-else-if

v-if on <template>

v-show

v-for

v-for on arrays

v-for on objects

Providing a key to v-for

Dynamic Binding of Classes and Styles in Vue.js!

Classes

Object Syntax

Array Syntax

Inline Styles

Object Syntax

Array Syntax

Watchers, to Watch Your Properties!

Computed Properties, What Are They?

Computed vs Methods

Methods in Vue.js

Methods

Passing Parameters

Event and Key Modifiers

Fantastic Directives and How To Use Them!

v-bind

v-once

v-text

v-html

v-model

v-if, v-else and v-else-if

v-for

v-on

Hello World!

`v-if`

`v-else`

`v-else-if`

`v-if` on `<template>`

`v-show`

`v-for`

`v-for` on arrays

`v-for` on objects

Providing a `key` to `v-for`

`v-bind`

`v-once`

`v-text`

`v-html`

`v-model`

`v-if, v-else` and `v-else-if`

`v-for`

`v-on`