Vue Foundations in Vue.js

Vue Foundations is the first chapter of the free Vue.js tutorial. It starts with what Vue is, gets you to a first running app, and then teaches the template language every later lesson uses.

What each lesson covers:

  • Introduction to Vue: What Vue is and why it was created, the progressive framework idea, the Vue ecosystem, Vue 2 vs Vue 3, Options API vs Composition API, CDN vs Vite, creating and running a project, its files, and your first app with createApp(), mount(), ref() and a click.
  • Templates and Directives: Declarative rendering, {{ }} interpolation and expressions, the parts of a directive, v-bind and :, boolean and object bindings, v-html and XSS, v-text, v-once, v-memo, v-pre, v-cloak and template scope.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Introduction to Vue

    What Vue is and why it was created, the progressive framework idea, the Vue ecosystem, Vue 2 vs Vue 3, Options API vs Composition API, CDN vs Vite, creating and running a project, its files, and your first app with createApp(), mount(), ref() and a click.

    • Explain what Vue is and what a progressive framework means
    • Tell Vue 2 code from Vue 3 code
    • Create, run and build a Vue project with create-vue and Vite
    • Start an app with createApp() and mount(), and update the screen with ref()
  2. Templates and Directives

    Declarative rendering, text interpolation with {{ }}, JavaScript expressions in templates and their limits, the parts of a directive, v-bind and its : shorthand, boolean and multiple attributes, v-html and XSS, v-text, v-once, v-memo, v-pre, v-cloak and template scope.

    • Show values in a template with {{ }} and simple expressions
    • Name the parts of a directive: name, argument, modifier and value
    • Bind attributes with v-bind and the : shorthand, including booleans and objects
    • Use v-html safely and know when to use v-text, v-once and v-pre