情報自炊

情報を血肉にしたい

Vue.js&Nuxt.js超入門 Chapter2(その1)

p68-p88を学習。

メモ

ムスタシェ構文

{{ message }}
{
  el: 対象,
  data: { ... 設定する値のデータ ... }
}

{{message}} の部分にバインドされている変数の値を変更すると、表示されている値を変更することができる。

式を書くことも可能

{{ message.toUpperCase() }}
{{ message * 1.08 + "円" }}

ただし複雑な処理は書かず「処理はスクリプトに表示はHTMLに」をこころがけること。

render

render: (element)=>{ ...描画処理... }
render: (element)=>{
  return element("p", data.message);
}

属性も書ける

return element("p",
  {"style": "font-size:20pt; color:red;"},
  data.message);
}

小要素

return element("ol",
 [
   element("li", "item 1"),
   element("li", "item 2"),
   element("li", "item 3")
 ]);