Vue.jsのテンプレートの書き方メモ

Vue.jsの様々なテンプレート記述方法

公式サイトが非常に丁寧に説明されており、だいたい公式サイトで解決できてたのですが、
テンプレートの宣言方法はネット上にも様々なパターンがあり、長く混乱に陥っていたがやっと大悟したので、ここにまとめておきます。

基本的な宣言

index.html

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

app.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

少しややこしい宣言

Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 3/4
この記事にある宣言方法
index.html

<div id="app">
</div>

app.js

const app = new Vue({
  el: '#app',
  render: h => h(require('./app.vue')),
}).$mount('#app')

el: ‘#app’と$mount(‘#app’)は同じ役割なのでどちらか一方でいいです。(タイミングは異なる)
renderの記述は以下の2記事を参照してください。
Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
( ᐛ )σ「render: h => h(App) 」

上の記述は以下のように書き換えることができる。
index.html

<div id="app">
  <app></app>
</div>

app.js

Vue.component('app', require('./app.vue').default);
new Vue({
    el: '#app',
})

全然まとまってないが、同じ箇所で悩んだ人の助けになれば。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD