Basic Vue tutorial in 30 minutes: What it is, what it is for and examples

▶

In this post we will see the first steps with this framework called Vue, which is the boom of today, the JavaScript framework that is more fashionable; we will take a quick look at Vue's features, where to install it, how to download Vue, we will do a simple comparison of Vue with jQuery and then we will give some small examples to start working with Vue.

What is Vue and what is it for?

Vue is a Progressive Framework, which means it's for consuming the user interface; It was created by Evan You who was working at Google at the time; Vue emerged in 2014, as you can see it is a recent framework with "little" time on the market but it is very polished, it is well received by users, a growing community, good documentation and ease of use that do not require not even use Node to use it, which is a great advantage it has over the competition.

Vue Features

Vue is a progressive framework, which means that we can use it for something very basic, just like jQuery or larger and more complex systems, and in general it has very good performance for how little it weighs:

• Vue is an accessible framework that is available to everyone through open source.
• It is a very small framework that greatly facilitates interaction with the interface or HTML.
• Optimized; its kernel is very small and occupies about 70Kb, which is quite light.
• As we indicated before, it has a growing community and good documentation with a low learning curve since it is easy to use and very concise.

How to install Vue?

As we have indicated in its characteristics, we have several ways to install Vue, if we want to install it to do simple things, without using components, we just need to use the script available on the CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

Now if we want to use it to do more complex things, use components, etc., we can use the Vue cli that allows us to add components, pages, and total control over our project from the command line that we will see in other posts.

To install Vue we go to the official site at:

From the web we will see that we can install it through an npm module, but we can also download it with any JavaScript file and copy it into our HTML file.

Vue has a tool called Vue Cli that allows us to install plugins and thus extend its functionality, we can easily create projects based on this technology, however the easiest way to start is by including the previous URL as we will do in this entrance; It will be left for more advanced entries to use the Vue Cli tool to integrate it with Laravel or Codeigniter, etc.

Vue vs jQuery

The first thing you have to keep in mind is that they are two worlds apart, two different paradigms that seek to do the same thing, web applications in a simple way, jQuery has a huge number of plugins and gives us that extra that we don't have with native JavaScript and Vue also gives us a significant number of plugins and allows us to gain organization, optimizing at the code level down to the minimum to do things that are general as we will see below.

There are many reasons why we can use frameworks like Vue that are progressive instead of jQuery or similar frameworks; Vue offers us a greater organization (although in practice jQuery does not offer us any organization or development pattern) than that offered by jQuery, they are codes that are easier to understand and maintain since it has components and the Vue template pattern that we saw in the previous section; A very strong point is, as we will see in other Vue entries, it is the powerful interaction based on events, we can establish models or variables in Vue and tie them to an HTML element and modify it wherever we want, that is, if we modify the variable from JavaScript, this change will be reflected in the variable; the same happens if we modify it in an HTML element.

We can reference variables in the HTML as if it were a template and it will be printed and updated in real time if the variable undergoes changes without us doing something.

Now it is up to you to imagine how to do this with native JavaScript or jQuery, which although it is not a complicated task, as you will see in the examples section in Vue, it is something native and works very well.

We can print arrays easily and from the HTML itself using some special clauses that vue itself processes internally, in the case of jQuery we would have to iterate everything through a for or each within the script block

In the end, one technology does not have to overlap the other, it all depends on the project you are carrying out and intelligently coupling one or the other technology, including both without any problem.

Some jQuery Pros

• Being able to make Ajax requests easily.
• A set of animations extensible through plugins.
• Thousands of plugins at your disposal.

Some cons of jQuery

• You must handle each HTML element independently.
• The rendering system (showing content in HTML) is typical and somewhat outdated compared to other technologies.
• It's a pain when the app grows as it lacks organization.

Some advantages of Vue

• Great system to render JavaScript to HTML as if it were a template.
• Low learning curve.
• Organization through components.
• Extensible through components.
• Vue Cli to create SPA applications.

Some disadvantages of Vue

• It does not make Ajax requests natively.
• It is an evolving technology, always changing.

Of course, jQuery has important plugins and methods that make life much easier for us, so depending on the focus of your project you can select one or the other or even both and use the strongest elements of each of them.

Depth reactivity

Now is the time to take a deep dive! One of the most distinctive features of Vue is the discrete reactivity system. Models are proxyed JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it's also important to understand how it works to avoid some common pitfalls. In this post, we are going to learn about some of the details of Vue's reactivity.

What is reactivity?

The reactivity is tied to the properties that we define in the data options; Vue will detect each time we modify these properties.

