Vue.jsでデータバインディング - コツコツ学習ブログ

データバインディングの身近にある例としては、例えばあるWebサービスがあって、その中で何かの計算を行う機能があったとして、数字を入力したらリアルタイムで計算結果が画面に表示されるようなイメージです。 (値が変更されるごとに計算処理は走るようなイメージ)

Vue.jsではごく簡単に実装できます

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Vue.js 3</title>
</head>

<body>
  <!-- Vuejsを適用するフィールド -->
  <div id="app">
    <!-- マスタッシュ構文でテキスト展開 -->
    <p>{{message}}</p>
    </form>
  </div>  　
  <script src="https://unpkg.com/vue@3.1.5"></script>
</body>
</html>

const app = Vue.createApp({
  
  data: () => ({
    message: '吉良吉影は静かに暮らしたい'

  })
})
app.mount('#app')

実行すると、p部分がVueインスタンスで定義したmessageに置き換わります。重要なのは{{}}のマスタッシュ構文を、Vueが適用されているid=appの中で使用することです。

dataはテンプレート側から参照できる値を格納したオブジェクトです。