DOM

template

• Tipo: string

• Detalhes:

  Um template string a ser usado como marcação para a instância do componente. O template substituirá o innerHTML do elemento montado. Qualquer marcação existente dentro do elemento montado será ignorada, a menos que os slots de distribuição de conteúdo estejam presentes no template.

  Se a string começar com # ela será usada como um querySelector e usará o innerHTML do elemento selecionado como a template string. Isso permite o uso do truque comum <script type="x-template"> para incluir templates.

  Nota

  De uma perspectiva de segurança, você deve usar apenas templates Vue nos quais possa confiar. Nunca use conteúdo gerado pelo usuário como seu template.

  Nota

  Se a função de renderização estiver presente na opção Vue, o template será ignorado.

• Ver também:

  • Diagrama do ciclo de vida
  • Distribuição de conteúdo com slots

render

• Tipo: Function

• Detalhes:

  Uma alternativa aos templates string, permitindo que você aproveite todo o poder programático do JavaScript.

• Uso:

  <div id="app" class="demo">
    <my-title blog-title="Uma Vue (view) Perfeita"></my-title>
  </div>
  

  const { createApp, h } = Vue
  const app = createApp({})
  
  app.component('my-title', {
    render() {
      return h(
        'h1', // nome da tag,
        this.blogTitle // conteúdo da tag
      )
    },
    props: {
      blogTitle: {
        type: String,
        required: true
      }
    }
  })
  
  app.mount('#app')
  

  Nota

  A função render tem prioridade sobre a função de renderização compilada da opção template ou o template HTML no-DOM do elemento sendo montado

• Ver também: Funções de Renderização