tutorial/modes

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.

SFC-mode and HTML-mode in Tutorial

The tutorial can be switched between SFC-mode and HTML-mode. SFC-mode shows code examples in Single-File Component format, which is what most developers use with a build step. HTML-mode shows usage without a build step.

Single-File Components compile template to render function

Pre-compiled templates in Single-File Components are compiled into the render option at build time.

template option compiles on-the-fly at runtime

The template option accepts a string template for the component that will be compiled on-the-fly at runtime. It is only supported when using a build of Vue that includes the template compiler. The template compiler is NOT included in Vue runtime builds that have the word 'runtime' in their names, such as vue.runtime.esm-bundler.js.

template option with querySelector selector

If the template string starts with #, it will be used as a querySelector and the selected element's innerHTML will be used as the template string. This allows source templates to be authored using native <template> elements.

render option takes priority over template

If both render and template options are present in a component, the render option will take higher priority and template will be ignored.

root component template fallback

If the root component of an application doesn't have a template or render option specified, Vue will try to use the innerHTML of the mounted element as the template instead.

render function returns virtual DOM tree

The render option is a function that programmatically returns the virtual DOM tree of the component. It is an alternative to string templates that allows you to leverage the full programmatic power of JavaScript to declare the render output of the component.

render function type signature

The render function has the type signature render?(this: ComponentPublicInstance) => VNodeChild, where VNodeChild can be a VNode, string, number, boolean, null, undefined, void, or an array of these types.

compilerOptions configuration object

The compilerOptions option configures runtime compiler options for the component's template. It accepts an object with the following properties: isCustomElement (function that takes a tag string and returns boolean), whitespace ('condense' or 'preserve', default is 'condense'), delimiters (tuple of two strings, default is ['{{', '}}'], and comments (boolean, default is false).

compilerOptions only in full build

The compilerOptions config option is only respected when using the full build, specifically the standalone vue.js that can compile templates in the browser. It supports the same options as the app-level app.config.compilerOptions and has higher priority for the current component.

Give your agent this brain