本文へジャンプ

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

template

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

  • ts
    interface ComponentOptions {
      template?: string
    }
    
  • 詳細

    template オプションで提供されたテンプレートは、実行時にオンザフライでコンパイルされます。これは、テンプレートコンパイラーを含んでいる Vue のビルドを使用する場合にのみサポートされます。vue.runtime.esm-bundler.js など、名前に runtime が入っている Vue のビルドにはテンプレートコンパイラーは含まれていません。各ビルドの詳細については、dist ファイルガイドを参照してください。

    文字列が # で始まる場合は querySelector として使用され、選択された要素の innerHTML がテンプレート文字列として使用されます。これにより、ネイティブの <template> 要素を使用してソーステンプレートを作成できます。

    同じコンポーネントに render オプションがある場合、template は無視されます。

    アプリケーションのルートコンポーネントに templaterender オプションが指定されていない場合、Vue はマウントされた要素の innerHTML を代わりにテンプレートとして使用しようとします。

    セキュリティーに関する注意

    テンプレートのソースは信頼できるものだけを使用してください。ユーザーが提供したコンテンツをテンプレートとして使用しないでください。詳しくはセキュリティーガイドを参照してください。

render

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

  • 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 は文字列テンプレートに代わるもので、JavaScript のプログラミング能力をフルに活用してコンポーネントのレンダリング出力を宣言できます。

    単一ファイルコンポーネントのような、あらかじめコンパイルされたテンプレートは、ビルド時に render オプションにコンパイルされます。rendertemplate の両方がコンポーネント内に存在する場合は render の方が優先されます。

  • 参照:

compilerOptions

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

  • ts
    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

オプション: レンダリングが読み込まれました