Vue.jsがめちゃ使いやすいので忘備録

2017/03/26

最近、ReactとかVue.jsとか、JavaScript周辺で新しい技術を目にするのですが、どれがどうなのかよくわからず遠目で眺めていたのですが、一通り眺めてみると、Vue.jsが体感的に覚えやすそうだって感じがしたので、忘備録兼ねて触りを書いておきます。

[ad#top-1]

1 まずは今回の完成形
2 公式サイト
3 Vue.jsの基本形
4 テキストボックスと連動させるには

まずは今回の完成形

Vue.jsのデモで一番多いのが、テキストボックスに文字をタイピングするたびに、別の場所に文字が現れるやつです。僕も今回それを作りましたが、めちゃ簡単に作れてびっくりしました。

公式サイト

Vue.jsの公式サイトは、https://jp.vuejs.org/ です。ここから、Vue.js本体をダウンロードできます。

ただ、僕はダウンロードせずに、以下のようにリンクアドレスを指定しました。

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>

アドレスは、公式ガイドのInstallationの中にあります。cdnjsというリンクを探して、右クリックでリンクのアドレスをコピーすればGETできます。

Vue.jsの基本形

まずは基本形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue.js Demo</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

上のコードをブラウザで開くと以下の通り、「Hello Vue!」が表示されます。

簡単に解説すると、この部分によって

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

この{{message}}に「Hello Vue!」が入るわけです。

<div id="app">
<p>{{ message }}</p>
</div>

テキストボックスと連動させるには

さて、今回のゴールであるテキストボックスのタイピングとれんどうさせる方法ですが、10行目を加えるだけです。たった1行加えるだけ。

テキストボックスにmessageという変数(←この表現でいいのか？)がセットされるので、それだけで、{{message}}と連動しちゃうという優れものです。いやー、この簡単さにはびっくりしました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue.js Demo</title>
</head>
<body>
  <div id="app">
    <input v-model="message">  <-- これを加えるだけ -->
    <p>{{ message }}</p>
  </div>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      }
    })
  </script>
</body>
</html>

上のコードをブラウザで開くと以下の通りになります。

[ad#ad-1]