【Vue.js】renderについて_その２

Vue.jsについて必要な知識をまとめました。
自身の備忘録として記載します。

render_タグの属性

renderプロパティの第２引数に属性の値を設定するオブジェクトを用意することができます。
例えば下記のように設定を行うと、”Hello World”のフォントサイズが10px、フォントカラーが青になります。

var data = {
    message: 'Hello World'
};

var app = new Vue({
    el: '#app',
    data: data,
    render: (element)=>{
        return element("p", 
            {'style':'font-size:10pt; color:blue;'}, 
            data.message);
    }
})

子ノードの組み込み

HTMLのタグを複数表示する際には第３引数（表示内容）をVNodeオブジェクトの配列にします。

関数（タグ名、{属性},[VNode,VNode,・・・・]）

以下、サンプルコードです。
<ol>と<li>を組み合わせてリストを表示させます。

var app = new Vue({
   el: '#app',
   data: data,
   render: (element)=>{
       return element("ol", 
       [
           element("li","test 1"),
           element("li","test 2"),
           element("li","test 3") 
        ]);
   }
})

複雑なVNodeの作り方

リストの内容を操作するためには、リストに表示するコンテンツのテキストもVueでバインドしないといけないのでさらに複雑になります。

例えば下記のようなタグの構造にする場合

<div>
　<p>テスト</p>
　<ol>
　　<li>項目</li>
　　・・・・略・・・・
　</ol>
</div>

div,p,ol,liと４種類のタグのVNodeを作成し、それらを階層的に組み込みながら作成しないといけません。

考え方としては下記のように構成していきます。

１.<li>タグのVNodeを作る
２.それを子ノードに設定して、<ol>のVNodeを作る
3.<p>のVNodeと、<ol>のVNodeを子ノードに設定して、<div>のVNodeを作る。

コード上だとこのようになります。

render: (element)=>{
 var p = element("p", 
   {style:'font-size:20pt;'}, 
   data.message);
 var li = data.items.map(item=> element('li', test));
 var ol = element("ol", li);
 var div = element("div", [p, ol]);
 return div;
}

参考URL

Vue.js & Nuxt.js超入門
https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339https://www.amazon.co.jp/dp/4798056596?tag=maftracking247988-22&linkCode=ure&creative=6339