Sample List

【Vue.js】No.001 とりあえず触れるしかない

単純にデータを描画してみる

公式のガイドを参考にまずはVueを読み込んでみます。

<script src="https://unpkg.com/vue"></script>

今回の方法ですと、常に最新版を引っ張ってくるという感じのようです。
もちろん、jsを自サーバにアップして読み込んだりも可能なようですが、ひとまず一番手っ取り早そうだったCDN読み込みでやってみようと思います。

続いて、以下のようにJS記述。

var test = new Vue({
  el: '#test',
  data: {
    message: 'テストです!'
  }
} );

HTML側はこのように。

<p id="test">
    {{ message }}
</p>

すると…

{{ message }}

と出力されるといった流れですね。

テキストボックスに入力された値を描画してみる

まずはJS。

var textdata = new Vue({
  el: '#textdata',
  data: {
    message: 'テキストボックスの値'
  }
} );

続いて、HTML。

<div id="textdata">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

これで完了です。後は下記のテキストボックスにて実際に試してみましょう。

入力内容:{{ message }}

どうでしょう?入力内容がリアルタイムで反映されたかと思います。
こんなにもあっさりとデータのやり取りができてしまうのですね…これはちょっと面白そうです!

一覧に戻る