# DOM
# template
Tipo:
string
Detalles:
Una plantilla de cadena de caracteres que puede ser utilizada como etiquetado para la instancia de componente. La plantilla reemplzará el
innerHTML
del elemento montado. Cualquier etiquetado existente dentro del elemento montado será ignorado, a menos que los slots de distribución de contenido son presentes en la plantilla.Si la cadena de caracteres empieza con
#
, será utilizada como unquerySelector
y se utiliza el innerHTML del elemento eligido como la cadena de caracteres de plantilla. Este permite el uso del truco común<script type="x-template">
para incluir plantillas.Note
Desde una perspectiva de seguridad, debería solo utilizar plantillas de Vue en que confía. Nunca utilice contenido generado por el usuario como su plantilla.
Note
Si se encuentra función de render en la opción Vue, la plantilla será ignorada.
Vea también:
# render
Tipo:
Function
Detalles:
Una alternativa para plantillas de cadena de caracteres permitíendole apalancar el poder programático completo de JavaScript.
Uso:
<div id="app" class="demo"> <my-title blog-title="Un Vue Perfecto"></my-title> </div>
1
2
3const { createApp, h } = Vue const app = createApp({}) app.component('my-title', { render() { return h( 'h1', // nombre de la etiqueta, this.blogTitle // contenido de la etiqueta ) }, props: { blogTitle: { type: String, required: true } } }) app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19Note
La función
render
tiene prioridad sobre la función render compilada desde la opcióntemplate
o las plantillas HTML dentro del DOM del elemento montado.Vea también: Funciones de Renderización