Vue JS: Simple Tutorial For Learners | Coding Like a Pro
Vue JS: Simple Tutorial For Learners

Vue JS: Simple Tutorial For Learners

Introduction

You are welcome to this lesson! Of course, you may have come across Vue.js. or heard about it before coming here. It’s all over the internet. So, yes, as one who is serious with programming, you should know it.

According to Vue JS themselves, the tool is a template used to create user-interfaces. You can build it from scratch to finish since it can adapt gradually. This is different from other inflexible templates.

Vue’s main library just considers the visibility frame. You can easily collect as well as integrate it together with subsisting Apps.

More so, Vue has the capacity to power advanced one-view Apps when you intend to use it together with the latest helping, tooling software.

There are lots of resources on the internet about how Vue rates among other tools. You can look them up online. Of course, you must be a topnotch front-end programmer prior to proceeding with that assignment.

Subtopics We’ll Consider in this Lesson

We’ll cover the following points here:

  • What Vue. JS is all about
  • Why most developers prefer the tool
  • Importance of the tool
  • How to install it (here we’ll include practical examples)
  • Challengers of VueJs
  • Wrap up

What does Vue JS mean?

Before we proceed to attempt this question, we will have to return to the explanation we quoted above here. Let’s break it down so you can understand much better what the tool really is.

It’s actually an open-source framework that developers use to create interfaces, single-page Apps, etc. The tool uses a very neat and easy-to-follow functional guide so you don’t have any issue using it. You can employ directives, components, including properties, methods, etc for it.

What do all this mean? You ask…

Well, it’s simple. The tool has a light library that carries more difficulty CMS environment such as WordPress etc for your frontend development.

Now, say you have prior understanding of Javascript, this explanation should be very clear to you.

But, then, to add, you cannot use Vue JS for backend App development. There are lots of other great tools for this purpose like PHP, WordPress, etc.

Why Vue JS?

Having considered what the tool is all about we can go further to discuss its importance to us as developers. These merits should convince you to choose it for your site building.

Of course, we cannot exhaust all the many advantages of the tool here. But, certainly you will find these very helpful:  

Vue.js completely lightweight: It’s built with javascript. Its library mini edition weighs 84kb. With this, the framework is lightweight, higher in speed and freer when compared to that of other tools like Angular, ReactJS, and others.

Its curve is very easy to learn: as a developer, you wouldn’t have any problems using the tool since it has a very simple curve that’s quite understandable even to a beginner.

It’s clean and free of complications: If you one of those developers who use Angular and JAVASCRIPT for your coding, you will find this tool very clean and devoid of any complications that may give users problems.

It’s easy to blend

VueJS is very simple to embed. You can embed it on your App using this script line or npm command:

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

$npm install vue

Yes. We have touched a little deeper the importance of VueJS to coding. But, there are still some major points left. In fact, these key points are, perhaps, what makes VueJS stand out for a lot of developers.

Please, do yourself the good of paying rapt attention to this next part of the tutorial.

VueJS enables effective Content and POWER

With VueJS, coders have the capacity to change DOM and meaning. For you to understand this better, we will have to consider some examples.

Ever used jquery or javascript for your coding before now, you would know the outdated style of collecting DOM elements through getElementByxxx of Javascript or those of Jquery.

It requires developers to implement it properly. That was when we would acquire data through running loops.

There’s certainly a reason a lot of developers call this method “old.” So, do away with the method. It’s no longer fashionable.

An ordinary programmer can code those without much stress using internal directives.

Below are some specific samples you can learn from for better comprehension of the topic.

Hands-On VueJS:

To reiterate the earlier stated point, VueJS gives developers the capacity or power to change or use DOM elements for whatever purpose they desire. Not just DOM, you can equally manipulate HTML markups for you.

If you are a developer that uses Angular, you will have this as your queue since it is exactly like Angular. There are inbuilt commands and processes that will help your coding or programming very easy and less stressful.

The basic essence of this tool is to let us build VueJS units that can perform different tasks and commands. And, of course, with the commands, you can manipulate the DOM for different tasks you want to perform with it.

More so, there are inbuilt Apps for the autorun methods such as PHP’s class __construct() which every developer can use.

Examples of VueJS framework

These examples will guide you further in learning VueJS framework.

Example 1: Using the v-for command to map an Array to List Elements

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' }
    ]
  }
})

The result we get:

  • Foo
  • Bar

That’s it. But, we can still explain it further for a better understanding of this task.

Here it is…

What we did was to adopt the v­_for command for a list of elements according to the array which can equally be objected properties.

On the other hand, the v­_for command performs its function with syntaxes like the elements in items whereas “items” is either the source data array or the object properties. While “item” represents an alternative name for the array items considered.

Example 2: the VueJS Components

There are actually elements of VueJs both simple and complex which we can use again on different parts of our tasks or projects.

And remember, whenever you wish to use the component again, you have to mention it.

See this clear example to understand better:

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' })

That’s it. A simple way to create VueJs component that can be reused.

Competitors of VueJs

No doubt, VueJs doesn’t exist without competitors. It has a handful of other similar tools which some developers also consider for use. You can make further research to get full details of these tools.

But, we can see some of them here:

The two we can readily mention here are Angular and ReactJs.

 Wrap up

This tutorial has only opened up a little learning on VueJS. But then, in other to make your knowledge of the topic strong, you need to research a little further.

Being a responsible programmer, this’s necessary for you to perfect your knowledge of this application to use it better.

Spread the love
1 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 5 (1 votes, average: 5.00 out of 5)
You need to be a registered member to rate this.
Loading...

Leave a Reply