Skip to main content

pelatihan.orgLearn. Practice. Grow.

Sign in Sign up

pelatihan.org

Learn web development with a clear roadmap, code practice, and quizzes with instant feedback.

Catalog Sign in Subscription

Vue Curriculum: 4 Chapters, 43 Lessons — pelatihan.org

Home/Catalog/Vue/Curriculum

Curriculum

Vue Curriculum

Learn Vue online with 43 structured lessons, code examples, and 215 quiz questions.

43 lessons 4 chapters 215 questions

Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.

01

Vue Tutorial

17 lessons

01Vue HOMEThis HOME page is an entry point for the material Vue.js, a progressive JavaScript framework for building user interfaces. Vue focuses on the view layer alone so it can be easily…

02Vue IntroThis lesson explains what Vue is and the declarative philosophy behind it. Instead of instructing the browser step by step through manual DOM manipulation, you describe how the…

03Vue DirectivesA directive is a special attribute with a v- prefix that instructs the Vue to react to data. The directive is divided into those that react to values such as v-if and v-for, and…

04Vue v-bindThe v-bind directive is used to bind dynamic values from Vue data to HTML attributes, component props, or styles. Without a v-bind, the attribute value is treated as normal text…

05Vue v-ifThe v-if directive works like a branch: the element is only rendered to the DOM when its expression is true. Vue provides the derivative of v-else-if and v-else which must…

06Vue v-showThe v-show directive works by manipulating the CSS display property on the element: the element remains in the DOM, only hidden from view when its false condition. This approach…

07Vue v-forThe v-for directive is used to render a list of elements based on a collection, which can be an array, object, number, or range. The values available within the v-for block are…

08Vue EventsThis lesson discusses how to handle events in Vue, such as clicking, input, and submit forms. Vue provides declarative syntax to register listener so you don't have to add event…

09Vue v-onThe v-on directive is used to listen to DOM events and run code or method when they happen. The v-on syntax is followed by the event name, and Vue provides a much more concise…

10Vue MethodsMethod is a function defined within a component and can be called from a template or from other code. Methods are useful for accommodating logic that is too complex to keep…

11Vue Event ModifiersAn event modifier is a punctuated ending that modifies the listener's behavior without the need to write additional code. Example generally prevent to call preventDefault and…

12Vue FormsInteractive forms are an important part of almost all web applications, and Vue simplifies its management through two-way binding. The user's input is stored directly in reactive…

13Vue v-modelThe v-model is a sugar syntax for combining a v-bind with a v-on so that the value of a data and a form element are always two-way synchronous. When the user types, the data…

14Vue CSS BindingVue facilitates the dynamically binding of CSS classes and inline styles through:class and :style. The bounded values can be strings, arrays, or objects so that determining the…

15Vue Computed PropertiesComputed property is a derivative value calculated from other reactive data and cached by Vue until its dependence changes. This approach is more efficient than the method for…

16Vue WatchersWatches are used to react to changes in the value of reactive data and to perform additional actions such as network requests or logging. Unlike computed values, watches run side…

17Vue TemplatesTemplates are the component parts that describe the display structure, and Vue provides several forms ranging from template strings to .vue files. In the template, the…

02

Scaling Up

24 lessons

01Vue Why, How and SetupAs the project grows, the file structure and initial decisions become highly determinative of the ease of development. Vue provides a variety of ways to get started, from…02Vue First SFC PageThis page discusses how to create your first page with single-file components. A .vue file contains three main blocks: a template for display structure, a script setup for logic,…03Vue ComponentsComponents are reusable pieces of display, consisting of templates, logic, and style packed into one unit. With components, large applications can be broken down into small…04Vue PropsProps are the way the parent component sends data to the child component through attributes, so the child doesn't need to take the data globally. Props are defined in the child…05Vue v-for ComponentsWhen a rendered list becomes multiple components, each item needs to be a standalone component instance with its own props. The v-for directive can be attached directly to the…06Vue $emit()The $emit method is used by the child component to emit custom events to the parent, so that the data stream remains one direction from the parent to the child and vice versa…07Vue Fallthrough AttributesFallthrough attributes are attributes that are attached to a component tag but are not listed as props, such as a class, style, id, or specific data. Intuitively Vue inherits…08Vue Scoped StylingScoped styling ensures that CSS style only applies to the components where it is written so that there is no collision between the components. Vue applies it by adding specific…09Vue Local ComponentsLocal components are listed on the parent component via the components option so that they can only be used within the parent. This approach differs from the global component…10Vue SlotsThe slot provides a way for the parent component to insert its own content into the child component, making the child a flexible container. The built-in slot hosts all unnamed…11Vue v-slotThe v-slot directive tells Vue where the parent content should be entered when there are multiple named slots. The full v-slot syntax is followed by the name slot, with the more…12Vue Scoped SlotsScoped slots allow the child component to pass its own data to the parent through the slot, so that the parent can determine how to display it. The mother receives the prop slot…13Vue Dynamic ComponentsDynamic components allow Vue to render different components based on data, for example when the active menu changes. Vue provides a built-in component element with an is…14Vue TeleportTeleport is a built-in Vue component that moves the template piece to another location within the DOM, outside the current component hierarchy. The most common case is capital,…15Vue HTTP RequestVue applications often need to take or send data to the server via HTTP request. On Vue 3, the request is usually made within the lifecycle hook onMounted using a fetch or…16Vue Template RefsTemplate refs provide a way to access DOM elements or component instances directly from the Vue logic. With the Composition API, you create a ref with the same name exactly as…17Vue Lifecycle HooksEvery component of the Vue goes through a lifecycle, from being made, rendered, installed in the DOM, to disassembled. A lifecycle hook is a point where you can run code at those…18Vue Provide/InjectProvide and inject provide a way to send data to many derivative components without the need to pass props at each level (prop drilling). The parent component declares the data…19Vue RoutingRouting allows a single-page application to display multiple views based on URLs without reloading a page. The Vue Router provides routers-link for navigation, routers-view as a…20Vue Form InputsForm elements like checkbox, radio, select, and textarea each have a specific behavior when connected to the v-model. The checkbox produces a boolean or array value, the radio…21Vue AnimationsThe built-in Transition component in Vue wraps one element or component to get animated when it goes in, out, or changes. Vue adds CSS transition classes like v-enter-from,…22Vue Animations with v-forFor a frequently changing list, the TransitionGroup component manages the animation of moving positions between items, not just in and out. Vue adds a move class when the item…23Vue BuildBuild is the process of converting Vue source code into a browser-ready production asset, typically involving module merging, minification, and file separation. Vite provides…24Vue Composition APIComposition APIs are a way of writing component logic by combining small functions through setup, as opposed to Options APIs which group based options such as data and methods.…

03

Vue Examples

2 lessons

01Vue ExamplesThe sample page collects various Vue patterns that have been studied into pieces of real application, such as a task list, calculator, or communication between components. From…02Vue ServerServer-side rendering allows Vue to render pages on the server first so that HTML is already available before JavaScript is taken. This approach speeds up the page's initial…

All-course subscription

$5.00 / 30 days

Access every course, lesson, and quiz. Progress is saved automatically.

This curriculum is free to browse. Activate a subscription to unlock full lessons, code examples, and quizzes.

Activate subscription Back to course