以前の記事でvue.jsの環境ができたので、今回はとりあえず入力した値を出力するところまでをまとめようと思います。
環境
- Vue.js 2.2.0
Vue.jsはバージョン1系から2系に上がって結構書き方とか変わってるようなので要注意です。
サンプル
いきなりですが、完成形です。
<!DOCTYPE html> <html> <title>vue.jsのテスト</title> <script src="https://npmcdn.com/vue@2.2.0/dist/vue.js"></script> <script src="main.js"></script> <body> <h1>テストでっせ</h1> <div id="sample"> <input type="text" v-model="text"> <p v-text="text"></p> </div> </body> </html>
window.onload = function(){ new Vue({ el: '#sample', data: { text: '', }, }) }
これでテキストボックスに打ち込むとその内容が下に出てくるサンプルが完成しました。
軽く解説
new Vue()でVueオブジェクトを作成します。 ここの部分です。
new Vue({ el: '#sample', data: { text: '', }, })
その際に、どのDOMに対するVueオブジェクトなのかを指定します。それが el: '#sample'の部分です。今回は id='sample'を指定しています。
dataでVueオブジェクトが持つパラメータを指定します。今回は空文字が入った textです。
次にテキストボックスに打ち込んだ時の動作を見てみます。重要なのはこの部分です。
<input type="text" v-model="text"> <p v-text="text"></p>
ざっくり言うと v-model=パラメータ名で指定したテキストボックスに入力すると、Vueオブジェクトのパラメータに入力されます。
そしてv-text=パラメータ名で指定した要素にはVueオブジェクトのパラメータから取り出した値が出力されます。
今回は <input type="text" v-model="text">でVueオブジェクトの textに打ち込んだ文字が入り、 <p v-text="text"></p>の部分でVueオブジェクトの textに入っている値が出力されます。
これでDOMとVueオブジェクトのデータの簡単なやり取りが実装されました。文字列の加工の処理を間に挟めば簡単なものなら作れそうですね。
おまけ
v-text の代わりに v-htmlを使えばHTMLのタグを入力するとエスケープされずに出力されます。
