Options : Rendu
template
Un modèle de chaîne de caractères pour le composant.
Type :
tsinterface ComponentOptions { template?: string }
Détails :
Un template fourni via l'option
template
sera compilé à la volée lors de l'exécution. Cette option n'est prise en charge que si vous utilisez une version de Vue qui inclut le compilateur de templates. Ce dernier n'est PAS inclus dans les builds de Vue qui ont le motruntime
dans leur nom, comme par exemplevue.runtime.esm-bundler.js
. Consultez le guide sur le fichier dist pour plus de détails sur les différents builds.Si la chaîne de caractères commence par
#
, elle sera utilisée commequerySelector
et utilisera leinnerHTML
de l'élément sélectionné en guise de chaîne de caractères pour le template. Cela permet de créer le template source à l'aide d'éléments<template>
natifs.Si l'option
render
est également présente dans le même composant,template
sera ignoré.Si le composant racine de votre application n'a pas d'option
template
ourender
de spécifiée, Vue essaiera à la place d'utiliser leinnerHTML
de l'élément monté comme template.Remarque sur la sécurité
N'utilisez que des sources de templates auxquelles vous pouvez faire confiance. N'utilisez pas de contenu fourni par l'utilisateur en guise de template. Voir le guide sur la sécurité pour plus de détails.
render
Une fonction qui retourne automatiquement l'arbre du DOM virtuel du composant.
Type :
tsinterface ComponentOptions { render?(this: ComponentPublicInstance) => VNodeChild } type VNodeChild = VNodeChildAtom | VNodeArrayChildren type VNodeChildAtom = | VNode | string | number | boolean | null | undefined | void type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]
Détails :
render
est une alternative aux templates qui vous permet de tirer parti de toute la puissance de JavaScript pour déclarer le rendu du composant.Les templates pré-compilés, par exemple ceux des composants monofichiers, sont compilés dans l'option
render
au moment du build. Si les deux optionsrender
ettemplate
sont présentes dans un composant,render
aura la priorité.Voir aussi :
compilerOptions
Configure les options du compilateur d'exécution pour le template du composant.
Type :
tsinterface ComponentOptions { compilerOptions?: { isCustomElement?: (tag: string) => boolean whitespace?: 'condense' | 'preserve' // par défaut: 'condense' delimiters?: [string, string] // par défaut : ['{{', '}}'] comments?: boolean // par défaut : false } }
Détails :
Cette option de configuration n'est respectée que lors de l'utilisation du build complet (c'est-à-dire le build
vue.js
autonome qui peut compiler des templates dans le navigateur). Elle prend en charge les mêmes options que app.config.compilerOptions au niveau de l'application, et a la plus haute priorité pour le composant actuel.Voir aussi : app.config.compilerOptions