イイダリョウのブログ。Vue.js」の続きです。!」という文字を表示しました。これだけならjQueryや生JSでもできるわけなので、もう少し進めてみる。基本編として、チュートリアルでまず目についた「イベント」「分岐」「ループ」をやってみた。クモのようにコツコツとVue.jsのディレクティブVue.jsには「ディレクティブ」という独自の属性があります。頭にv-が付くのが特徴です。Vue.js前回の記事で触れたように「リアクト」は反応する、という意味。属性値の式の結果に反応してDOMの内容を変化させます。代表的な例としてはイベント、分岐、ループがあります。「JSの基本-後編」で触れたイベントと分岐、ループと似たディレクティブ名が付いているのでイメージしやすいと思います。クモのようにコツコツとイベント(v-on)Vue.jsのイベントのディレクティブはv-onです。チュートリアルを参考にいくつか作ってみました。Vue.jsこちらはチュートリアルの一番最初にあるカウントアップの事例を改造しています。年目の浮気ぐらい大目に見てよ」というテキストの下に「馬鹿いってんじゃないわ」というボタンがありますね。年目」の数字がカウントアップしていきます。ほんと、馬鹿いってんじゃないですよね。※参考:ちなみに元ネタはコチラ...YouTubeさて、このカウントアップはどのような仕組みになっているのか見ていきましょう。1">馬鹿いってんじゃないわ</button></div>一番外側がid#payappaのdiv要素。}}で囲ったcounterがある。v-onは「イベント」のディレクティブです。続く:hogeは「キー修飾子」といい:clickはクリックイベントです。属性値はcounterに1加算するという式が書いてあります。次はJSを見ていきましょう。}})変数payappaでVueインスタンスを作成。引数のに連想配列が入っている。}ブロック)elキーの値でid#payappaの要素と紐づいている。dataキーの値が入れ子の連想配列になっている入れ子の中のcounterキーの値に3が入る。counterに3が入ることで「3年目」になり、v-on:clickのbutton要素をクリックするたびにcounterの数値が1ずつカウントアップするわけです。メソッドイベントハンドラv-on:clickの属性値の中に毎回式を書くのは再利用性が低く、複雑なコンテンツを作ることができません。そこで、属性値にはイベントハンドラのメソッド名のみを書くほうが多くなってきそうです。!」というアラートが出ました。コードを見ていきましょう。v-on:click="aisatsu">押してちょ</button></div>外側はid名#btnのdiv要素button要素の属性はv-on:clickで属性値はaisatsuHTMLはシンプルですね!属性値のaisatsuがイベントハンドラのメソッド名です。JSを見ていきましょう。}変数btnにVueインスタンスを作成。無名関数の中にはアラートで「こんにちは」とnameの値と「!」を合わせるdataキーまでは最初の事例と同じ構成ですね。次のmethodsキーでメソッドを作ります。aisatuがメソッド名です。アラートの引数の中でnameキーの文字列を呼び出しています。インラインメソッドハンドラ次は「インラインメソッドハンドラ」という事例です。ボタンを押してください。朝は「おはよう」、昼は「こんにちは」、夜は「こんばんは」という挨拶が頭につきます。コードを見ていきます。v-on:click="say('こんばんは')">夜だ</button></div>ボタンが3つに増えました。v-on:clickの属性値はsay()メソッド。「朝」ボタンのsay()メソッドの引数は「おはようございます」。「昼」ボタンのsay()メソッドの引数は「こんにちは」。「夜」ボタンのsay()メソッドの引数は「こんばんは」。アラートの頭の挨拶はきっとこの引数を読み込んでいるに違いない、と想像できますね。JSを見てみましょう。}})先ほどのメソッドイベントハンドラととてもよく似ていますね。違うのはmethodsキーの中のsayキーの部分です。methodsキーの値が連想配列でメソッドを設定する。sayキーの値が無名関数で引数はmessege。アラートの中でmessegeと上のdataキーのnameを呼び出して「!」と合わせている。これでHTMLのsay()メソッドの引数の「おはようございます」などの文字列を読み込んでアラート表示しているわけです。分岐(v-show、v-if)次は「分岐」です。Vue.jsの分岐のディレクティブはv-showとv-ifがあります。こちらもチュートリアルを参考にいくつか作ってみました。ディレクティブの事例です。v-showは条件によって表示する、しないを判定します。CodePen.一見ただのテキストが表示されているだけですね。書いてありますか?実はこのテキスト、見る時間帯によって内容が変わります。!」、18時より遅い時間に見ると「こんにちは。