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