What is Vue.js? What can you create? Explained!

What is Vue.js #

Vue.js is an open-source progressive JavaScript framework created by Chinese genius engineer Evan You, used to build user interfaces and single-page applications. It is a popular JavaScript framework with over 180,000 likes on GitHub since its release in 2014.

Benefits of using Vue.js #

The biggest advantage of Vue.js is that it is very easy to use components and select modules.

Component reuse is common in front-end development. And what you need to be careful about when using components and modules are dependencies. Each component or module has dependencies on the underlying layers, which can lead to bugs if the dependencies are not correct. So you need to understand which version should be used with what rules. This is a very time consuming task.

However, Vue.js has a core library that many people rely on for development. This means you don’t have to worry about dependencies when adding new components or modules.

Also, by using the Vue.js core library, there is no need to think about module selection at the initial development stage.

Comparison with other frameworks #

Besides Vue.js, there are other famous frameworks. Along with Vue.js, the following three are said to be the three major frameworks.

When compared, each has disadvantages and advantages, and which one to use must be scrutinized by each “group / individual”.

| Angular | React | Vue | | —————- | ——————————– - | ———————————————— ——- | —————————————— | | Developer | Facebook + Community | Community Driven | Google + Community | | Initial Release Year | 2010 | 2013 | 2014 | | Official site | angular.io | reactjs.org | vuejs.org | | Features | Full Stack | User Interface | User Interface | | Routing | Included | React Router | Vue Router | | Appropriate development scale | Large | Medium to large | Small to medium | Ecosystem | Many | Abundant | Few + Available in Japanese | | Cost of learning | High | Medium | Somewhat low to medium | | App size (KB) | 500 | 100 | 80 |

Three major framework comparison table

The common advantage of the three major frameworks is that the functions can be divided and used in units of components and modules.

Key Features of Vue.js #

Vue.js has the following key features:

• Virtual DOM Vue.js is implemented in a way called Virtual DOM. Using the virtual DOM can reduce rendering costs and provide faster processing. Also, since values ​​can be manipulated without retrieving the elements on the JavaScript side, the implementation can be written in an easy-to-understand manner.

• data binding Vue.js provides a feature called data binding. This is a feature that facilitates passing data from Vue.js to HTML and makes use of a binding directive called v-bind. Binding directives make it easy to manipulate HTML attributes, assign values, change styles, assign classes, and more. If you want to learn more about data binding, see Beginner’s introduction to Vue.js | Data binding.

• Components Vue.js allows you to use components that allow you to separate reusable elements. Using components facilitates the reuse of elements. If you want to learn more about components, see Beginner’s introduction to Vue.js | Components. event

• In Vue.js, handle events from HTML to Vue.js. Vue.js handles events from HTML to Vue.js. Use the v-on directive to trigger an event. If you want to learn more about events, see “Beginner’s introduction to Vue.js | Events”.

How to build environment for Vue.js #

There are three ways to build a Vue.js environment:

• How to use CLI created with Node.js. CLI tools allow you to start a project with a boilerplate (or base template). A Chrome extension from the Vue.js development team that lets you see how the component tree is rendered, how events are fired and recorded, how internal state is stored for each component, and the global state of components.
• How to use a CDN by including script tags in your HTML files. By including a script tag in your HTML file and using a CDN, you can write Vue.js code directly in your existing HTML file.
• How to download the Vue.js file and include it directly in your HTML file with a script tag. You can download the Vue.js file and include it directly in your HTML file with the script tag. CLI tools allow you to start a project with a boilerplate (or base template).

If you want to know more about setting up the environment, please refer to “Introduction to vue.js for beginners | Setting up the environment”.

Framework for Vue.js #

Vue.js is a JavaScript framework, but there are also frameworks that extend Vue.js. Vue.js is a web application development framework that is complete on its own, but Vue.js alone can be inconvenient. That’s where the Vue.js framework exists.

There are two Vue.js frameworks introduced here.

1. Nuxt.js Nuxt.js is a Vue.js framework that streamlines the development of Vue.js applications. Since the necessary configurations for Vue.js applications are prepared in advance, you can develop applications easier than creating with Vue.js alone. It also facilitates the creation of SSRs, SPAs, PWAs, static sites, etc. 2.Quasar Quasar provides a large number of renderings and application images for hybrid mobile and electron application development.

If you want to know more about these two, please refer to “Comparison of Vue.js framework Nuxt.js and Quasar”.

Overall review #

Vue.js makes it easy to create Single Page Applications (SPAs) that automatically update their views based on changes to the “data” object in your Vue.js instance. Also, by using frameworks such as Nuxt.js and Quasar, you can improve development efficiency and easily create various applications.