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.
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
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) }
}
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:
-
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.
-
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.
The information used for this documentation can be found on
official Vue.js page