Vue.js cheatsheet

<button v-on:click="method">Click me!</button>
<button @click="method">Click me!</button>

<p v-bind:style="{ property: value }">...</p>

<p v-if="show">This element is shown/hidden in DOM</p>
<p v-else-if="show2">v-else-if is available in Vue 2.1+</p>
<p v-else>...</p>

<p v-show="false">This element is in DOM, but hidden with CSS</p>

<ul>
  <li v-for="item in collection">{{ item }}</li>
</ul>

<template v-for="item in collections">
  <h2>item.title</h2>
  <p>item.text</p>
  <hr/>
</template>

<ul><li v-for="(value, key) in obj">...</li></ul>
<ul><li v-for="(value, key, index) in obj">...</li></ul>
<ul><li v-for="i in 10">{{ i }}</li></ul>  => 123456789

<script>
/* global registration of a component */
Vue.component("hello", {
  template: '<h1>Hello</h1>'
  /* data must be a function returning a fresh object! */
  data: function () {
    return {
      ...
    };
  }
});
</script>
<div id="app">
  <hello></hello>
  <hello></hello>
</div>

/* component description */
var comp = {
  template: ...,
  data: function () { return { ... }; },
  ...
};

new Vue({
  el: '#app',
  /* Local registration of a component */
  components: {
    'my-comp': comp
  }
});

new Vue({
  el: '#app',
  beforeCreate: function () {
    ...;
  },
  created: function () {
    ...;
  }
  ...
})

$ npm install -g vue-cli

$ vue init webpack-simple my-project
$ npm run dev

<template>
  <div class="container">
    <app-quote>
      <h2>The Quote</h2>
      <p>A wonderful quote</p>
    </app-quote>
  </div>
</template>

<script>
import appQuote from './components/appQuote.vue';
export default {
  components: { appQuote }
}
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {}
</script>

<script>
import appQuote  from './components/Quote.vue';
import appAuthor from './components/Author.vue';
import appNew    from './components/New.vue';

export default {
  components: { appQuote, appAuthor, appNew },
  data: { selectedComponent: 'appQoute' }
}
</script>

<template>
  <div class="container">
    <button @click="selectedComponent = 'appQuote'">Quote</button>
    <button @click="selectedComponent = 'appAuthor'">Author</button>
    <button @click="selectedComponent = 'appNew">New</button>
    <hr>
    <component :is="selectedComponent"></component>
  </div>
</template>

<keep-alive>
  <component :is="selector"></component>
</keep-alive>

export default {
  ...,
  destroyed:   function() { ...; },
  deactivated: function() { ...; }, 
  activated:   function() { ...; }
}

<input type="password" v-model.lazy="passwd"></input>

<input type="radio" v-model="choice"></input>
<input type="radio" v-model="choice"></input>
<input type="radio" v-model="choice"></input>

<select id="priority" class="form-control" v-model="selectedPriority">
  <!-- default value is 'Medium': -->
  <option v-for="priority in priorities"
    :selected="priority = 'Medium'">
    {{ priority }}
  </option>
</select>

export default {
  props: ['value'],
  methods: {
    switched(isOn) {
      this.$emit('input', isOn);
    }
  }
}

<template>
  ...
  <app-component v-model="isOn"></app-component>
  ...
</template>

Some existing directives:
<p v-text="'some text'"></p>
<p v-text="'<strong>text</strong>'"></p>

A custom directive example:
<p v-hightlight="'green'">A custom directive</p>

Vue.directive('hightlight', {
  bind(el, binding, vnode) {
    el.style.backgroundColor = binding.value;
  },
});

<div v-directive:arg="value"></div>
e.g.
<div v-highlight:background="green"></div>

Vue.directive('hightlight', {
  bind(el, binding, vnode) {
    if (binding.arg == 'background') {
      ...
    }
  },
  ...
}

<div v-highlight.delayed="green"></div>

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    if (binding.modifiers['delayed']) {
      ...
    }
  },
  ...
}

export default {
  directives: {
    'local-highlight': {
      bind(el, binding, vnode) {
        ...
      },
      ...
    }
  }
}

export default {
  data() {
    return {
      text: "Hello there",
      fruits: ["Apple", "Banana", "Cherry"],
    }
  },
  filters: {
    toLowercase(value) {
      return transformed(value);
    }
  },
  computed: {
    /* computed are sometimes better than filters: */
    filteredFruits: function() {
      return this.fruits.filter((element) => {
        return element.match(this.filterText);
      });
    }
  }
}

<p>{{ text | toLowercase }}</p>

export const fruitMixin = {
  data() {
    return {
      fruits: ["Apple", "Banana", "Cherry"],
      filterText: ""
    };
  },
  computed: {
    filteredFruits() {
      return this.fruits.filter((elem) => elem.match(this.filterText));
    }
  }
};

import { fruitMixin } from './fruitMixin';

export default {
  mixins: [fruitMixin]
  data: function () {
    /* mixins are merged with this: */
    return { .. };
  }
}

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Animations</h1>
        <hr>
        <button class="btn btn-primary" @click="show = !show">Show Alert</button>
        <br/>
        <!-- must contain a single element: -->
        <transition name="animation-name">
          <div class="alert alert-info" v-if="show">This is some info</div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
}
</script>

<style>
.animation-name-enter {
  opacity: 0;
}
.animation-name-enter-active {
  transition: opacity 1s;
}
.animation-name-leave {
  /* opacity: 1; */
}
.animation-name-leave-active {
  transition: opacity 1s;
  opacity: 0;
}
</style>

.slide-enter {
  /* transform: translateY(20px); */
}
.slide-enter-active {
  animation: slide-in 1s ease-out forwards;
}
.slide-leave {
}
.slide-leave-active {
  animation: slide-out 1s ease-out forwards;
}

@keyframes slide-in {
  from: { transform: translateY(20px); }
  to:   { transform: translateY(0); }
}
@keyframes slide-out {
  from: { transform: translateY(0); }
  to:   { transform: translateY(20px); }
}