tutorial/introduction

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tutorial Prerequisites and Scope

The Vue tutorial assumes basic familiarity with HTML, CSS, and JavaScript. It is designed to give a quick experience of working with Vue in the browser, but is not comprehensive. After completing the tutorial, readers should also read the Guide for more detailed coverage of each topic.

Tutorial Code Editing and Workflow

The tutorial allows editing code on the right side of the interface (or below on narrow screens) with results updating instantly. Each step introduces a core Vue feature, and users complete code to make demos work. A 'Show me!' button reveals working code if needed, though self-directed learning is recommended for faster understanding.

Declarative rendering definition

Declarative rendering is the core feature of Vue. It uses a template syntax that extends HTML to describe how the HTML should look based on JavaScript state. When the state changes, the HTML updates automatically.

Vue Single-File Component (SFC) definition

A Vue Single-File Component (SFC) is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a .vue file.

Mustaches syntax for rendering dynamic text

Mustaches syntax (double curly braces {{ }}) is used to render dynamic text based on reactive state values in templates.

Mustaches can contain any valid JavaScript expression

The content inside mustaches is not limited to just identifiers or paths - any valid JavaScript expression can be used, such as {{ message.split('').reverse().join('') }}.

Vue template syntax is HTML-based and valid HTML

Vue uses an HTML-based template syntax that is syntactically valid HTML and can be parsed by spec-compliant browsers and HTML parsers. All Vue templates declaratively bind the rendered DOM to the underlying component instance's data.

Vue compiles templates to optimized JavaScript

Under the hood, Vue compiles templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Render functions as alternative to templates

As an alternative to templates, developers can directly write render functions with optional JSX support. However, render functions do not enjoy the same level of compile-time optimizations as templates.

Fetching data example fetches Vue Core commits from GitHub API

This example demonstrates fetching latest Vue Core commits data from GitHub's API and displaying them as a list. The user can switch between the two primary branches.

Give your agent this brain