Introduction

Introduction

Welcome to the Vue JS 2 Tutorial! Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable — you can use it for a small widget on an existing page or scale it up to power an entire single-page application.

What Is Vue.js?

Vue.js is a front-end framework that makes building interactive, reactive user interfaces simple and enjoyable. Created by Evan You in 2014, it has grown into one of the most popular JavaScript frameworks alongside React and Angular.

Feature	Description
Reactive	When data changes, the view updates automatically
Component-Based	Build UIs from small, reusable components
Progressive	Start simple and adopt more features as needed
Lightweight	~20KB minified and gzipped
Easy to Learn	Gentle learning curve compared to React and Angular

Vue vs React vs Angular

Aspect	Vue	React	Angular
Type	Framework	Library	Full framework
Template	HTML-based templates	JSX	HTML with directives
Learning curve	Gentle	Moderate	Steep
Size	~20KB	~40KB	~140KB
Two-way binding	Built-in (v-model)	Manual	Built-in (ngModel)
State management	Vuex	Redux/Context	Services/RxJS

Getting Started

The simplest way to start is by including Vue via a CDN in an HTML file:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Your First Vue App

<div id="app">
    <h1>{{ title }}</h1>
    <p>{{ greeting }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: 'Hello Vue!',
            greeting: 'Welcome to the Vue JS 2 Tutorial'
        }
    });
</script>

The {{ }} syntax (called mustache or interpolation) outputs the value of a data property into the HTML. When the data changes, the HTML updates automatically.

What You Will Learn

• The Vue instance, data, methods, and computed properties
• Data binding, events, and form input handling
• Components, props, slots, and the event bus
• The Vue CLI and single-file components (.vue files)
• Routing with Vue Router
• HTTP requests and Firebase integration
• Custom directives, filters, and mixins

Prerequisites

• Solid understanding of HTML, CSS, and JavaScript
• Familiarity with ES6 features (arrow functions, template literals, destructuring)
• A code editor (VS Code recommended)
• A modern web browser

Key Takeaways

• Vue.js is a progressive, reactive JavaScript framework for building user interfaces
• It is lightweight, easy to learn, and incrementally adoptable
• You can start with a simple CDN script tag — no build tools required
• The double curly brace syntax {{ }} outputs data into the HTML template