What is Vue.js?

Want to become an expert in Python 3 and Django 3?

Don’t Miss the #TwitterFiles!

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.

Andrey Bulezyuk

Andrey Bulezyuk is a Lead AI Engineer and Author of best-selling books such as "Algorithmic Trading", "Django 3 for Beginners", "#TwitterFiles". Andrey Bulezyuk is giving speeches on, he is coaching Dev-Teams across Europe on topics like Frontend, Backend, Cloud and AI Development.

Protocol Wars

Understanding the Key Players: Ethernet, Wi-Fi, Bluetooth, and Zigbee The Invisible Battles: How Data Streams Clash in the Airwaves Adapting to an Evolving Tech Landscape: New Contenders and Challenges User Empowerment: How Our Choices Determine the Winning Protocol...

Google Earth 3D Models Now Available as Open Standard (GlTF)

Unleashing the Power of 3D: A Comprehensive Guide to Google Earth's GlTF Models From Virtual to Reality: How to Utilize Google Earth's GlTF Models for Your Projects Breaking Down the Barriers: The Impact of Open Access to Google Earth's 3D Models on the IT Industry...

When you lose the ability to write, you also lose some of your ability to think

Reviving the Creative Process: How to Overcome Writer's Block in IT Staying Sharp: Techniques for Keeping Your Mind Active in the Tech World From Pen to Keyboard: Transitioning Your Writing Skills to the Digital Age Collaboration and Communication: The Importance of...

Reverse engineering Dell iDRAC to get rid of GPU throttling

Understanding Dell iDRAC: An Overview of Integrated Remote Access Controller Breaking Down the Barriers: How to Disable iDRAC GPU Throttling for Maximum Performance Optimizing Your Dell Server: Tips and Tricks for GPU Throttle-Free Operation Maintaining Stability and...

0 Kommentare