Menu
×
Get Certified Upgrade Teachers Spaces Bootcamps Get Certified Upgrade Teachers Spaces Bootcamps
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT SWIFT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SWIFT SASS VUE GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING HTML & CSS BASH RUST TOOLS

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Cert

Vue Certificate

Vue Reference

Vue Built-in Attributes
Vue Built-in Attributes Vue 'is' Attribute Vue 'key' Attribute Vue 'ref' Attribute
Vue Built-in Components
Vue Built-in Components <KeepAlive> <Teleport> <Transition> <TransitionGroup>
Vue Built-in Elements
Vue Built-in Elements <component> <slot> <template>
Vue Component Instance
Vue Component Instance $attrs $data $el $parent $props $refs $root $slots $emit() $forceUpdate() $nextTick() $watch()
Vue Directives
Vue Directives v-bind v-cloak v-for v-html v-if v-else-if v-else v-memo v-model v-on v-once v-pre v-show v-slot v-text
Vue Instance Options
Vue Instance Options data methods computed watch props emits expose
Vue Lifecycle Hooks
Vue Lifecycle Hooks beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted errorCaptured renderTracked renderTriggered activated deactivated serverPrefetch

Vue Examples

Vue Examples Vue Editor Vue Exercises Vue Quiz Vue Syllabus Vue Study Plan Vue Server

Vue Tutorial

❮ Home Next ❯

Learn Vue

Vue is a popular JavaScript framework.

Vue is easy to learn, and user interfaces built in Vue update automatically when data changes.

Learn Vue now ❯

Become Vue Certified

Get certified with our Vue exam, includes a professionally curated study kit to guide you from beginner to exam-ready.

$95

one-time Get Certified ❯
CERTIFICATE OF COMPLETION This certifies that Your Name has passed the W3Schools Vue Certification exam and is hereby declared a Certified Vue Developer The candidate has passed the exam at the Professional level. Verify at verify.w3schools.com Stale Refsnes for w3schools.com

This Tutorial

This tutorial is specially designed to help you learn Vue as quickly and efficiently as possible.

First, you will learn the basics of Vue: text interpolation, directives, and how to incorporate events and forms into your project.

Then you will learn everything else you need to know about Vue:

Computed properties, watchers, methods, setup for Single-File Components (SFCs, *.vue files), and more.

Try it Yourself Examples in Every Chapter

In every chapter, you can edit the examples online, and click on a button to view the result.

Example

<h1>"Hello, World!" Example</h1>

<div id="app">{{ message }}</div>
Try it Yourself ยป

What You Should Already Know

Before you study Vue, you should have a basic understanding of:

Vue History

Evan You, a Google employee using AngularJS, started to develop Vue in 2013.

Vue version 1.0 was released in 2015.

Vue Exercises

Test Yourself With Exercises

Exercise:

What is the name of the programming language missing here?

Vue is a popular  framework.

Start the Exercise

Vue Quiz ?

Learn by taking a quiz! The quiz will give you a signal of how much you know about Vue.

Start Vue Quiz

Track Your Progress

Create a W3Schools account and get access to more features and learning materials:

  • CheckmarkView your completed tutorials, exercises, and quizzes
  • CheckmarkKeep an eye on your progress and daily streaks
  • CheckmarkJoin the leaderboard and compete with others
  • CheckmarkGet your own avatar and unlock new skins
  • CheckmarkCreate your own personal website

Sign Up »

Note

This is an optional feature. You can study at W3Schools without creating an account.

Learn by Examples

Learn by examples! This tutorial supplements all explanations with clarifying examples.

See All Vue Examples


❮ Home
w3schools.com Next ❯
Vue Introduction
PLUS
SPACES
GET CERTIFIED
FOR TEACHERS
BOOTCAMPS
CONTACT US
×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
AngularJS Reference
jQuery Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples
Get Certified
 HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.