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