概要
Vue.jsにはVue.jsの仕組みで説明したように{{}}記号で値をはめ込んで表示させることができますが、複雑な表示を行いたい場合は{{}}だけでは難しいです。
このような場合はrenderプロパティを利用します。
renderとは
renderとはVueが用意したレンダリング用のプロパティのことで、レンダリングとはデータをもとに画面表示を作成する処理のことを言います。
以下のように実装することでHTMLのエレメントを生成して組み込むことができるようになります。
render: (element) => {
return element(タグ名, 属性情報, 表示する値);
}
これは関数のようなものでelementには引数を入れます。
タグのところには追加するタグ名を書きます。
<p>の場合は"p"となります。
表示する値には実際に表示するテキストを設定します。
属性というのは一言で言うとフォントサイズやテキストの色などを変更するための情報のことを言います。
element引数にはエレメントをレンダリングする関数が渡されています。
この関数でreturnしているのはVNodeと呼ばれる仮想DOMと呼ばれるものです。
仮想DOMについて
そもそも仮想DOMとはなんなのかについて補足します。
まず、JavaScriptでHTMLタグを操作する場合はDOM(Document Object Model)と呼ばれる仕組みを利用しています。
通常JavaScriptでなんらかの表示を行う際はHTMLを読み込んだ段階でHTMLタグのエレメントを作成します。
このように作られた構造のことをDOMツリーと言います。
Vue.jsではこれの仮想版DOMツリーを使っています。
では通常のDOMと何が違うのか？
通常のDOMではその状態を常にチェックすることはできないので、チェックしたい場合はそのような処理を書かないといません。
ですが、仮想DOMの場合は常にその状態が管理され変更があり次第DOMに即時反映されます。
まとめ
- Vueで複雑な表示をしたい場合は
renderプロパティを利用します。 -
renderにタグ名, 属性情報, 表示する値を設定することでHTMLエレメントを生成してくれます。 - Vue.jsでは仮想DOMを利用してHTMLタグを操作しています。