# DOM

# template

  • Type: string

  • Details:

    A string template to be used as the markup for the component instance. The template will replace the innerHTML of mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.

    If the string starts with # it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the use of the common <script type="x-template"> trick to include templates.

    Note

    From a security perspective, you should only use Vue templates that you can trust. Never use user-generated content as your template.

    Note

    If render function is present in the Vue option, the template will be ignored.

  • See also:

# render

  • Type: Function

  • Details:

    An alternative to string templates allowing you to leverage the full programmatic power of JavaScript.

  • Usage:

    <div id="app" class="demo">
      <my-title blog-title="A Perfect Vue"></my-title>
    </div>
    
    1
    2
    3
    const { createApp, h } = Vue
    const app = createApp({})
    
    app.component('my-title', {
      render() {
        return h(
          'h1', // tag name,
          this.blogTitle // tag content
        )
      },
      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

    The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element

  • See also: Render Functions