はじめに

Vue.jsの入門その4です。今回は、chapter2のsection2です。

render入門

ここではrenderの入門をします。

renderの実装

Vueオブジェクトを生成する部分に着目すると以下の部分です。

// 全体
  new Vue({
    el: '#app',
    data: data,
    render: (element) => {
        return element("p", data.message);
    }

// この部分
render: (element) => {
        return element("p", data.message);
    }

HTMLの確認

以下のようにPタグが挿入されています。 f:id:set21set21:20210811182632p:plain

renderの属性の設定

renderの第2引数に属性を設定することができるようです。試しに以下のように第2引数にstyleを設定してみます。

  new Vue({
    el: '#app',
    data: data,
    render: (element) => {
        return element(
        "p", 
        {'style':'color:blue;'},
        data.message
    );
    }
  })
// この部分の第2引数です。
        return element(
        "p", 
        {'style':'color:blue;'},
        data.message
    );

画面表示

以下のようにcolor:blueとした設定が反映されました。 f:id:set21set21:20210811184907p:plain

renderで子ノードの組み込み

HTMLの要素で子要素が必要な場合に以下のような実装をすることで作ることができます。

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

// この部分です(第3引数の配列のところ)
    render: (element) => {
        return element(
        "ol", 
        { 'style':'color:red;'},
        [
            element("li", "test 1"), 
        element("li", "test 2")
        ]
    );
    }

renderのelementのここまでのまとめ

ここまではおおよそ以下のような形で設定してきました。

element(HTMLのタグ,(option)css,設定する値（HTMLも設定できる）)

※第2引数は省略することができます。

複雑な実装

前述した実装をさらに複雑にする必要がある場合、この実装だとメンテナンスが大変になります。そんなときにJavaScriptで効率的に作成することが可能です。

例

<body>
  <h1>Vue.js</h1>
  <div id="app">
    {{ message }}
  </div>
  <hr>
  <button onClick="doAction();">
  click
  </button>
  <script>
  var data = {
      message: 'hello',
      items: ['test1','test2','test3']
  };
  new Vue({
    el: '#app',
    data: data,
    render: (element) => {
        var pElement = element(
        "p", 
        {'style':'color:blue;'},
        data.message
    );
    var li = data.items.map(item => element('li', item));
    var ol = element("ol", li);
    var div = element("div", [pElement, ol]);
    return div
    }
  })
  function doAction() {
      // data.message = "click";
      var insertData = ['new1', 'new2', 'new3', 'new4'];
      data.message = 'clicked';
      for (n in data.items) {
          data.items[n] = insertData[n];
      }
  }
  </script>
</body>

まとめ

renderを使って{{}}の中に文字を入れたりHTMLを動的に入れたりという機能を試してみました。また次以降のsectionに取り組んでいきます。

set21set21のブログ

vue.js入門4