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

<!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>