Each of these properties has a watcher internal to the framework that detects when there are changes to it and when it is detected, it triggers the render option (of the template), resulting in us seeing the changes reflected in that property in the logic that we have defined. in our template; It is important to note that the render process is executed ONLY if the property changes affect the template;

In practice we have a highly optimized process when Vue updates the DOM (template)

Why start using Vue?

As we mentioned before, we should not cling to one technology or another, each of them has its advantages and disadvantages, the same things can be done in different ways, so depending on what you want to do, select one technology or another; Vue allows us to save time when creating applications with which we are going to manipulate the HTML DOM a lot due to how it is conceived, but there are many other more specific tools that you can also use depending on what you want to do.

Vue Examples: Building Our First Applications

In this section we will see how to use the basics of Vue, we remind you that Vue as a framework that is, you can expand its functionality through plugins and it has its own command line system through Vue Clic, but we can do really interesting things with Vue using a minimal JavaScript compared to jQuery or even native JavaScript:

Declarative rendering

As a very powerful feature, Vue has its own rendering system in which in the HTML that we define the scope of Vue, we can render values of variables declared in JavaScript and referenced in HTML as we see below:

<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: "Hola Vue"
        }
    })
</script>

This gives us the following output:

As you can see it is a very powerful feature of Vue, nowadays that we receive data from everywhere, we can easily reference variables, gaining readability and organization in JavaScript like never before.

You might think something like "Ok ok we can print variables in the HTML with some braces what else can it do".

Conditionals in Vue

Another very common characteristic is that we want to show a certain HTML block if something happens, or hide it, for this there are conditionals; for example for the following code:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
</div>

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

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:true,
			name: 'Andres'
        }
    })
</script>

In this way, if we change the value of the isActive property to false then the h1 defined in the HTML would not be displayed; for the above example the output would be like the following:

But we can put an else or better v-else clause like the following to show another message, code block or whatever you prefer:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>

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

<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

And we can even place the typical v-else-if to place more conditions as in the following case:

<div id="app">
    <h1 v-if="isActive">{{name}}</h1>
	<h1 v-else-if="name === 'Andres'">Hola Andres como estas</h1>
	<h1 v-else="isActive">No User</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
			isActive:false,
			name: 'Andres'
        }
    })
</script>

The v-if directive works as if it were a conditional, it allows evaluating true and false conditions that can be in functions, properties, etc.

    <input v-if="setDefaultValue" type="number" v-model="valor" />
    <div v-else-if="valor == 5">Los dioses me dicen que valor es 5</div>
    <div v-else>Ya no hay campo jaja</div>

As you can see; you can tie the else and the else if to it whose operation is the same as that of a conditional, therefore, you can nest conditions.

Here is the JavaScript block:

data() {
   return {
     valor: 0,
     setDefaultValue: true,
   };
 },

The v-for directive : Loops in Vue

The next thing we'll see is the use of loops in Vue; for it is the directive v-for to which a collection of elements must reference; for example:

<div id="app">
    <ul>
		<li v-for="post in posts" :key="post.id">{{post.title}}</li>
	</ul>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			posts: [
				{id: 1, title:"Entrada 1"},
				{id: 2, title:"Entrada 2"},
				{id: 3, title:"Entrada 3"}
			]
        }
    })
</script>

We see several interesting features, the first thing we see is that we define an unordered list to show the array elements that we have defined as a property that simulates the content of 3 entries; in the v-for directive that is inside the li element we define a key that is optional to indicate the identifier of the element; it is something internal to Vue, the next thing we see is the basic rendering of the posts property that we treat as if it were an array; the output is the following:

With this directive we can iterate listings; that is, arrays:

    <div v-for="c in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

Or the more complete way, with the index and the element:

    <div v-for="(c, index) in array" v-bind:key="c.id">
      <h3>{{ c.name }} {{ index }}</h3>
    </div>

Or with the array and/or based on components:

    <hello-world v-for="c in [1, 2, 3, 4, 5]" v-bind:key="c.id" />
    <br />

With loops in a nutshell, we can loop either an HTML tag or a Vue component multiple times.

Here is the JavaScript block:

data() {
   return {
     array: [
       {
         id: "123",
         name: "andres",
       },
       {
         id: "1234",
         name: "juan",
       },
     ],
   };
 },

User events

With Vue we can control the user events, click, focus and others using the v-on directive followed by the event that we are going to register; for example for the click event:

