【初心者向け】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と表示されます。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@QA8SrqqPrVZPs6LSの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする