オプション: レンダリング

template

コンポーネントの文字列テンプレート。

型

interface ComponentOptions {
  template?: string
}

詳細
template オプションで提供されたテンプレートは、実行時にオンザフライでコンパイルされます。これは、テンプレートコンパイラーを含んでいる Vue のビルドを使用する場合にのみサポートされます。vue.runtime.esm-bundler.js など、名前に runtime が入っている Vue のビルドにはテンプレートコンパイラーは含まれていません。各ビルドの詳細については、dist ファイルガイドを参照してください。
文字列が # で始まる場合は querySelector として使用され、選択された要素の innerHTML がテンプレート文字列として使用されます。これにより、ネイティブの <template> 要素を使用してソーステンプレートを作成できます。
同じコンポーネントに render オプションがある場合、template は無視されます。
アプリケーションのルートコンポーネントに template や render オプションが指定されていない場合、Vue はマウントされた要素の innerHTML を代わりにテンプレートとして使用しようとします。
セキュリティーに関する注意
テンプレートのソースは信頼できるものだけを使用してください。ユーザーが提供したコンテンツをテンプレートとして使用しないでください。詳しくはセキュリティーガイドを参照してください。

render

コンポーネントの仮想 DOM ツリーをプログラムで返す関数。

型

interface ComponentOptions {
  render?(this: ComponentPublicInstance) => VNodeChild
}

type VNodeChild = VNodeChildAtom | VNodeArrayChildren

type VNodeChildAtom =
  | VNode
  | string
  | number
  | boolean
  | null
  | undefined
  | void

type VNodeArrayChildren = (VNodeArrayChildren | VNodeChildAtom)[]

詳細:
render は文字列テンプレートに代わるもので、JavaScript のプログラミング能力をフルに活用してコンポーネントのレンダリング出力を宣言できます。
単一ファイルコンポーネントのような、あらかじめコンパイルされたテンプレートは、ビルド時に render オプションにコンパイルされます。render と template の両方がコンポーネント内に存在する場合は render の方が優先されます。
参照:
- レンダリングの仕組み
- レンダー関数

compilerOptions

コンポーネントのテンプレートのランタイムコンパイラーオプションを設定します。

型

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

詳細
この設定オプションは、フルビルド（つまり、ブラウザー上でテンプレートをコンパイルできるスタンドアロンの vue.js）を使っているときだけ反映されます。アプリケーションレベルの app.config.compilerOptions と同じオプションをサポートし、現在のコンポーネントに対してより高い優先順位が設定されています。
参照: app.config.compilerOptions

このページを GitHub で編集

オプション: レンダリング #

template #

render #

compilerOptions #

オプション: レンダリング

template

render

compilerOptions