tutorial/html-mode

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

HTML-mode without Build Step Import Configuration

When using HTML-mode without a build step in applications, imports must be changed to import from 'vue/dist/vue.esm-bundler.js' inside scripts, or the build tool must be configured to resolve vue accordingly.

Vite Configuration for vue/dist/vue.esm-bundler.js

For Vite build tool configuration to resolve vue to the ESM bundler version, set up the vite.config.js with a resolve alias: export default { resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js' } } }

v-bind directive for attribute binding

To bind an attribute to a dynamic value in Vue, use the v-bind directive with the syntax v-bind:attributeName="propertyName". For example, <div v-bind:id="dynamicId"></div> binds the id attribute to the dynamicId property from component state.

What is a directive in Vue

A directive is a special attribute that starts with the v- prefix. Directives are part of Vue's template syntax. Directive values are JavaScript expressions that have access to the component's state.

Directive argument syntax

The part after the colon in a directive (such as :id in v-bind:id) is called the argument of the directive. This specifies which attribute or property the directive operates on.

Mustaches only used for text interpolation

In Vue, mustache syntax is only used for text interpolation. To bind attributes to dynamic values, use the v-bind directive instead.

Dynamic class binding example

To bind a dynamic class to an element, use v-bind:class or the shorthand :class with a property name. For example, <h1 :class="titleClass"></h1> binds the class attribute to the titleClass property from component state.

v-if directive for conditional rendering

The v-if directive conditionally renders an element. An element with v-if is only rendered if the value of its expression is truthy. If the value changes to falsy, the element is removed from the DOM.

v-else directive for conditional branches

The v-else directive can be used after a v-if to denote an alternative branch that renders when the v-if condition is falsy.

v-else-if directive for multiple conditions

The v-else-if directive can be used to denote additional branches of a conditional between v-if and v-else.

v-if syntax example

An element can be conditionally rendered using v-if. Example: <h1 v-if="awesome">Vue is awesome!</h1> renders the h1 only when awesome is truthy.

v-if and v-else example

Example of using v-if and v-else together: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> Only one of these elements will be rendered based on the truthy or falsy value of awesome.

Give your agent this brain