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 JSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simply create an
index.html
file and include Vue with:
|
The Installation page provides more options of installing Vue. Note that we do not recommend beginners to 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:
|
|
Hello Vue!
We have already created our very first Vue app! This looks pretty similar to just 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? Just open your browser’s JavaScript console (right now, on this page) and set
app.message
to a different value. You should see the rendered example above update accordingly.
In addition to text interpolation, we can also bind element attributes like this:
|
|
Hover your mouse over me for a few seconds to see my dynamically bound title!
Here we are encountering something new. The
v-bind
attribute you are seeing is called a directive. Directives are prefixed with v-
to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying “keep this element’s title
attribute up-to-date with the message
property on the Vue instance.”
If you open up your JavaScript console again and enter
app2.message = 'some new message'
, you’ll once again see that the bound HTML - in this case the title
attribute - has been updated.Conditionals and Loops
It’s quite simple to toggle the presence of an element, too:
|
|
Now you see me
Go ahead and enter
app3.seen = false
in the console. You should see the message disappear.
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.
There are quite a few other directives, each with its own special functionality. For example, the
v-for
directive can be used for displaying a list of items using the data from an Array:
|
|
- Learn JavaScript
- Learn Vue
- Build something awesome
In the console, enter
app4.todos.push({ text: 'New item' })
. You should see a new item appended to the list.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 Vue instances:
|
|
Hello Vue.js!
Note in the method we simply 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.
Vue also provides the
v-model
directive that makes two-way binding between form input and app state a breeze:
|
|
Comments
Post a Comment