Introduction

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries (opens new window).

If you’d like to learn more about Vue before diving in, watch a free video course on Vue Mastery.

Getting Started

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

The easiest way to try out Vue.js is using the Hello World example:

HTML:

<div id="hello-vue" class="demo"> {{ message }} </div>

JS:

const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue')

The Installation page provides more options of installing Vue. Note: it is not recommended that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools

Declarative Rendering

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

HTML:

<div id="counter"> Counter: {{ counter }} </div>

JS:

const Counter = { data() { return { counter: 0 } } } Vue.createApp(Counter).mount('#counter')

We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Take a look at the example below where counter property increments every second and you will see how rendered DOM changes:

JS:

const CounterApp = { data() { return { counter: 0 } }, mounted() { setInterval(() => { this.counter++ }, 1000) } }

Handling User Input

To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our instances:

HTML:

<div id="event-handling"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div>

JS:

const EventHandling = { data() { return { message: 'Hello Vue.js!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(EventHandling).mount('#event-handling')

Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.

Conditionals and Loops

It's easy to toggle the presence of an element, too:

HTML

<div id="conditional-rendering"> <span v-if="seen">Now you see me</span> </div>

JS:

const ConditionalRendering = { data() { return { seen: true } } } Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

Relation to Custom Elements

You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec. That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API and the is special attribute. However, there are a few key differences:

  1. The Web Components Spec has been finalized but is not natively implemented in every browser.
    • Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components.
    • In comparison, Vue components work consistently in all supported browsers (IE11 with compatibility build and above).
    • When needed, Vue components can also be wrapped inside a native custom element.
  2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.

Although Vue doesn't use custom elements internally, it has great interoperability when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.

Reference