BETA

【初心者向け】Vue.jsの双方向データバインディング

投稿日:2018-10-31
最終更新:2018-10-31

双方向データバインディングとは

  • データとUIを結びつける
  • ここで言う双方向とはデータを更新すればデータが更新されて、データが更新されればUIが更新される

文章だけだとなかなか分かりづらいので例を上げてみます。

実例

main.js

(function(){
  "use strict";
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'masha'
    }
  });
})();

vmという変数に対してnew Vueしてあげます。 new Vue = Vueのインスタンス作成と考えて良いと思います。 続いて、elというキーを指定し、cssセレクタ同様'#app'と指定します。 このモデルにデータを保持してもらうため、dataというキーを指し、nameというキーでmashaというデータを指定します。

以下のHTMLでmain.jsのデータをUIに反映させてみましょう。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <div id="app">
    <p>Hello {{ name }}!</p>
    <input type="text" v-model="name"></input> 
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>//CDNを読み込む
  <script src="js/main.js"></script>//JSの読み込み

</body>
</html>

上記の通りJavaScript側のデータは{{ }}で表現できます。 先程main.js内で、dataには、nameというキーでmashaというデータを指定していしたので、Hello {{ name }}とすると、UIではHello mashaと表示されます。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@QA8SrqqPrVZPs6LSの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!