<script src="vue.js"></script>
<div id="app">    
	<h1 :style="{color:'red', fontSize: fontSize+'px'}">{{message}}</h1>
	<button @click="increateFont">Increase</button>
	<button @click="decreateFont">Decrease</button>

</div>
</div>
<script>
    let vm = new Vue({

        el: '#app',
        data: {
			message: "hola",
			fontSize:12
        },
		methods:{
			increateFont(){
				this.fontSize++
			},
			decreateFont(){
				this.fontSize--
			}
		}

    })
</script>

Aliases for imports in Vue

▶

In Vue, to avoid having syntax like the following when loading separate components from different locations in your project:

import Base from "../../components/Base" 

Which is more complicated, depending on where we import; for example, if we are in more internal locations and we have to navigate to higher files; we have to continue with this navigation.

Instead of using this kind of syntax, we can use an alias, which points directly to the source (src) folder of our project; therefore, no matter where our elements are from, we always have a shortcut to our src folder; with this our imports are much more concise, legible and direct; for this, we have to use the @ sign:

import Base from "@/components/Base"

We see the use of components most clearly in the entry in which we create a CRUD-type app in Vue that consumes a Rest API.

Local and global styles to scoped Vue components

▶

In Vue, we can apply style rules globally, for the entire application or only apply to a single component.

Vue is a framework that was created for modular applications, it is the new scheme that is not so new, but that little by little is evolving under the same guidelines in which we require that everything be perfectly modular and integrable with other modules or submodules; in vue these modules are called components in which we have some mini applications that do a particular task; remember that, following the structure of an application in Vue, in a component, we have:

1. template
2. script
3. css

This is a component, as for the template and the script we know that it easily corresponds or lives in the same component, but the style when dealing with cascading style sheets, CSS things change a bit, since one of the characteristics that we have in this language, it is that it is global to the ENTIRE app, and in the end it does not matter how many you break down your app into components, which in the end will be ONE single application running in a browser; therefore the CSS that you put at the end of each component will spread to the rest when you run your app!

Suppose the following scheme; we have in our App.vue a template that loads two components:

En el App.vue:

<template>
  <mi-primer-componente/>
  <hello-world/>
</template>
<script>
import MiPrimerComponente from ',/components/MiPrimerComponente'
import HelloWorld from './components/HelloWorld'
export default {
  components: {
    MiPrimerComponente,
    HelloWorld
  },
}
</script>

Component 1: Hello World

It has an H1 to which I want to put a blue color

<template>
  <h1>C1<h1/>
</template>
<style scoped>
 h1 {
     color: blue
 }
</style>

Component 2: My First Component

It has an H1 to which I want to put a red color

<template>
  <h1>C2<h1/>
</template>
<style scoped>
h1 {
  color: red;
}
</style>

When you render your app, you have the following output:

Only one color will appear, which may be red or blue, but it is NOT what we specified, since we wanted a different color for the H1 for each component.

Defining the scope of styles

As we indicated, when you have components, it is likely that you do not want your styles to clash, for example you may have a list component in which you style a div to display an item, but this div element, you may use for the banner, footer, sidebar and if we don't do something, these styles will clash in a horrible way!

To indicate that we want each style to stay in its component, we have the scope attribute, which we define to the style sheets, therefore, for our components, if we want the style they define to be local to it and NOT extend as a "Cascade" to other sibling components, children or parents...:

<style scoped>
h1 {
  color: red;
}
</style>

You have to set scoped for each style that you want to be local to that component

With this, we have the expected result:

Raw or render HTML in Vue

▶

Many times we have HTML content in a property or function that we want to render directly in the template; if we do it the usual way with braces {{}} it won't get the desired result, we have to use the v-html directive instead and tell it the property or function.

    <!-- **RAW HTML -->
    <p>
      {{ rawhtml }}
    </p>
    <p v-html="rawhtml"></p>
    <!-- **RAW HTML FIN-->

And in the JavaScript

rawhtml: "<span style='color:red'>Hola texto rojo</span>",

You can check the repo for more information.

Vue devtools: Debug your apps

▶

The Vue devtools are fantastic tools that allow us to easily debug our applications in Vue; the reason for this is that when we create an app in Vue, based on components, everything ends up in a single file and if a part or component fails or we want to track it and we debug said application with the tools that already exist. we know:

As you can see, we don't see anything related to our app in components; to be able to debug properly and be able to see components and properties, we have to install the devtools that we have in most modern browsers like Firefox or Google Chrome; in the case of Google Chrome:

https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

With this, we have a new tab in our developer console.

As you can see, we now see the app as it actually is. This extension is ideal for following this guide.