[その1](http://yk0807.com/larablog/posts/11)に続いて今回はVue.js入門編その2です。前回がテンプレート構文までやったので、今回はv-onからです。 # 6. v-on ボタンをクリックしたときなどのイベントの処理を行うのには、v-onと言うものを使います。 例えば、クリックするたびに数字が増えていくようなテキストを考えてみます。 ```js var app2 = new Vue({ el:'#app2', data: { count: 0 }, methods: { countUp: function() { this.count++; } } }); ``` ```html <div id="app2"> <div v-text="count"></div> <button v-on:click="countUp">カウントを増やす</button> </div> ``` こうすると、「カウントを増やす」ボタンの上に最初０が表示されているのが、ボタンを押すたびに数字が増えていくのがわかります。 イベントにはクリックの他にもキーボードのあるキーを離したときのkeyupとか、色々あるので調べてみてはどうでしょうか。 また、v-on:は@で省略して書くこともできます。`@click="countUp"`という書き方もできたりします。 # 7. v-model フォームに入力した値をVueオブジェクトに受け渡すときに使うのがv-modelです。例えばテキストフォームに入れた文字列をmessageというdataに送ることを考えてみます。 ```js var app3 = new Vue({ el:'#app3', data: { message: '' } }); ``` ```html <div id="app3"> <p>{{ message }}</p> <input type="text v-model="message"> </div> ``` こうすると、テキストフォームに"こんにちは"と書くとテキストフォームの上に"こんにちは"と表示されます。 # 8.v-show, v-if 画面の中で必要に応じてある箇所を表示するかどうか指定できるようにしたい時があります。そういうときにv-showやv-ifと言うものを使います。 ```js var app4 = new Vue({ el:'#app4', data: { flg1: 0, flg2: 0 } }); ``` ```html <div id="app4"> <span>v-show</span><input type="checkbox" v-model="flg1" value="1"> <span>v-if</span><input type="checkbox" v-model="flg2" value="1"> <p v-show="flg1">こんにちは</p> <p v-if="flg2">おはよう</p> </div> ``` この2つは一見似ているのですが、v-showは要素にdisplay:noneを割り当てるのに対し、v-ifは要素そのものを消すという違いがあります。 また、v-ifに対してv-elseで条件を満たさないときに表示されるというものがあります。ちなみに、**一般のプログラミング言語のelseifにあたるv-else-ifはVue2.1からなので、気をつけてください。** # 9.v-for 配列の要素などを繰り返し表示するのにはv-forを使います。条件分岐に繰り返しもあって、まるでVue.jsそのものが1つの言語みたいな感じですね。 使い方としては、こんな感じです。 ```js var app5 = new Vue({ el:'#app5', data: { prefectures: [ "Tokyo", "Osaka", "Aichi", "Hokkaido" ] } }); ``` ```html <div id="app5"> <ul> <li v-for="pref in prefectures"> {{ pref }} </li> </ul> </div> ``` こうすると、上から順に「Tokyo」、「Osaka」、「Aichi」、「Hokkaido」と表示されます。 # 終わりに（簡単なまとめとおわび） Vue.jsシリーズその2で紹介するのはここまでになります。今回紹介したかったpropsやコンポーネント、後はv-bindとかカスタムディレクティブあたりはその3で紹介することにします。 それでも、その1とその2で紹介した機能だけでも結構いろいろなことが出来たりします。例えば、[ドットインストール](http://dotinstall.com/)（[こちらの記事](http://yk0807.com/larablog/posts/3)でも紹介しています）の「Vue.jsでToDo管理ツールを作ろう」は今まで紹介した機能だけで出来ています。 後、1つおわびなのですが、実は現時点（2017.8.31）でこの自作ブログに1つバグがあります。 具体的には、マークダウンで記述されている記事の表示部に{{}}と書くとその中がVue.jsの変数として解釈されてしまうらしく、特にその中の変数にメソッドを使っている記述をしたりすると、エラーになってうまく表示されないようです。 [前回の記事](http://yk0807.com/larablog/posts/11)のテンプレート構文でmessage.substr(2,4)の外の波かっこの間にスペースが入っていると思いますが、これはその問題の回避のために一時的にそうしています。 現在いろいろ調べているところですが、少しでも早く解決して修正しようと思います。