Vue.jsにはrender関数というものがあります。Hello Worldの表示はVueインスタンスにdataを指定して、それを表示させるというシンプルな構造でした。templateとrenderにはそれぞれ特徴があるので両方学んでおくと良いですね。
Contents
render関数に触れてみる
Vue-cliをインストールするとrender関数に触れることができます。
Vue-cliのインストールは下記記事からどうぞ。
[Vue.js] Vue-CLIの使い方
[基本的なVue.jsのソース]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <meta charset="utf-8"> <title>vue hello world!</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app">{{ message }}</div> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> </body> </html> |
Vue-cliのmain.jsファイルのVueインスタンスを見てみると、dataではなく、renderが出てきます。
ソースを見てみると、関数の形をしているようです。
[Vue-cliのmain.js]
|
0 1 2 3 4 |
new Vue({ render: h => h(App), }).$mount('#app') |
renderとは
Vueインスタンスは
new Vue()で記載し、その中にオプションオブジェクトを指定してきますね。
dataやpropsなどもオプションオブジェクトです。
renderも同様です。
renderはHTMLをビルドする描画用の関数になっています。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <meta charset="utf-8" /> <title>vue hello world!(component ver)</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <hello-world></hello-world> </div> <script> Vue.component('hello-world', { template: '<h1>Hello World</h1>', }); var app = new Vue({ el: '#app', data: {}, }); </script> </body> </html> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <meta charset="utf-8" /> <title>vue render </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <body> <div id="app"></div> <script> var app = new Vue({ el: '#app', render: function(createElement){ return createElement('h1','Hello World') } }) </script> </body> </html> |
今度はrenderとdataを連動させてみます。
[renderとdata]
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html> <head> <meta charset="utf-8" /> <title>vue render </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <body> <div id="app"></div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello World' }, render: function(createElement){ return createElement('h1',this.message) } }) </script> </body> </html> |
