Hello World
テキストHello Worldをrender関数を利用してブラウザ上に表示させるためには以下のような記述が必要となります。createElementでは第一引数に要素名、第二引数に要素の中に入る文字列を記述しています。
render関数の基本
render関数はと同じく、Vueコンポーネントにテンプレートを定義するためのものです。
render関数は引数にcreateElementを受けるので、それをhという名前にして使うのが一般的な作法です。
render: function (createElement) {
return createElement(App)
}
こうなって...
render (createElement) {
return createElement(App)
}
短くなって...
render (h) {
return h(App)
}
こうなる。
render: h => h(App)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<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>
styleの設定もする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World'
},
render: function(createElement){
return createElement('h1',{ style: 'background-color:red;color:white;' },this.message)
}
})
</script>
</body>
</html>
第１引数はタグ・第２引数はタグの開始タグ終了タグに挟まれた「テキスト情報」もしくは「値」が入ります。
これでわかるvue.jsのrender関数
https://reffect.co.jp/vue/vue-js-render