2022-04-07
A quick cheatsheet that I can refer to get going with Vue.
Vue2: https://v2.vuejs.org/js/vue.min.js
Vue3: https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js
Vue2: https://v2.vuejs.org/v2/guide/syntax.html
Vue3: https://vuejs.org/guide/essentials/template-syntax.html
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>
<!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>
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); },
...