最小構成でテキストを出力してみる！

概要

Vue.js は、フロントエンド開発するために作られた JavaScript のフレームワークです。Angular や React よりも、ユーザーが見る画面に焦点を当てており、理解しやすくなっています。今回は Vue.js の基本的な使い方を学ぶため、CDN を使って HTML に直接 Vue.js を埋め込んで、最小限の構成でテキストを出力する方法を紹介します。

Vue.js の HelloWorld

Vue.js の基本を学ぶため、HelloWorld の実装を見ていきましょう。

<html>
  <head>
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <div id="app">
    <body>
      <div id="intro" style="text-align: center">
        <h1>{{ message }}</h1>
      </div>
    </body>
  </div>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

作成した html ファイルをプラウザで開いてみてください。
以下が表示されるはずです。

それぞれ解説します。

<script src="https://unpkg.com/vue@next"></script>

CDN で外部の Vue.js 本体を読み込んでいます。

<div id = "intro" style = "text-align:center;">
   <h1>{{ message }}</h1>
</div>

HTML タグで{{ message }}変数を出力しています。
message 変数は、以下の Vue.js コードで定義します。

const { createApp } = Vue;
createApp({
  data() {
    return {
      message: "Hello World",
    };
  },
}).mount("#app");

上記のコードは、HTML に直接 Vue.js を埋め込んで実装した最小構成の Hello World です。 createApp で Vue.js のインスタンスを呼び出し、その後、mount で Vue.js インスタンスを HTML の要素に紐付けています。また、data オブジェクト内で message 変数を定義しています。この変数は、HTML 側で{{ message }}として呼び出され、Hello World という文字列を表示します。

それでは、ブラウザで HTML ファイルを開いてみましょう。以下の画像のように、「Hello World」と表示されるはずです。

以上が、Vue.js を使った Hello World の最小構成の実装方法です。是非、自分で手を動かして試してみてください。ダウンロードはこちらからできます。

https://github.com/wiblok/Vue.js

以上、Vue.js 入門｜最小構成でテキストを出力してみる！でした。

最小構成でテキストを出力してみる！

概要 #

Vue.js の HelloWorld #

概要

Vue.js の HelloWorld