Short Intro to Vue.js

Vue.js GitHub Repo

Vue.js Documentation

Vue.js is getting popular.

npm trends

Vue (pronounced /vjuː/, like view)

Vue.js is the Progressive JavaScript Framework, according to their website :)

Vue.js was created by Evan You. He worked at Google with the AngularJS project. He extracts the part he really liked in AngularJS and builds something very lightweight. Vue.js was released in February 2014.

Core features

• Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state. This templating syntax combines familiar HTML with special directives and features.
• Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.
• Vue is designed to be flexible and incrementally adoptable. You can extend its functionality with official and third-party packages, such as Vue Router or Vuex.
• Vue is an independent project in the open source community

Single-File Components

A Vue SFC, as the name suggests, encapsulates the component’s logic (JavaScript), template (HTML), and styles (CSS) in a single file.

API Styles

Vue components can be authored in two different API styles: Options API and Composition API.

Options API

With Options API, we define a component’s logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:

Composition API

With Composition API, we define a component’s logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.

Template Syntax

Text Interpolation

The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

The mustache tag will be replaced with the value of the message property from the corresponding component instance. It will also be updated whenever the message property changes.

Directives

Directives are prefixed with v- to indicate that they are special attributes provided by Vue. They apply special reactive behavior to the rendered DOM.

v-if

Here, the v-if directive would remove / insert the <p> element based on the truthiness of the value of the expression seen.

v-on

The v-on directive listens to DOM events

Get started

Vue.js Playground

With Build Tools:

A build setup allows us to use Vue Single-File Components (SFCs). The official Vue build setup is based on Vite, a frontend build tool that is modern, lightweight and extremely fast.

To create a build-tool-enabled Vue project on your machine, run the following command in your command line:

This command will execute create-vue, the official Vue project scaffolding tool.

Coding with Vue.js is super fast and easy-to-learn!