Glossary
This glossary provides definitions for common Vue.js terms to help newcomers understand Vue’s terminology more quickly.
Core Vue Concepts
Section titled “Core Vue Concepts”Vue.js
Section titled “Vue.js”A progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with a declarative and component-based programming model.
Reactivity
Section titled “Reactivity”Vue’s system that automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen. This is what enables the responsive, data-driven UI that Vue is known for.
Declarative Rendering
Section titled “Declarative Rendering”An approach where developers describe the desired state of the UI, and Vue handles updating the DOM to match that state. Instead of imperatively manipulating the DOM (like with vanilla JavaScript), you declare what should be shown based on your data.
Component
Section titled “Component”The building blocks of Vue applications. Components are reusable, self-contained pieces of the user interface that contain their own HTML, CSS, and JavaScript.
Files and Structure
Section titled “Files and Structure”SFC (Single-File Component)
Section titled “SFC (Single-File Component)”A .vue file format that encapsulates the template (HTML), script (JavaScript), and styles (CSS) of a Vue component in a single file. This promotes modularity and reusability.
Template
Section titled “Template”The HTML portion of a Vue component that defines the component’s structure. Templates can include Vue-specific syntax for data binding, directives, and event handling.
APIs and Implementation Methods
Section titled “APIs and Implementation Methods”Options API
Section titled “Options API”A style of defining Vue components where component logic (data, methods, lifecycle hooks) is organized using predefined option properties in an object. It uses the familiar this context seen in class-based Object-Oriented Programming.
Composition API
Section titled “Composition API”A set of APIs that allow developers to create Vue components using imported functions. Component logic is defined using reactive state variables and functions in the setup() function, enabling better code organization based on logical concerns rather than option types.
setup()
Section titled “setup()”A special function used with the Composition API that serves as the entry point for composing the component’s reactive state and functions. Code inside the setup function executes before the component is created.
Reactive State
Section titled “Reactive State”A function that creates a reactive reference to a value. The value is stored in a .value property to maintain reactivity. For example, const count = ref(0) creates a reactive variable that can be updated with count.value++.
Reactive
Section titled “Reactive”A function that converts an object into a reactive proxy. Unlike refs, reactive objects don’t require the .value property to access or mutate their properties.
Template Syntax
Section titled “Template Syntax”Interpolation ({{ }})
Section titled “Interpolation ({{ }})”The double curly braces syntax used in templates to display reactive data. For example, {{ count }} will display the value of the count variable.
Directives
Section titled “Directives”Special attributes with the v- prefix that apply reactive behavior to DOM elements. Common examples include:
v-bindor:shorthand: Binds an attribute to a reactive valuev-onor@shorthand: Attaches event listenersv-if,v-else,v-show: Conditional renderingv-for: List renderingv-model: Two-way data binding
@click
Section titled “@click”A shorthand for the v-on:click directive that attaches a click event listener to an element. For example, <button @click="increment"> calls the increment function when the button is clicked.
Component Lifecycle and Mounting
Section titled “Component Lifecycle and Mounting”The process of attaching a Vue application or component to a DOM element. The mount('#app') method connects the Vue application to the DOM element with the ID of ‘app’.
Lifecycle Hooks
Section titled “Lifecycle Hooks”Special functions that allow you to run code at specific times during a component’s lifecycle, such as when it’s created, mounted to the DOM, updated, or destroyed. Examples include onMounted(), onUpdated(), and beforeUnmount().
Styling
Section titled “Styling”Scoped CSS
Section titled “Scoped CSS”A feature in Single-File Components where styles defined with the <style scoped> tag only apply to elements within that component. This prevents CSS from leaking to other components, enabling more maintainable styling.
Advanced Concepts
Section titled “Advanced Concepts”Virtual DOM
Section titled “Virtual DOM”An in-memory representation of the real DOM that Vue uses to optimize updates. Vue compares the new virtual DOM with the previous one to determine the minimal number of real DOM operations needed.
Teleport
Section titled “Teleport”A built-in component that allows you to “teleport” a part of a component’s template to exist in the DOM outside of the Vue app—useful for modals, tooltips, etc.
Provide/Inject
Section titled “Provide/Inject”A dependency injection system in Vue that allows a parent component to “provide” data that can be “injected” into any of its descendants, regardless of how deep the component hierarchy is.
Suspense
Section titled “Suspense”An experimental feature that allows you to handle async dependencies in your component tree, showing fallback content while async components are loading.
Building and Tooling
Section titled “Building and Tooling”A modern frontend build tool that provides a faster and leaner development experience for Vue projects.
Vue CLI
Section titled “Vue CLI”The standard tooling for Vue.js development, providing a full system for rapid Vue development including project scaffolding, a plugin system, and GUI.
A state management pattern and library for Vue applications, helping to manage shared state across components in a predictable way (Note: Pinia is the new recommended state management solution for Vue 3).
Vue Router
Section titled “Vue Router”The official router for Vue.js, providing a way to map components to different browser URL paths.
Class and Style Bindings
Section titled “Class and Style Bindings”v-bind (and : shorthand)
Section titled “v-bind (and : shorthand)”A directive that binds an attribute to a reactive value. When used with class or style attributes, it provides special enhancements for manipulating an element’s classes and inline styles reactively. The colon syntax (:class) is the shorthand for v-bind:class.
Binding
Section titled “Binding”The process of connecting a DOM element’s attribute, property, or content to a reactive data source in Vue. When the data changes, the bound DOM element updates automatically.
Object Syntax for Class Binding
Section titled “Object Syntax for Class Binding”A technique for conditionally applying CSS classes by passing an object to the v-bind:class directive. The object keys are class names, and the values are boolean expressions that determine if the class should be applied.
Array Syntax for Class Binding
Section titled “Array Syntax for Class Binding”A method for applying multiple classes by binding an array to the v-bind:class directive. Each array element can be a string (class name) or an object (for conditional classes).
Truthiness
Section titled “Truthiness”In JavaScript and Vue.js, a concept where values are evaluated for their boolean context. Any value that is not false, 0, "", null, undefined, or NaN is considered “truthy” and will evaluate to true in boolean contexts, such as class binding conditions.
Style Binding
Section titled “Style Binding”Similar to class binding, but for inline styles. Vue provides special handling for the style attribute, allowing you to bind to objects or arrays of style properties that will be merged with any existing inline styles.
Auto-prefixing
Section titled “Auto-prefixing”A feature in Vue’s style binding system that automatically adds appropriate vendor prefixes (like -webkit- or -ms-) to CSS properties when needed for browser compatibility.