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

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

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

基本的な宣言

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

少しややこしい宣言

Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 3/4 - Qiita
# 目次 四部作です。 1. ( - (

この記事にある宣言方法

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

el: ‘#app’と$mount(‘#app’)は同じ役割なのでどちらか一方でいいです。(タイミングは異なる)
renderの記述は以下の2記事を参照してください。

Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ
Vue2.xから仮想DOMが使われるようになり、1.x系と同様にtemplateを書くと動かないケースが出てきたりします。コンパイルをすることで→に変換してくれるものの、コンパイルの仕様も複雑で一筋縄ではいかないことも…。そんな悩みと今日でおさらばしましょう💡
( ᐛ )σ「render: h => h(App) 」 - Qiita
```js:vue-cli/weboack-simple/main.js new Vue({ el: '#app', render: h => h(App) }) ``` vue-cliでwebpack-simpleテンプレ...

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

<div id="app">
  <app></app>
</div>
Vue.component('app', require('./app.vue').default);
new Vue({
    el: '#app',
})

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

コメント