Vue.jsにはrender関数というものがあります。Hello Worldの表示はVueインスタンスにdataを指定して、それを表示させるというシンプルな構造でした。templateとrenderにはそれぞれ特徴があるので両方学んでおくと良いですね。
render関数に触れてみる
Vue-cliをインストールするとrender関数に触れることができます。
Vue-cliのインストールは下記記事からどうぞ。
[Vue.js] Vue-CLIの使い方
[基本的なVue.jsのソース]
<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]
new Vue({
render: h => h(App),
}).$mount('#app')
renderとは
Vueインスタンスは
new Vue()で記載し、その中にオプションオブジェクトを指定してきますね。
dataやpropsなどもオプションオブジェクトです。
renderも同様です。
renderはHTMLをビルドする描画用の関数になっています。
<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>
<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]
<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>
