Vue JS Tutorial For Beginners : 101

Getting Started With Vue.JS

Welcome to my Vue JS Tutorial For Beginners, if you’re here I’m guessing you heard about this little thing called Vue.Js. No matter where you look you’ve probably noticed this rising star.
Let’s start with a short quote from the official Vue.Js documentation on “What Is Vue.Js?”

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.
The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.


In my vue js tutorial for beginners we will cover the following topics:

  • What Is VueJs?
  • Why Should I Consider Developing With Vue JS?
  • What Can We Do With?
  • Installation & Simple Examples
  • VueJs “Competitors”
  • Final Thoughts

Let’s Get started with our Vue JS Tutorial For Beginners

To answer our first question regarding What Is VueJs? we will first breakdown and understand the quote from the documentation.
It is a lightweight framework, used to build front-end applications, views, user interfaces and more. It’s kinda hard to mess up Vue’s clean syntax and code structure. We use components, directives, methods, mounted-methods, properties and more.
So what does this tell us? what do they mean?
VueJs lets us integrate its lightweight framework and use it even in complex cms environments (like WordPress and more)  for front-end development. I’m assuming if you’re reading this tutorial then you have previous knowledge and a decent understanding of Javascript. So by now, this needs to feel a bit familiar.
JUST A NOTICE: You cant do back-end development with VueJs, just saying 🙂 For BackEnd We can use various technologies, including PHP and WordPress as backend infrastructure for a Vue App.

Why Should I Consider Developing With Vue JS?

I’m going to go ahead and list a few advantages in using VueJs for web development, who knows maybe I will “convert” a few of you to VueJs followers 🙂
VueJS is super-lightweight, it’s javascript based. The minified version of this framework weights about 84Kb. This allows for a fast, light and less bulky framework. (compared to its competitors like ReactJS, Angular, etc).
VueJs has a relativity fast and easy learning curve. This allows for fast understanding and implementation of this framework by developers.
Its clean, farther more it’s understandable quite easily, especially for people who wrote code In: Angular  and  JAVASCRIPT.

Simple Integration

You can integrate VueJs onto your application with the following script line/npm command:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
$npm install vue
The next segments of our article are a few of the biggest reasons I love VueJs, So pay a close attention to the following section in our Vue JS Tutorial For Beginners:

Flexibility, Dynamic Content, POWER

Vue Provides the developers a huge power over the manipulation of the DOM, meaning, Let’s take a few examples.
If you write code in javascript or jquery You are probably familiar with the “old school” method of fetching DOM elements by using Javascript’s getElementByxxx or one of Jquery’s dom methods.
You need to chain it all the way to the desired element. Or Think about the situation when you need to get data by running loops.
I’ve called those methods old school and you will soon understand why. In the meanwhile Say goodbye to those things because they are things of the past, a VueJS programmer can do all that with a lot less effort and code using built-in DIRECTIVES for instance.
Take a look at the following example as we break it down and I’m sure you will catch my drift.

Hands-On VueJS:

As I said before, VueJS provides us with powerful tools to allow us to manipulate DOM elements and HTML markups( Angular Programmers this is your queue, this is very similar to developing in Angular). It has built-in methods, directives and a lot more to make our life so much easier, simpler and the code cleaner.
The general idea is that we create Vue.components to handle various tasks and situations in our app. We use Vue Directives to easily manipulated and work with the DOM.
Furthermore, we have built-in tools for autorun methods( like in php’s class __construct() for yall PHP devs out here) and more.
That’s just the tip of the iceberg.

Example 1: Mapping an Array to List Elements with the v-for directive

HTML :

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

VUEJS :

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

OUR RESULT PRINTED ON SCREEN:

  • Foo
  • Bar

There you have it, let us break it down so we can grasp this situation:
We use the v-for directive to render a list of items based on an array(can be an object properties too). The v-fordirective works with syntax in the form of item in items, where items is the source data array/object properties and item is an alias for the array element being iterated on.
By the way we can even build that html markup in our vue instance.

Example 2: Components

VueJs components are basically Vue instances(complex/simple) that we want to reuse on various locations across our project.
DONT FORGET, every time you want to reuse the instance you need to call it.
A simple example is a button with a counter:
VUE:

Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

HTML:

<div id="components-demo">
    <button-counter></button-counter>
</div>

Vue Instance Call:

new Vue({ el: '#components-demo' })

There you have it, boys and girls, We created a component for a reusable button, called the instance, and wallah! For a complete documentation please visit Vue’s Documentation here: Vue JS

Similar frameworks (competitors)

A quick word about similar frameworks. There are a few, you are welcome to browse and google them for more info, some of them are:
Angular, ReactJs.

Final thoughts Vue JS Tutorial For Beginners

What we covered in this guide is just a small tip of the iceberg. In order to fully master it, you need to keep on reading and learning. In the following Vue.JS guides we will drill down into core subjects.

Vue JS Tutorial For Beginners

Leave a Reply

Your email address will not be published. Required fields are marked *