Vue.js Render関数のサンプルコード

Vue.js Render関数のサンプルコード

vue-cliを利用してプロジェクトを作成すると、main.jsに render: h=> h(App)と記述されており、 こちらのrenderの挙動を確認したかったので、確認用のサンプルコードを掲載。

環境

  • OS windows10 pro
  • エディタ VScode

render: h => h(App)について

render: h => h(App) は、下記のコードの略のようです。

サンプルコード

render関数を利用したサンプルコードです。 下記のソースコードをindex.htmlとして作成してブラウザで確認します。

保存したファイルをブラウザで開いて確認。

により、<h3>ダグが生成されて Hello World と表示されます

なので、main.js内の下記のコードはrender関数によりApp(App.vue)が id app( <div id=”app”></div> )にマウントされているという意味になります。