DEV Community

loading...
Cover image for Vue cheat sheet 2

Vue cheat sheet 2

adnanbabakan profile image Adnan Babakan (he/him) Updated on ・10 min read

Hey there DEV.to community!

So this is the second part of my previous Vue cheat sheet.

Some descriptions and code samples are from Vue.js official website. Visit Vue.js

There is a Japanese version of this article available at https://qiita.com/_masa_u/items/44db6af7dc0bc48bcc14 Thanks to

masa_u image

Enjoy!

Table of content

Lifecycle hooks

Lifecycle hooks are simply some functions that run on a specific event/time during your Vue component.

Before create hook

Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.

Sample:

let app = new Vue({
    beforeCreate() {
        console.log('I\'m not created yet');
    }
});
Enter fullscreen mode Exit fullscreen mode

Created hook

Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.

Sample:

let app = new Vue({
    created() {
        console.log('I\'m created');
    }
});
Enter fullscreen mode Exit fullscreen mode

Before mount hook

Called right before the mounting begins: the render function is about to be called for the first time.

Note: This hook is not called during server-side rendering.

Sample:

let app = new Vue({
    beforeMount() {
        console.log('Let\'s begin!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Mounted hook

Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

Note: This hook is not called during server-side rendering.

Sample:

let app = new Vue({
    mounted() {
        console.log('I\'m ready!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Before update hook

Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to remove manually added event listeners.

Note: This hook is not called during server-side rendering, because only the initial render is performed server-side.

Sample:

let app = new Vue({
    beforeUpdate() {
        console.log('Your DOM is about to change. Be careful!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Updated hook

Called after a data change causes the virtual DOM to be re-rendered and patched.

The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead.

Note: This hook is not called during server-side rendering.

Sample:

let app = new Vue({
    updated() {
        console.log('Hello new DOM!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Before destroy hook

Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.

Note: This hook is not called during server-side rendering.

Sample:

let app = new Vue({
    beforeDestroy() {
        console.log('Well it\'s the time I think...');
    }
});
Enter fullscreen mode Exit fullscreen mode

Destroyed hook

Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed.

Note: This hook is not called during server-side rendering.

Sample:

let app = new Vue({
    destroyed() {
        console.log('BOOOOM!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Events

Events are called when a specific action is performed on an element.

In the previous Vue cheat sheet I described them really basically. Here I will describe more aspects of events.

Keep in mind that @ is a short hand of v-on:.

Available events

By using v-on you can access all JavaScript events. These are some samples:

<button @click="() => alert('Hello')">Do it</button>
<button @mouseover="() => alert('Hello')">Do it</button>
<button @mouseout="() => alert('Hello')">Do it</button>
<button @contextmenu="() => alert('Hello')">Do it</button>
Enter fullscreen mode Exit fullscreen mode

You can also submit event on forms:

<form @submit="() => alert('This form is submitted')">
    <input type="text" />
</form>
Enter fullscreen mode Exit fullscreen mode

Event modifiers

Event modifiers are used to alter some behaviour of the event or have a more control on it.

Modifiers are added following by a . after the event.

So this is the structure v-on:event.modifier or @event.modifier.

Modifiers can also be chained to be performed at the respective order, like: @event.modifier-one.modifier-two

Stop modifier

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
Enter fullscreen mode Exit fullscreen mode

Prevent modifier

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
Enter fullscreen mode Exit fullscreen mode

Capture modifier

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>
Enter fullscreen mode Exit fullscreen mode

Once modifier

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
Enter fullscreen mode Exit fullscreen mode

Self modifier

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
Enter fullscreen mode Exit fullscreen mode

Passive modifier

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete  -->
<!-- in case it contains `event.preventDefault()`                -->
<div v-on:scroll.passive="onScroll">...</div>
Enter fullscreen mode Exit fullscreen mode

Key modifiers

Listening to keyboards event is easy but detecting which key is pressed would need the key code. Vue has some modifiers in order to listen to a specific key when using keyboard events.

These modifiers can be used with any key events such as keydown or keyup

Enter key modifier

<input @keydown.enter="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Tab key modifier

<input @keydown.tab="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Delete key modifier

<input @keydown.delete="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Esc key modifier

<input @keydown.esc="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Space key modifier

<input @keydown.space="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Up key modifier

<input @keydown.up="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Down key modifier

<input @keydown.down="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Right key modifier

<input @keydown.right="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Left key modifier

<input @keydown.left="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Home key modifier

<input @keydown.home="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

End down key modifier

<input @keydown.end="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Ctrl down key modifier

<input @keydown.ctrl="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Alt down key modifier

<input @keydown.alt="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Shift down key modifier

<input @keydown.shift="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Meta down key modifier

<input @keydown.meta="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Custom key code

If Vue doesn't provide an alias for the key you want, you can use its key code as below:

<input @keydown.49="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Key code 49 is for the number 1 on top of keyboard. (Not the number pad)

Key modifiers combination

You can chain key modifiers in order to create a combined structure, like this:

<input @keydown.ctrl.shift="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Exact key modifier

Using exact will allow you to capture the button you need and nothing else can be combined.

By using the code below if you hold shift and press ctrl it will respond normally:

<input @keydown.ctrl="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

But by using the code below the only key which should be pressed is ctrl:

<input @keydown.exact.ctrl="() => alert('Hey there!')"></input>
Enter fullscreen mode Exit fullscreen mode

Components

Components are reusable Vue instances used to simplify your code and split your code in a better manner.

This is a Vue component:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Enter fullscreen mode Exit fullscreen mode

As you can it has its template embedded in it as well as the data it uses and can be used in other Vue components like this:

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
Enter fullscreen mode Exit fullscreen mode

This will render three different buttons which has nothing to do with each other. Each of them will function separately and each has its own count data.

Important: When defining a component the data should be a function returning an object if not each instance won't have its own data and it will be shared.

Single file component

A single file component (or SFC) is a component which is in one file (holy crap! really?).

It has more clean syntax and it is as below:

<template>
    <div>

    </div>
</template>

<script>
    export default {

    };
</script>

<style scoped>

</style>
Enter fullscreen mode Exit fullscreen mode

Registering components

By registering components you can use them inside your templates.

Global component registration

By doing this method your component will be available in every Vue instance (in case you have more than one):

import Vue from 'vue';

Vue.component('my-component', require('/path/to/your/component'));
Enter fullscreen mode Exit fullscreen mode

Instance scoped registration

By doing this the component will only be available in the specified Vue instance:

import Vue from 'vue';

const myComponent = require('/path/to/your/component');

let app = new Vue({
    components: {
        myComponent
    }
});
Enter fullscreen mode Exit fullscreen mode

Lazy load component registration

This method is pretty cool since it will not bundle your component with your main entry file thus your website will be loaded faster and only the needed components will be required.

import Vue from 'vue';

const myComponent = () => import('./components/myComponent ');

let app = new Vue({
    components: {
        myComponent 
    }
});
Enter fullscreen mode Exit fullscreen mode

Bonus Tip: This will extract your components named by numbers from 0 and so on. If you are using webpack you can use a magic comment in order to change your components' file names like below:

import Vue from 'vue';

const myComponent = () => import(/* webpackChunkName: "myComponent" */ './components/myComponent ');

let app = new Vue({
    components: {
        myComponent 
    }
});
Enter fullscreen mode Exit fullscreen mode

Component props

Components can have props which act literally like HTML tags' attributes.

By having a component like this:

Vue.component('blog-post', {
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
Enter fullscreen mode Exit fullscreen mode

You can use it like this:

<blog-post post-title="hello!"></blog-post>
Enter fullscreen mode Exit fullscreen mode

Note: When defining props it is better to define it using camelCase but when using it, use it as kebab-case. Although it is possible to use kebab-case defined props as camelCase in Vue but IDEs might get confused about it.

Your single file components can also have props:

<template>
    <div>

    </div>
</template>

<script>
    export default {
           props: ['myProp'];
    };
</script>

<style scoped>

</style>
Enter fullscreen mode Exit fullscreen mode

Component slots

Slots are used to embed other elements or components inside a component.

Simple slot

A simple slot is an unnamed slot and is used like below in a template:

<a :href="url" class="strange-class"><slot></slot></a>
Enter fullscreen mode Exit fullscreen mode

After defining the template above assuming that the component name is navigation-link and url is a prop, you can use it as below:

<navigation-link url="/my-profile">Your profile</navigation-link>
Enter fullscreen mode Exit fullscreen mode

As you see we have a text inside of our components and that is going to be inserted instead of <slot></slot>.

Named slots

Named slots are a little different than an unnamed one.

By defining a component called base-layout like this:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
Enter fullscreen mode Exit fullscreen mode

You can use it like this:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
Enter fullscreen mode Exit fullscreen mode

The templates with v-slot:slot-name will be placed in their respective slots defined in the component and other ones will be placed in <slot></slot> which is unnamed.

Note: An unnamed slot is actually accessible with the name default like below:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
Enter fullscreen mode Exit fullscreen mode

Scoped slots

A slot can have access to its parents prop in order to avoid such a thing (if needed) you can define a slot prop like below:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
Enter fullscreen mode Exit fullscreen mode

And when using:

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
Enter fullscreen mode Exit fullscreen mode

This slot will use the user available in the component and not the one available in the parent component.


Check out my free Node.js Essentials E-book here:

Discussion (0)

pic
Editor guide