Options: Rendering #

template #

A string template for the component.

• Тип:

  ts

  interface ComponentOptions {
    template?: string
  }
  

• Подробности:

  A template provided via the template option will be compiled on-the-fly at runtime. It is only supported when using a build of Vue that includes the template compiler. The template compiler is NOT included in Vue builds that have the word runtime in their names, e.g. vue.runtime.esm-bundler.js. Consult the dist file guide for more details about the different builds.

  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 source template to be authored using native <template> elements.

  If the render option is also present in the same component, template will be ignored.

  If the root component of your application doesn't have a template or render option specified, Vue will try to use the innerHTML of the mounted element as the template instead.

  Примечание о безопасности

  Only use template sources that you can trust. Do not use user-provided content as your template. See Security Guide for more details.

render #

A function that programmatically returns the virtual DOM tree of the component.

• Тип:

  ts

  interface ComponentOptions {
    render?(this: ComponentPublicInstance) => VNodeChild
  }
  
  type VNodeChild = VNodeChildAtom | VNodeArrayChildren
  
  type VNodeChildAtom =
    | VNode
    | string
    | number
    | boolean
    | null
    | undefined
    | void
  
  type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]
  

• Подробности:

  render is an alternative to string templates that allows you to leverage the full programmatic power of JavaScript to declare the render output of the component.

  Pre-compiled templates, for example those in Single-File Components, are compiled into the render option at build time. If both render and template are present in a component, render will take higher priority.

• См. также:

  • Rendering Mechanism
  • Render Functions

compilerOptions #

Configure runtime compiler options for the component's template.

• Тип:

  ts

  interface ComponentOptions {
    compilerOptions?: {
      isCustomElement?: (tag: string) => boolean
      whitespace?: 'condense' | 'preserve' // default: 'condense'
      delimiters?: [string, string] // default: ['{{', '}}']
      comments?: boolean // default: false
    }
  }
  

• Подробности:

  This config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser). It supports the same options as the app-level app.config.compilerOptions, and has higher priority for the current component.

• См. также: app.config.compilerOptions