back

A Vue Cheatsheet

2022-04-07

A quick cheatsheet that I can refer to get going with Vue.

Installation - Production Versions

Vue2:

https://v2.vuejs.org/js/vue.min.js

Vue3:

https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js

Documentation

Vue2:

https://v2.vuejs.org/v2/guide/syntax.html

Vue3:

https://vuejs.org/guide/essentials/template-syntax.html

Starter template for Vue2:

These templates use the development version:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue2</title>
        <link rel="icon" href="data:;base64,=">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="app">
            <h1>Hello, {{name}}!</h1>
            <button @click="popup('alert bind')">click me</button>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
        <script>
            const app = new Vue({ 
                el: "#app",
                data: {
                    name: "Nivethan",
                },
                methods: {
                    popup(message) { alert(message); },
                }
            });
        </script>
    </body>
</html>

Starter template for Vue3:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue3 Starter</title>
        <link rel="icon" href="data:;base64,=">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="app">
            <h1>Hello, {{name}}!</h1>
            <button @click="popup('alert bind')">click me</button>
        </div>

        <script src="https://unpkg.com/vue@3"></script>
        <script>
            Vue.createApp({
                data() {
                    return {
                        name: 'Nivethan'
                    }
                },
                methods: {
                    popup(message) { alert(message); },
                }
            }).mount('#app')
        </script>
    </body>
</html>

Template Syntax

Data is passed to the template through the data object in the Vue instance.

Embedding variables into the html:

<div>Hello, {{ name }}!</div>

Embedding html directly:

<div><span v-html="rawData"></span>
...
data...
    rawData: `<span style="color:blue;">Hi!</span>`,
...

Looping in a template:

You can also get the index in a loop

<ol>
    <li v-for="item in items">item</li>
    <li v-for="(item, index) in items">item</li>
</ol>
...
data...
    items: ['One', 'Two', 'Three'],
...

Setting attributes using variables:

<div v-bind:id="item.id"></div>
<div :id="someId"></div>
...
data...
    item: { id: "wow" },
    someId: 'shorthand-id',
...

Toggling classes:

<div v-bind:class="{ active: isActive }" class="red-text">Hello!</div>
<div :class="{ active: isActive }" class="red-text">Hello!</div>

Using conditionals in html:

<div v-if="true">This will appear conditionally.</div>

<div v-if="true">This will appear conditionally.</div>
<div v-else>This will show otherwise.</div>

Using event handlers:

These functions are added to the methods object on the Vue instance.

<div v-on:click="popup('hi!')">click me</div>
<div @click="log('hi!')">shorthand click me</div>
...
methods...
    popup(message) { alert(message); },
    log(message) { console.log(message); },
...