vue.jsの勉強記録

Vue.js

はじめに

今回はvue.jsの勉強にてCDNを使った場合のファイルを分けて書く方法を記述していく。

vue.jsのファイル分け方について

ファイル構造を

vue_practice
├── index.html
└── main.js

にするためには、index.html内のjsファイルの読み込みをvue.jsの読み込みの後ろに記述してあげることでファイルを分けてもvueが書かれたjsファイルを読み込んでくれる。また、vue.jsの読み込みはbodyタグの後ろに来る必要がある。(以下が例)

~中略~

  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="main.js"></script>
</html>

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

終わりに

CDNを用いたvue.jsのファイル分けの仕方を勉強した。