Vue.js – Template Refs
HTML elements Refs In order to create a reference to an HTML element we use the ref attribute, where we set a reference name. We link the reference to a…
Vue.js – Watchers
watch() We use the watch() function to trigger a callback whenever a piece of reactive state changes. It is similar to computed properties, but in this case, a watcher allow…
Vue.js – Forms Input Bindings
Input Bindings When using form inputs we usually need two-way binding. In order to achieve this we can use the :value attribute with the @input event. <input :value="text" @input="event =>…
Vue.js – Event Handling
Inline and Method Handlers const count = ref(0) function greet(event) { alert('Hello World!') console.log(event) } function say(message) { alert(message) } function warn(message, event) { if (event) { event.preventDefault() } alert(message)…
Vue.js – Conditional and List Rendering
v-if, v-else, v-else-if, v-show v-if is used to determine if an element will be rendered. It is used in conjuction with v-else and v-else-if to chain conditionals and determine the…
Vue.js – Class and Style Bindings
Classes We can add classes dynamically using the v-bind directive on the class attribute. It accepts an object being the keys the classes names and the values the boolean flags…
Vue.js – Computed Properties
Computed Properties A computed property is a method that returns a calculated value. It can be used in template expressions just as a normal reference. It caches the results, updating…
Vue.js – Reactivity Fundamentals
ref() Use ref() method to create reactive objects that contain the values for the components state. When used inside script tags, the .value property must be accessed to read and…
Vue.js – Template Basics
Text Interpolation Simple text can be shown through text interpolation, using "Mustache" syntax (double curly braces): <div id="app"> {{ message }} </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'…
Vue.js – Initialize and configure
The Application Instance Every Vue application starts by creating a new application instance with the createApp function: import { createApp } from 'vue' const app = createApp({ /* root component options */ })…