6.S063 Design for the Web: Languages and User Interfaces

Vue Cheatsheet

Vue is a library that uses reactive templates to render an application's data into html so a user can see it. The data is represented as objects in Javascript; you can read about Javascript's object model and syntax here. Each vue "app" is associated with a particular Javascript object. Any time that object changes, the template is automatically used to (re)render the new data. For this document we'll consider a vue app associated with the following data:

{
	first_name: "John",
	last_name: "Smith",
	age: 25,
	pets: {
		cats: 4,
		dogs: 2,
		ducks: 3
	},
	children: [
		{
			first_name: "Jason",
			age: 7
		},
		{
			first_name: "Ajax",
			age: 12
		}
	]
}

Template syntax

{{ foo }} to print out reactive expressions in text, :attrname="foo" to set the value of attributes.

The expressions can be arbitrary Javascript, and can refer to the properties that are part of the associated data model. So {{ pets.cats + pets.dogs + pets.ducks }} will render the number 9, and will change if any of the pets fields changes value. You have to write pet.cats, not just cats, since the scope of the vue application is the root of its object.

• Introductory slide
• Official Vue documentation

v-model

Associate data with a form element (or custom element that supports it) and keep them in sync.

So <input type="number" v-model="pets.ducks"/> will define an input field where changing the number will change the value of the ducks property in the pets object.

• Introductory slide
• Official Vue documentation
• Official Vue reference

v-for

Display a list of data by repeating a template.

<span v-for="(child, i) in children">
	 {{ child.first_name }} ({{ child.age }})
</span>

will render

<span>Jason (7)></span>
<span>Ajax (12)</span>

The names for current item (child above), current index (i above) are essentially local variables and up to you. Note that in this example v-for="child of children" would also have worked: In v-for in and of are interchangeable, and if you don't need to refer to the item’s index, you don't need the (child, i) syntax.

• Introductory slide
• Official Vue documentation
• Official Vue reference

v-if (and v-else)

Remove an element from the DOM when a condition is false

• Introductory slide
• Official Vue documentation
• Official Vue reference

v-show

Hide an element (without removing it from the DOM) when a condition is false

• Official Vue documentation

Actions (@eventname / v-on:eventname)

Change data when something happens. You can either call a function (e.g. @click="addItem()") or write the action right in the attribute value (e.g. @click="list.push({})").

You can also use modifiers, e.g. for doing things when the Enter key is presed you can do @keyup.enter="doSomething()".

• Introductory slide
• Official Vue documentation
• Useful events:
  • click
  • input A form input changed (e.g. will fire multiple times while you drag a slider)
  • change A form input has finished changing (e.g. will fire when you release the mouse pointer and finish dragging a slider)
  • keyup A keyboard key was released
  • keydown A keyboard key is held down
  • pointerenter The mouse pointer is over the element
  • pointerleave The mouse pointer has left the element
  • focus The element got focus
  • blur The element lost focus
  • submit A form is being submitted. Primarily useful with the modifier .prevent to prevent the default action (e.g. @submit.prevent="doSomething()), otherwise the form submission will go through and the browser will navigate to another page!
• Exhaustive list of all events

Computed properties

A way to give a reactive expression a name so you can re-use it.

• Introductory slide
• Official Vue documentation

Methods

Custom functions that you can then call in expressions. These can calculate things, like computed properties, but they can also modify data, unlike computed properties.

• Introductory slide
• Official Vue documentation