Vue.js v3
What Is Vue.js?
Vue.js is a progressive framework for building user interfaces. The term progressive framework refers to a framework concept proposed by Evan You that can support web apps of any size or stage. Using Vue.js improves development efficiency and reduces repetitive descriptions. Compared with other frameworks, it also has fewer proprietary rules and offers a high degree of freedom.
Features and Benefits
This section explains several features and benefits of Vue.js.
Directive
Directives use Vue.js-specific attributes such as v-*, and they let you perform DOM operations through those attributes.
This reduces the amount of DOM manipulation code and improves development speed.
Two-Way Data Binding
Two-way data binding is a feature that watches JavaScript data and the View in both directions and keeps them synchronized. In other words, when the data changes, the View is updated, and when the View changes, the data is updated.
Component
Components divide the various features of an application by role. By turning parts into components, you can improve reusability and design consistency, and you can also develop and maintain applications more efficiently.
Extensibility
Vue.js is a highly extensible framework with a simple design. It can be combined with other libraries and scaled step by step, so it can be used for development at many different sizes.
SPA (Single Page Application)
Vue.js makes SPA development easy. An SPA is an application where content changes inside a single page without page transitions.
Learning Cost
Vue.js is designed simply, so its learning cost is lower than that of many other frameworks. Also, because it is popular as a framework, there is a lot of technical information available.
Directive
A directive means any attribute in an HTML tag that has the v- prefix.
Major Directives
| Directive name | Role |
|---|---|
v-if |
Shows or hides the corresponding HTML tag depending on whether the specified view data value is true or false. |
v-for |
Repeats the corresponding HTML tag for the number of items in the specified view data. |
v-show |
Like v-if, shows or hides the corresponding HTML tag depending on whether the data is true or false.However, v-if completely removes the tag, while v-show only applies the CSS effect display:none;, so the actual tag remains and is only hidden visually. |
v-bind |
Connects a basic HTML tag attribute with a Vue data property. |
v-on |
Used to detect and handle events on screen elements. For example, v-on:click can detect the click event of the tag and run a specific method. |
v-model |
An attribute mainly used in forms. It immediately synchronizes values entered in a form with data in the Vue instance. You can store values entered on the screen, send them to a server, or perform additional logic by using advanced properties such as watch.It can be used only with <input>, <select>, and <textarea> tags. |
created vs mounted
created
Called synchronously after the instance has been created. At this stage, the instance has finished processing options such as data handling, computed properties, methods, watchers, and event callbacks. However, mounting has not started, so the $el property is not yet available.
mounted
Called immediately after the instance has been mounted, where el has been replaced by the newly created vm.$el. If the root instance is mounted on an element in the document, vm.$el is also in the document when mounted is called.