Starting with Vue.js: how about using it?

Starting with Vue.js: how about using it?
by Janeth Kent Date: 06-04-2020 javascript vue frameworks vuejs tutorial

Vue.js seems to be another JavaScript UI library with a strong community support. If you've got a project coming up and you're wondering which tool to choose from, you can try Vue. View is very easy to learn and in just 10 minutes you can get started with it (actually that's what this article will help you do).

But first let's look at why you should even try to give Vue a quick look.

Why use Vue?

The idea behind this post is not to try to persuade you whether or not to use Vue. Nor should it start an argument about whether it's better than other tools out there or not. Rather, the purpose is to show you how easy and simple it is to get started with Vue.js and perhaps it could save a deadline for you.

When compared to the alternatives, including Angular, React, Ember, Aurelia, etc., Vue brags in some aspects of having beaten some of them. Simple API, size, overall performance, curve of learning, etc. On the official documentation., you can look at these comparisons.

But we already know, that these tools are not the most important of all — it's just about you, your customer, your team, and the project. Choosing what blends in well with all those factors is recommended, and if Vue does, read on!


View requires to experience its awesomeness as little as a single script. And we can use Fiddle for this tutorial and we don't need to procure the priviledge of tooling to keep building on our machine. This will also help us to instantly see some of our code coming to life.

Simply create an empty Fiddle and add to the HTML the following script:

<script src="[email protected]/dist/vue.js"> </script>

The script loads Vue into the Fiddle ecosystem and we can use whatever Fiddle API can offer .

The Vue Instance

Each Vue application's entry point is created through an instance. Then the instance configures the rest of the application and can drill into children as your application scales up. That's how it looks like:

// The Vue instance
new Vue({
// Element to attach the app
// on the DOM
el: '#myapp',
// Bindable data
data: {
message: 'Hello World! Welcome to Ma-No',

The instance is coded by passing information about the app into an object and where it should be loaded. The el property explicitly states which element to mount on and the value is the ID of the element prefixed with a hash (#).

The data to be linked to the view is clearly stated with the data property, which also has a value object that can be accessed through the template.

Back to our HTML, using what is called reactive binding, we can display the data:

<div id="myapp">
<p>{{ message }}</p>

Two things that are worth mentioning are :

  • Where we mount the application (the ID of our DIV)
  • The double curly braces are used to bind the data to the template.

We bind the message value specified during configuration in the data object. It's really simple to get started and we already have a working app:


We've already seen a clear example of binding data to view, however in a real application there's more to it. Let's start drilling it further and see what Vue can do for us:

The Conditions

The ability to bind data to view before a decision is a very useful feature in JS frameworks. Only if a value resolves to true can we tell Vue to make a binding. Let's start to look how:

new Vue({
el: '#myapp',
data: {
message: 'Hello World! Welcome to Ma-No',
//We check if a user is a new User or not
newUser: true

We just added additional data to check whether or not the user is new. If the user has just entered, he / she will not be a new User. Use the flag to display various messages to users of Ma-No:

<div id="myapp">
<!-- Display new user-->
<h2 v-if="newUser">{{ message }}</h2>
<!-- Display old user -->
<h2 v-else="newUser">Welcome back! Choose a tutor</h2>

v - if and v - else are liable for displaying data. If the value being examined (which is newUser) resolves to be true, the v - if directive template wins, if false, v - else wins.

The Loops

Vue is amazing enough to provide us with a simple API for looping through a range of bound data. For this purpose, the v - for directive takes its use and all we need is a set of data:

<li v-for="tutor in tutors">{{tutor.fullname}}</li>

V - for embraces a loop expression that generates a tutor variable and utilizes the variable to iterate over a tutor array. The array actually contains the object so that the properties can then be accessed:

new Vue({
el: '#myapp',
data: {
message: 'Hello World! Welcome to Ma-No',
newUser: false,
// Array of tutors
tutors: [
{id: "ABC", fullname: "Mario Rossi"},
{id: "DEF", fullname: "Luigi Bianchi"},
{id: "GHI", fullname: "Joana Doe"},
{id: "JKL", fullname: "Paul Blu"},
{id: "MNO", fullname: "Mary White"},
{id: "PQR", fullname: "Sam Green"}

You can notice the array that contains a list of tutors which the v-for directive is iterating over.

Two-Way Binding

Two - way binding in Vue is quite straight forward and can be accomplished with a v - model directive. By attaching the v - model directive to a text input and displaying the data at the same time, let's see two - way binding in play:

Add tutor: 
<input type="text" v-model="tutor">

The directive's value is used for data binding, and that is why the interpolation content ({{}}) is the same as the directive's. In our Vue configuration, we now need to define the data:

new Vue({
el: '#myapp',
data: {
message: ''Hello World! Welcome to Ma-No!',
// For the two-way binding
tutor: '',
newUser: false,
tutors: [
// Truncated for brevity

Events and Handlers

Event is the narrative behind any web application's user interaction. Because of that, for generating and handling events, Vue has a very declarative syntax that is easy to understand and reUser.

Let's add more controls to our view to collect the full name and ID of the tutor.

ID: <input type="text" v-model=""> 
Fullname: <input type="text" v-model="tutor.fullname"> 
<button v-on:click="addtutor">Add tutor</button>

It's just a simple binding, however this time we bind to an object's values and not just a primitive direct value.

We also added a button to an event as well. Using the v-on directive, events in Vue are created while attaching the type of event using:. Eg: v-on: click, v-on:mouseover, etc. The click event takes a handler, addTutor that we still have to implement. Before this event is implemented, update the Vue config Tutor data to an object instead of a primitive:

tutor: {id:'',fullname:''},

Event handlers are specified in the same way as bound data, but not directly within the data object, but in a methods object:

new Vue({
el: '#myapp',
message: 'Hello World! Welcome to Ma-No!',
// No longer a primitive
newUser: false,
// Truncated for brevity]},
// Methods
// Add tutor handler
addtutor: function(){
// Add new value from the inputs
// above the existing array

The function value of the addtutor property tells our app what to do when clicking on the button. All it does is update the tutor array by dropping our new tutor over the array with unshift

Meet Components

You may stop worrying because you can can enjoy components like you are doing in other frameworks or libraries. Components are recommended in Vue projects, because we can already see that our app is expanding.

Let us build a tutor-user component that only gets data from our application and shows the information:

// tutor-user component
Vue.component('tutor-user', {
// acceptable props
props: ['tutor'],
// renderable templates
template: '<li>{{tutor.fullname}}</li>'

Components are built with a Vue.component that takes two arguments : name and configuration. The object config establishes the template that the component will inject to the DOM and the props expected from the parent of the component. The parent himself is that, so let's see how the parent calls it:

<tutor-user v-for="tutor in tutors" v-bind:tutor="tutor"></tutor-user>  

Using the identifier specified during component creation, we render the component. Using v - bind, we also pass in the props:[PROP NAME ] where PROP NAME is the property name and mentor in our case. The property's value is obtained from the loop.

This may not be useful for our application, but once an app has scaled, more and more DOM items may be necessary for the part taken care of by the component.


As you saw, starting with Vue is very easy and Vue actually boasts simplicity. Vue looked at other frameworks ' disadvantages and tried to improve things that make it worthy of being shot or even considered.

by Janeth Kent Date: 06-04-2020 javascript vue frameworks vuejs tutorial hits : 10647  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Dates in local format with Javascript

In the articles we have about dates in JavaScript we were missing one about how to create dates in local format with JavaScript. That is to say, being able to…

Formatting hours in Javascript

Continuing with the set of articles that talk about internationalisation elements, like the previous one where we talked about relative dates in JavaScript, we will see in this one how…

Request data with prompt in JavaScript

After having published several articles about how to manipulate arrays and dates, today I will publish a post that some of you will find too basic and others will find…

Relative dates in JavaScript

One of the interesting things about the internationalisation library represented in the Int object is the handling of relative dates in Javascript. This handling allows us to represent a date…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

The JavaScript forEach loop

We have already talked about how to handle some of loops  types in Javascript including for, for-in and for-off loops. In the case of today we are going to see how…

What are React Hooks and what problems they solve

Working with React, - and before the release of Hooks in version 16.8 -  there was always the possibility to create components in three different ways based on a number of…

Flattening arrays in JavaScript

When we are handling arrays that are arrays or have multiple dimensions it can be very useful to know how to flatten arrays in JavaScript. That is to say, to…

How to populate an array with random numbers in JavaScript

Some of you might think that what we explained in the article on how to populate an array with numbers, apart from the didactic part, would not have much applicability…

How to populate an array with numbers in JavaScript

Populate an array with numbers in JavaScript The first step is to initialise the array. So today we are going to see a simple way to do it and see how…

Top Javascript Libraries and Frameworks Part 2

What are JavaScript frameworks?   JavaScript frameworks are application frameworks that allow developers to manipulate code to meet their particular needs. Web application development is like building a house. You have the option…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration