A Vue Cheatsheet
Tags: vue, javascript, beginners, tutorial
Published: 2022-04-08 05:18:45

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:

```html
<!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: function (message) { alert(message); },
                }
            });
        </script>
    </body>
</html>
```

## Starter template for Vue3:

```html
<!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:**
```html
<div>Hello, {{ name }}!</div>
```

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

**Looping in a template:**
```html
<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:**
```html
<div v-bind:id="item.id"></div>
<div :id="someId"></div>
...
data...
    item: { id: "wow" },
    someId: 'shorthand-id',
...
```

**Toggling classes:**
```html
<div v-bind:class="{ active: isActive }" class="red-text">Hello!</div>
<div :class="{ active: isActive }" class="red-text">Hello!</div>
```

**Using conditionals in html:**
```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.

```html
<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); },
...
```