Course Preview

Vue Fundamentals

Vue is a JavaScript framework for building interactive web interfaces from reusable components. It connects application state to HTML so the displayed page updates when that state changes.

itWeb development | OpenSkills.info

Course pathWalk it in order

Look it upDip in anytime

Go furtherLeaves this page

Don't Panic — Vue Fundamentals

Vue is a JavaScript framework for building interfaces out of components: small, reusable units that each own a slice of markup, logic, and style. Before it, you either hand-wrote DOM updates or committed to a framework that owned your whole page. Vue's pitch is narrower and more polite: it watches your state and patches the page when that state changes. Nothing more dramatic than that.

The load-bearing idea is the reactive state loop. A component declares state, a template reads it, and Vue records which values were read. Change one, and only the work that depends on it gets scheduled — batched, so ten changes cost one update. If you read the DOM immediately after a change, you may see yesterday's answer; await nextTick() is the polite cough that waits for the update to finish.

Second idea: props down, events up. Data flows from parent to child as read-only props; a child reports an interaction by emitting a named event, and the owner of the state decides what to do about it. A computed value derives from state and caches; a watcher performs side effects at external boundaries. Mixing those up — copying state in a watcher instead of deriving it — produces two values that politely disagree with each other.

The surprise is the list key. Give v-for a stable task.id, not the array index: an index knows where a row sits, not which task it is, and reordering will happily attach your input's state to a different record. This is the one bug everyone meets exactly once.

For everything else: the Intro lays out the component and rendering model; Slides compress it into the update path; the Cheatsheet holds the syntax tables. Start there, and don't let v-html near untrusted content — interpolation escapes, v-html does not. Mostly harmless, with that one exception.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources