Cheat sheet

Variables in Vue.js are reactive and must therefore be declared/set using the function ref() from the core vue library.

A reactive variable means that changes to it will be updated automatically anywhere it is used. In the example below, myVar is used two places and will be updated in both of them if myVar is changed.

To use a variable in the template we add double squarly brackets around it like this:; {{ myVar }}.
..except, if you want to use the variable in an attribute you have to use it a litle differently, namely like this <tag :attribute="myVar">.

// Declared and assigned seperately
<script setup>
    import { ref } from 'vue'

    const myVar = ref('test')
</script>


<template>
    <div :class="myVar" >
        My variable has value: {{ myVar }}
    </div>
</template>

Variables must first be declared and then (optionally) assigned.

// Declared and assigned seperately
let myInteger;
myInteger = 42;

// Declared and assigned in one go
let myFloat = 3.14;
let myString = "All your base are belong to us";
let myArray = [ 1, 'two' ];
let myObject = { one: 1, two: 'two' };

                

// "Glue" strings and variables together
let s;
let i = 8;

s = 'xx' + i + 'xx';
s = "xx" + i + "xx";
s = `xx${i}xx`; // "Template literal"
// Outputs: xx8xx

s = 'I have ' + i + ' marbles';
s = "I have " + i + " marbles";
s = `I have ${i} marbles`; // "Template literal"
// Outputs: I have 8 marbles

                

// Declare a variable and at the same time assign it an empty array
let myArray = [];

// Add some values to the end of the array
myArray.push(5);
console.log(myArray); // [ 5 ]

myArray.push('test');
console.log(myArray); // [ 5, 'test' ]

myArray.push('delete');
console.log(myArray); // [ 5, 'test', 'delete' ]

// Remove a value from the end of the array
let popped = myArray.pop();
console.log(myArray); // [ 5, 'test' ]
console.log(popped); // 'delete'

                

When you write HTML you work with tags. When the browser reads your HTML it creates elements from tags. Here's a link to an image that shows this releationship.

// HTML
<div id="item">Some text</div>
<input id="input" />

// Find an element in the DOM by id and assign the result to a variable
let $item = document.getElementById('item');
let $input = document.getElementById('input');

// Output the content of the element
console.log($item.innerHTML);

// Output the value of an input element
console.log($input.value);

                

// HTML
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

// Find an element in the DOM by id and assign the result to a variable
let $items = document.getElementByClassName('item');

// Output the content of each item
for (let $item of $items) {
    console.log($item.innerHTML);
}

                

Events are things that happen when a user clicks a mouse or presses a key.

Mouse events

// HTML
<button id="my-button">Click me</button>

// Find the button element in the DOM by id and assign it to a variable
let $myButton = document.getElementById('my-button');

// Declare functions for mouse events
$myButton.onmousedown = function() {
    console.log('Mouse button pressed down');
}
$myButton.onmouseup = function() {
    console.log('Mouse button pressed up');
}
$myButton.onclick = function() {
    console.log('Mouse button clicked (=> mouse button pressed down and up)');
}
$myButton.onmouseenter = function() {
    console.log('Mouse cursor entered $myButton');
}
$myButton.onmouseleave = function() {
    console.log('Mouse cursor left $myButton');
}

                

Keyboard events

// HTML
<input id="my-input"/>

// Find the input element in the DOM by id and assign it to a variable
let $myInput = document.getElementById('my-input');

// Declare functions for keyboard events
$myInput.onkeydown = function(event) {
    console.log('Key was pressed down: ', event.key);
}
$myInput.onkeyup = function(event) {
    console.log('Key was released: ', event.key);
}

                

// Output: 0, 1, 2, 3, 4
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// Output: 2, 3, 4, 5
for (let i = 2; i <= 5; i += 1) {
    console.log(i);
}

// Output: 3, 6, 9, 12
for (let i = 3; i <= 12; i += 3) {
    console.log(i);
}

// Output: 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0
for (let i = 10; i > -1; i--) {
    console.log(i);
}

                

// Output: 'one', 'two', 'three'
let items = ['one', 'two', 'three'];
for (let item of items) {
    console.log(item);
}

                

// Declare a function that does something
function doSomething() {
    console.log('Do something');
}
// Call the function
doSomething();

// Declare a function that can get passed arguments, do something and return a result
function sumNumbers(number1, number2) {
    let sum = number1 + number2;
    return sum;
}
// Call the function
let mySum = sumNumbers(34, 8);
console.log(mySum); // will output 42

                

These two multi edit tricks will help you speed things up

• Multi-line-editing - Go to the first line and then CTRL + SHIFT + <UP/DOWN>
• Multi-word-editing - Select the word and then CTRL + d

If you want to assign your own keyboard shortcuts, take a look at this: https://code.visualstudio.com/docs/getstarted/keybindings.

For starters I recommend setting these

• Copy Line - editor.action.clipboardCopyAction
• Paste Line - editor.action.clipboardPasteAction
• Cut Line - editor.action.clipboardCutAction
• Comment - editor.action.commentLine

..set them up to your own keyboard shortcut and your live will be much easier!