Vue VNode render での element() での html tag の作成
参考
Vue.js & Nuxt.js 超入門 Ch 02 88P
子ノードの組み込み
render で element を直接書く
普段とどう違うのか
普段書いている template に html タグや Vuetify タグなどは、
最終的に createElement で出力されている
今回は element を直接 render するときに式で書き込むのを試してみる
前提条件
前回の記事で作った最小限の html js を使う
ググっても render component は出るが render element はでない
Vue.component で中身を書いていく方式や
createElement で作成していく方式しか見つからなかった。
一つの element を直接 render の返り値に書く
<!DOCTYPE html> <html lang="en"> <head> <title>Vue Simple</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ msg }} </div> <script src="index.js"></script> </body> </html>
var app = new Vue ({ el: "#app", data: { msg: 'message' }, })
このようになっている Vue の基本構成に render を追加して
render: (element) => { return element("h1", "Hello Vue Element" ) },
こう書くことで、html の出力が
<body> <h1>Hello Vue Element</h1> <script src="index.js"></script> </body>
こうして h1 タグで囲われて、中身が H1 Element の物のみが出力される。
data は表示されない。
element 関数の引数1 に タグ、引数 2 に中身を入れて render で返すと
html にしてくれることがわかった
配列で Element の中に Element を入れる
先ほどの return の 第一引数のタグの中に、
子供 Element として、配列で Element を入れることができる
render: (element) => { return element("ol", [ element("li", "list 1"), element("li", "list 2"), element("li", "list 3"), ] ) },
こう書くこととで
<ol><li>list 1</li><li>list 2</li><li>list 3</li></ol>
ol の中に 3 つの li
この html が出力される
まとめ
Vue の render では element 関数で、html タグを出力できる
参考
render: h => h(app) についての解説記事
