データをそのまま表示する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ messages }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            messages: "Hello, World"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

v-text を利用して表示するには、以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-text="messages"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            messages: "Hello, World"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

HTML タグとして解釈させたい場合は、v-html を利用します。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-html="messages"></p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            messages: "<h1>Hello, World</h1>"
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

マスタッシュタグと v-text は、HTML タグをエスケープします。HTML タグとして利用したい場合は、v-html を使います。

クリックした回数を表示する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ count }}</p>
      <button v-on:click="countUP">button</button>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            count: 0
          };
        },
        methods: {
          countUP: function(){
            this.count++;
          }
        }
      }).mount('#app');
    </script>
  </body>
</html>

さまざまな型のデータを表示

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ text }}</p>
      <p>{{ num }}</p>
      <p>{{ bool }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            text: "hello",
            num: 1234,
            bool: true
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

配列の表示

配列の値を表示するには、以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ fruits }}</p>
      <p>{{ fruits[0] }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            fruits: ["apple", "orange", "banana"]
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

オブジェクトを表示する

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ member.name }}</p>
      <p>{{ member.age }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            member: { name: "Taro", age: 20 },
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

2次元連想配列として扱うには、以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ member[1].name }}</p>
      <p>{{ member[1].age }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      createApp({
        data: function(){
          return {
            member: [
              { name: "Taro", age: 20 },
              { name: "Jiro", age: 15 }
            ]
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>

createApp の外で変数を定義し読み込む場合は、以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ members[1].name }}</p>
      <p>{{ members[1].age }}</p>
    </div>

    <!-- Vue アプリケーション -->
    <script>
      const { createApp } = Vue;

      const memberList = [
        { name: "Taro", age: 20 },
        { name: "Jiro", age: 15 }
      ]

      createApp({
        data: function(){
          return {
            members: memberList
          };
        }
      }).mount('#app');
    </script>
  </body>
</html>