Vue.js – Lifecycle Hooks
Lifecycle Hooks Every Vue component has a life cycle. Within this, some functions are executed sequentially, which are called hooks. We can add custom code in a hook by invoking…
Vue.js – Components Basics
Title References
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. This can be verbose.…
Vue.js – Event Handling
Inline and Method Handlers Event Modifiers These are special suffixes added to event listeners using v-on (or the shorthand @) to tweak how events are handled. These modifiers help simplify…
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…