German IT Academy

Updates, Tutorials and Previews for our Premium Courses

You are a developer? Contribute!

What is Vue.js?

Vue.js is an open-source JavaScript framework used for building a user interface web application and was created by Evan You. Its initial release was in 2014. VueJS focuses on the declarative rendering and composition of components.

What is a Vue component?

Components are one of the most useful and powerful features of Vue.js. They are reusable Vue instances that create custom elements and help to extend basic HTML elements. For a better understanding of how components work with VueJS we will look at the following example:

<html>
   <head>
      <title>VueJs</title>
 
   </head>
   <body>
      <div id = "component1">
         <hey></hey>
      </div>
   
   </body>
</html>
Vue.component('hey',{
   template : '<div><h1> This is a component </h1></div>'
});
var vj = new Vue({
   el: '#component1'
});

Here in the HTML section, we have created a div with id component1 and in the JS section, a Vue instance is created with that id using the new keyword. Then we have created a component to use with that instance. The syntax used to create a component is as follows:

Vue.component('component name',{ // options}); 

So we have a component hey which becomes the custom element and can be used with the Vue instance created. Now inside the div with id component1, we can use the name of our component as an element. We can also make multiple instances that will share this same component that we have made. Below is the output of the code:

You can try it yourself without any installation: https://jsfiddle.net/AndreyBulezyuk/tnuLmy04/

For a deep understanding of VueJS Components get our VueJS Certificate Junior.

The File structure of Vue.js

Now that we know what components are and how they work in VueJS, we will learn about the file structure. VueJS has a very simple file structure with files like App.vue which is a single file component having HTML, CSS, and JavaScript. We have to import all the components which we want to use in this file as it serves as the main top-level component that is a framework for the entire application. For this purpose, we use the import keyword and specify the name of the component made with its location. Another file that is in the VueJS structure is main.js. This is the main file that imports the Vue library and the app component from App.vue. Vue instance is created in this file which is assigned to the DOM element identified by the selector which is defined in index.html file.

VueJS performance is fast as it is very lightweight. VueJS makes the use of virtual DOM which means a replica of DOM is created rather than making changes in the original one. Built-in directives like v-if, v-else, v-show, v-bind, and v-model are used to perform various actions. VueJS with its template-based approach is very easy for a beginner to understand. With all its functionalities VueJS has a great scope in the future.

Introduction to Ruby on Rails

Learn why Ruby on Rails can help speed up the development process. and why so many big companies rely on Ruby on Rails to run their business.

Serve Keras Model with Flask REST API

This tutorial will briefly discuss the benefits of serving a trained Machine Learning Model with an API. Then we will take a look at a precise example using a Keras Model and Python Flask to serve the model. You'll learn how to Serve Keras Model with Flask REST API....

How to create a WordPress Plugin

Introduction What is WordPress? A technical definition is "WordPress is an open source content management system (CRM) built in PHP". Currently WordPress is the most popular CRM available for free! If you've ever used WordPress, you definitely know about themes &...

Getting started with PHP 7 in 2020

What is PHP? PHP stands for Hypertext Preprocessor (earlier called "Personal home page"). It is an open source scripting language created for the web development. PHP is a server-side language which means all the code is rendered on server and only static HTML, CSS...

Complete Vue.js 3 Guide

This is the first and most comprehensive Guide to Vue.js 3. We give an overview of the Changes, an introduction in usage of VueJS3 with Example Codes.

IT Career Path Nobody Is Discussing

Whatever path you decide on, we will help you find out the ideal things to do to take. Your career path contains the jobs you should hit your final career objective. While the career path will appear different for everybody, aiming to acquire equal parts experience in...

Awesome Future of Frontend in 2020

Before we dive in to Future of Frontend in 2020. Let's begin with some basics as we gradually get more forward-looking. We obviously cannot know what technology will dominate in 2020 and what framework will pop up. But we can try at least. What is frontend? Frontend...

How to Run Moodle with Docker Compose

How to run moodle with docker and docker-compose. Tutorial how use moodle in a docker container with docker-compose and Dockerfile.

Node.JS Tutorial: REST API & CRUD Operations

The following Tutorial will guide you through creating a simple REST API and CRUD Operations. Our Stack is ExpressJS, Mongoose and MongoDB. This API will perform CRUD Operations on Data stored in MongoDB. It's best to start from scratch and try creating this app by...

VueJS Tutorial – #6 Template Syntax

Before we start with another VueJS Tutorial, let me promote our VueJS Course with a Certificate right at the beginning. You'll see more interactive and deeper Content about VueJS. At the end you'll also receive a VueJS Certificate from German IT Academy. That's it....