Vue 描画について

”Mustache” 構文(二重中括弧)を利用したテキスト展開

”Mustache”とは口ひげの意味

プロパティ名を書くことで表示できる

<div id="app">
    <p>{{ message }}</p>
  </div>

new Vue({
  el: '#app',
  data: {
    message: "hello world"
  }
})

---

templateプロパティを使って表示

HTMLの方に書いていたものをそのまま書ける

<div id="app2"></div>

new Vue({
  el: '#app2',
  data: {
    name: "John"
  },
  template: "<h1>hello {{ name }}</h1>"
})

---

render関数を使って描画する

 <div id="app3"></div>

new Vue({
  el: '#app3',
  data: {
    name: "山田"
  },
  render: function(h) {
    return h("p", "こんにちは" + this.name + "さん" )
  }
})

VueCLIを使うとmain.jsに最初からある

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

どんなものがあるか簡単に書いてみました。