# 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 un querySelector 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
    3
    const { 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
    19

    Note

    La función render tiene prioridad sobre la función render compilada desde la opción template o las plantillas HTML dentro del DOM del elemento montado.

  • Vea también: Funciones de Renderización