What is Vue.js?

Vue.js is a JavaScript framework that enhances the process of creating modern user interfaces by providing simplicity and flexibility. Vue is being used from small-scale projects demanding simplicity to large-scale applications demanding scalability. In this Vue.js tutorial, we will explore the fundamental aspects of Vue.js along with its core concepts, the two distinct API styles it offers, and different bindings in Vue.

What is Vue?

Vue.js is a JavaScript framework for building user interfaces built using a combination of HTML, JavaScript, and CSS. Vue.js operates on the virtual DOM to efficiently update the actual DOM by only rendering the components that have changed. When the state of a Vue component changes, the framework automatically updates the view without reloading the entire page. This reactivity is achieved through a system that tracks dependencies and efficiently updates the components affected by state changes.

For vue js tutorial, you can get the framework through CDN or can be installed using package managers like npm or yarn. Vue CLI (Command Line Interface) provides a standardized tooling setup for Vue projects, offering features like bundling, and hot-reloading.

Features of Vue.js

• Component-based architecture, where UIs are broken down into reusable and modular components.
• Has custom HTML attributes known as directives, such as v-bind for binding data to attributes, and v-for for rendering lists.
• For building single-page applications (SPAs), Vue.js includes a router that enables seamless navigation between different views without page reloads.
• Vue's state management library, Vuex, provides centralized state management for larger applications. It ensures a predictable and manageable state flow, making it easier to handle complex application states.
• Vue DevTools is a browser extension that integrates with popular browsers to provide a set of debugging tools to inspect the component tree, track state changes, and debug efficiently.

Example

HTML File (index.html):

JavaScript File (app.js):

Vue Component File (App.vue):

Explanation

• The HTML file (index.html) sets up the basic structure, creating an empty div with the id "app" and linking the main JavaScript file (app.js).
• This JavaScript file is responsible for creating a Vue app using the createApp function, importing the main component (App.vue), and mounting the app to the specified element in the HTML.
• In the Vue component, the script section handles the component's logic, the template section defines its structure and appearance, the setup function configures reactive behavior, and the scoped styles isolates the component's styling.
• The component uses the ref function to create a reactive reference for the list of users. The list is then iterated in the template using a v-for directive to display each course dynamically.

Output The output of the above ceample in this vue js tutorial will show the list of users.

The Progressive Framework

Vue.js allows developers to adopt the framework incrementally according to their project requirements. The various use cases for using Vue are:

• Enhancing existing static HTML without the need for an extensive build process.
• Creating of Web Components that can be embedded seamlessly into any web page, providing a modular and reusable solution
• Vue is well-suited for building single page applications where the entire application loads on a single HTML page.
• Vue.js can be utilized for server-side rendering, enhancing performance and search engine optimization.
• Vue.js is compatible with the Jamstack architecture, making it suitable for static site generation. With tools like Nuxt.js, developers can pre-render pages during the build process, improving site performance and reducing server load.

Single-File Components

In this vue js tutorial, let's explore an example of Single-File Components in Vue.js by creating a dynamic user list.

Explanation

• The <script setup> is known as the script setup block, where we can declare variables, reactive properties, and component methods efficiently. We import the ref function from Vue and use it to create a reactive reference for the users array.
• The users ref holds an array of user objects, similar to the previous example. The reactivity provided by ref ensures that any modifications to the array are instantly reflected in the user interface.
• The v-for directive is used for rendering lists and iterating over data within a template. It is used to iterate over the users array to create a list item for each user.
• The template section contains the HTML structure of the component, displaying the user list.

API Styles

Following the vue js tutorial, Vue offers two distinct API styles for building applications:

• The Options API
• The Composition API.

Options API

The Options API is a simpler way of building components in Vue.js. In this style, components are defined using an options object. Each option corresponds to a specific aspect of the component, such as data, methods, lifecycle hooks, computed properties, and more.

Composition API

Introduced in Vue 3, the Composition API provides a more flexible and scalable way to organize component logic. It allows developers to organize code based on the feature rather than the option, making it easier to reuse and compose logic across components.

Example

Options API:

In this vue js tutorial example, the Options API is used to define the component. The data option initializes the message data property, and the methods option contains the updateMessage method, which updates the message when the button is clicked.

Composition API:

In the Options API example, the component defines a data property for the message and a methods property for the updateMessage method. In the Composition API example, the script setup syntax is used, and the ref function is used to create a reactive reference for the message. The logic for updating the message is encapsulated within the updateMessage function.

Output

The output of the above example in this vue js tutorial will change the value of text in click of the button.

Which to Choose?

The choice between the Options API and the Composition API in Vue.js depends on the specific requirements and complexity of your project. Following the vue js tutorial, we will discuss the various aspects to be considered before choosing:

Options API

• Choose the Options API for simpler components and when working on smaller projects with straightforward logic.
• Well-suited for developers accustomed to Vue 2 and those who prefer a more conventional approach to structuring components.

Composition API

• Consider composition API for larger projects with complex logic, as it allows for better organization and reusability of code.
• Ideal when structuring components based on features rather than options, promoting a more modular and scalable codebase.
• Offers improved TypeScript support, making it a preferred choice for projects utilizing TypeScript.

Differences

Vue.js Binding and its Types

In Vue.js, binding is the mechanism of connecting the data in the component's JavaScript logic with the HTML template, allowing for dynamic updates and interactions. Vue provides various binding types to accommodate different scenarios and requirements.

Interpolation

Interpolation is the most straightforward form of binding and is achieved using double curly braces {{ }}. It dynamically inserts the value of a JavaScript expression into the HTML template.

Example:

The value of the message variable in the component's data will be dynamically inserted into the paragraph element.

Attribute Binding

Attribute binding involves binding HTML attributes to Vue data properties. It is achieved using the v-bind directive or the shorthand :.

Example:

The href attribute of the anchor tag is bound to the value of the url variable in the component.

Class Binding

Class binding dynamically applies CSS classes to an element based on the evaluation of an expression. It uses the v-bind:class directive or the shorthand :class.

Example:

The classes active and text-danger will be applied based on the boolean values of isActive and hasError.

Style Binding

Style binding allows dynamic application of inline styles to elements. It uses the v-bind:style directive or the shorthand :style.

Example:

The text color and font size will be dynamically determined by the values of textColor and fontSize variables.

Event Binding

Event binding enables the execution of methods or expressions when a specific event occurs. It uses the v-on directive or the shorthand @.

Example:

The handleClick method in the component will be called when the button is clicked.

Two-Way Binding (v-model)

Two-way binding combines property binding and event binding, allowing the synchronization of data between the template and the component logic. It is commonly used with form elements.

Example:

The changes to the input field will update the username variable in the component, and vice versa.