簡単なVue.jsの利用

2024 6/07

2023.08.02 2024.06.07

Vue.jsを簡単に使用するにはCDNを使用すれば簡単にHTMLファイルで使用する事ができます。

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3について</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <!-- Vue3をCDNで使用 -->
    <script src="https://unpkg.com/vue@next"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            message: "Vue3です!",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

出力結果

Vue3です!

記法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue2について</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <!-- Vue2をCDNで使用 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

    <script>
      let app = new Vue({
        el: "#app",
        data() {
          return {
            message: "Vue2です!",
          };
        },
      });
    </script>
  </body>
</html>

出力結果

Vue2です!