Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.



<div id="app">
  <p>I have a {{ product }}</p>
  <p>{{ product + 's' }}</p>
  <p>{{ isWorking ? 'YES' : 'NO' }}</p>
  <p>{{ product.getSalePrice() }}</p>

See: Delimiters


<a v-bind:href="url">...</a>

Shorthand syntax

<a :href="url">...</a>

True or false will add or remove attribute

<button :disabled="isButtonDisabled">...

If isActive is truthy, the class ‘active’ will appear

<div :class="{ active: isActive }">...

Style color set to value of activeColor

<div :style="{ color: activeColor }">

See: v-bind


Element inserted/removed based on truthiness

<p v-if="inStock">{{ product }}</p>
<p v-else-if="onSale">...</p>
<p v-else>...</p>

Toggles the display: none CSS property

<p v-show="showProductDetails">...</p>

Two-way data binding

<input v-model="firstName" >
Method Description
v-model.lazy="..." Syncs input after change event
v-model.number="..." Always returns a number
v-model.trim="..." Strips whitespace

See: Directives


Calls addToCart method on component

<button v-on:click="addToCart">...

Shorthand syntax

<button @click="addToCart">...

Arguments can be passed

<button @click="addToCart(product)">...

To prevent default behavior (e.g. page reload)

<form @submit.prevent="addProduct">...

Only trigger once

<img @mouseover.once="showImage">...
Method Description
.stop Stop all event propagation
.self Only trigger if is element itself

Keyboard entry example

<input @keyup.enter="submit">

Call onCopy when control-c is pressed

<input @keyup.ctrl.c="onCopy">

See: Events

List rendering

<li v-for="item in items"
  {{ item }}

To access the position in the array

<li v-for="(item, index) in items">...

To iterate through objects

<li v-for="(value, key) in object">...

Using v-for with a component

<cart-product v-for="item in products"

See: List Rendering


Component anatomy

Vue.component('my-component', {
  components: {
    // Components that can be used in the template
  props: {
    // The parameters the component accepts
    message: String,
    product: Object,
    email: {
      type: String,
      required: true,
      default: "none"
      validator: function (value) {
        // Should return true if value is valid
  data: function() {
    // `data` must be a function
    return {
      firstName: 'Vue',
      lastName: 'Mastery'
  computed: {
    // Return cached values until dependencies change
    fullName: function () {
      return this.firstName + ' ' + this.lastName
  watch: {
    // Called when firstName changes value
    firstName: function (value, oldValue) { ... }
  methods: { ... },
  template: '<span>{{ message }}</span>',
  // Can also use backticks in `template` for multi-line

See: Components Basics

Lifecycle hooks

Method Description
beforeCreate After the instance has been initialized #
created After the instance is created #
beforeMount Before the first render #
mounted After the instance has been mounted #
beforeUpdate When data changes, before the DOM is patched #
updated After a data change #
beforeDestroy Before the instance is destroyed #
destroyed After a Vue instance has been destroyed #

See: Lifecycle Hooks

Custom events

Set listener on component, within its parent

<button-counter v-on:incrementBy="incWithVal">

Inside parent component

methods: {
  incWithVal: function (toAdd) { ... }

Inside button-counter template

    'incrementBy', // Custom event name
    5 // Data sent up to parent

Use props to pass data into child components, custom events to pass data to parent elements.

See: Custom Events

Single file components

Single file

  <p>{{ greeting }} World!</p>

module.exports = {
  data: function () {
    return {
      greeting: 'Hello'

<style scoped>
p {
  font-size: 2em;
  text-align: center;

See: Single File Components


  <div>This will be pre-compiled</div>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

See: What About Separation of Concerns?


Using a single slot

Component template

  <h2>I'm a title</h2>
    Only displayed if no slot content

Use of component with data for slot

  <p>This will go in the slot</p>

See: Slots

Multiple slots

Component template

<div class="container">
    <slot name="header"></slot>
    <slot>Default content</slot>
    <slot name="footer"></slot>

Use of component with data for slots

  <h1 slot="header">Page title</h1>
  <p>the main content.</p>
  <p slot="footer">Contact info</p>

See: Slots

Also see

0 Comments for this cheatsheet. Write yours!