vue.jsでJSを別ファイルとする

vue.jsでJSを別ファイルとした場合の記述例とフォルダ構成は以下の通り。

 

hoge.htm

<!--★デザイン部-->
<html>
   <div id='app'> インスタンスの値を表示してみた<br>
   {{ name }}
</div>
</html>

<!--★veuライブラリを参照-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--★jsファイルをロード--★-->
<script src="src/hoge_lab.js"></script>

 

hoge_lab.js

new Vue({
   el: "#app",
   data: {
     name: "hogehoge",
     age: "99",
     counter: 0
},
methods: {
     increase: function() {
    this.counter += 1;
   }
  }
})

 

 

フォルダ構成

 hoge.htm

 src

    |---hoge_lab.js