Getting Started
Introduction
Vue.js is a library for building interactive web interfaces.
Technically, Vue.js is focused on the ViewModel layer of the MVVM pattern. It connects the View and the Model via two way data bindings. Actual DOM manipulations and output formatting are abstracted away into Directives and Filters.
Philosophically, the goal is to provide the benefits of MVVM data binding with an API that is as simple as possible. Modularity and composability are also important design considerations. It is not a full-blown framework - it is designed to be simple and flexible. You can use it alone for rapid prototyping, or mix and match with other libraries for a custom front-end stack. It’s also a natural fit for no-backend services such as Firebase.
Vue.js’ API is heavily influenced by AngularJS, KnockoutJS, Ractive.js and Rivets.js. Despite the similarities, I believe Vue.js offers a valuable alternative to these existing libraries by finding a sweetspot between simplicity and functionality.
Even if you are already familiar with some of these terms, it is recommended that you go through the following concepts overview because your notion of these terms might be different from what they mean in the Vue.js context.
Concepts Overview
ViewModel
An object that syncs the Model and the View. In Vue.js, ViewModels are instantiated with the Vue
constructor or its sub-classes:
1 | var vm = new Vue({ /* options */ }) |
This is the primary object that you will be interacting with as a developer when using Vue.js. For more details see Class: Vue.
View
The actual HTML/DOM that the user sees.
1 | vm.$el // The View |
When using Vue.js, you rarely have to touch the DOM yourself except in custom directives (explained later). View updates will be automatically triggered when the data changes. These view updates are highly granular with the precision down to a textNode. They are also batched and executed asynchronously for greater performance.
Model
A slightly modified plain JavaScript object.
1 | vm.$data // The Model |
In Vue.js, models are simply plain JavaScript objects, or data objects. You can manipulate their properties and ViewModels that are observing them will be notified of the changes. Vue.js converts the properties on data objects into ES5 getter/setters, which allows direct manipulation without the need for dirty checking.
The data objects are mutated in place, so modifying it by reference has the same effects as modifying vm.$data
. This also makes it easy for multiple ViewModel instances to observe the same piece of data.
For technical details see Instantiation Options: data.
Directives
Prefixed HTML attributes that tell Vue.js to do something about a DOM element.
1 | <div v-text="message"></div> |
Here the div element has a v-text
directive with the value message
. What it does is telling Vue.js to keep the div’s textContent in sync with the ViewModel’s message
property.
Directives can encapsulate arbitrary DOM manipulations. For example v-attr
manipulates an element’s attributes, v-repeat
clones an element based on an Array, v-on
attaches event listeners… we will cover them later.
Mustache Bindings
You can also use mustache-style bindings, both in text and in attributes. They are translated into v-text
and v-attr
directives under the hood. For example:
1 | <div id="person-{{id}}">Hello {{name}}!</div> |
Although it is convenient, there are a few things you need to be aware of:
The src
attribute on an <image>
element makes an HTTP requests when a value is set, so when the template is first parsed it will result in a 404. In this case v-attr
is preferred.
Internet Explorer will remove invalid inline style
attributes when parsing HTML, so always use v-style
when binding inline CSS if you want to support IE.
You can use triple mustaches {{{ like this }}} for unescaped HTML, which translates to v-html
internally. However, this can open up windows for potential XSS attacks, therefore it is suggested that you only use triple mustaches when you are absolutely sure about the security of the data source, or pipe it through a custom filter that sanitizes untrusted HTML.
Filters
Functions that are used to process the raw values before updating the View. They are denoted by a “pipe” inside directives or bindings:
1 | <div>{{message | capitalize}}</div> |
Now before the div’s textContent is updated, the message
value will first be passed through the capitalize
function. For more details see Filters in Depth.
Components
In Vue.js, a component is simply a ViewModel constructor registered with an ID using Vue.component(ID, constructor)
. By having an associated ID, they can be nested in other ViewModels’ templates with the v-component
directive. This simple mechanism enables declarative reuse and composition of ViewModels in a fashion similar to Web Components, without the need for latest browsers or heavy polyfills. By breaking an application into smaller components, the result is a highly decoupled and maintainable codebase. For more details, see Composing ViewModels.
A Quick Example
1 | <div id="demo"> |
1 | var demo = new Vue({ |
Result
{{title | uppercase}}
- {{content}}
Also available on jsfiddle.
You can click on a todo to toggle it, or you can open your Browser’s console and play with the demo
object - for example, change demo.title
, push a new object into demo.todos
, or toggle a todo’s done
state.
You probably have a few questions in mind now - don’t worry, we’ll cover them soon. Next up: Directives in Depth.