Vueコード進め方

雛形コードで git clone した方は既に記載されているので、そのままVueコードを進めてください。

1. Vue.js の読み込みをする。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 追加 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div>
      <h1>Test</h1>
    </div>
  </body>
</html>

2. js ファイルを作成する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div>
      <h1>Test</h1>
    </div>
    
    <!-- 追加 -->
    <script src="app.js"></script>
  </body>
</html>

3. Vue インスタンスを作成。

<div id="app">
  <h1>Test</h1>
</div>
new Vue({
  el: '#app',
});

上記手順が終わったらVueコードを進めてください。

Last updated