1. HOME
  2. ブログ
  3. IT技術
  4. 【第2回:前編】Vue.js 入門 〜ディレクティブ編〜

【第2回:前編】Vue.js 入門 〜ディレクティブ編〜

ディレクティブを使ってみよう!

宮田宮田

(株) ライトコードの宮田です。

前回は、Vueインスタンスを作成し、data に持たせた “Hello World” の文字列を表示するプログラムを作成しました。

今回は「ディレクティブ」と呼ばれる、Vue.jsが提供している特別な属性を利用したプログラムを書いてみましょう!

前回の記事はこちら

ディレクティブとは

接頭辞 v- が付いたVue.jsの特別な属性のことを指します。

その式の値が変更されるとき、 DOM に対してリアクティブに特殊な動作を適用することができます。

準備

まずは、前回と同様にプロジェクトファイルと index.htmlファイルを用意しましょう。

index.htmlの内容は、 Vue.js の CDN を読み込むところまでで、下記のように記述しておきます。

それでは順番にみていきましょう!

v-bind

v-bindディレクティブを利用すると、要素の属性を束縛(バインディング)することができます。

ですが、これだけ聞いてもピンとこないかもしれません。

前回、 {{ }}  で囲う マスタッシュ(Mustache)構文 を使用したテキスト展開を学習しました。

これは、Vue.jsの データバインディング構文 の最も基本的な形式です。

下記のように、開始タグと終了タグの間の位置に記述しましたね。

また、HTML属性の内部で {{ }}  を利用したいこともあると思います。

例えば下記のように href 属性に url というプロパティの値を展開したい場合を考えます。

ですが、残念ながらこの書き方では使用することができません。

そんな時に登場するのが v-bind です!

v-bind を使って書き換えると、下記のようになります。

属性名の前に v-bind:  が付き、値は {{ }}  で囲まず、プロパティ名をそのまま記述します。

使用例

index.htmlの <body>  内を上記のコードになるようにして実行した結果が下の画像です。

url の値がちゃんと展開されていますね。

省略記法

v-bind は、下記の例のように省略して記述することもできます。

例) v-bind:href:href

v-model

主に、 form の input 要素や textarea 要素、select 要素で使用されます。

v-modelディレクティブを利用すると、入力とアプリケーションの状態の 双方向データバインディング を簡単に行うことができます!

言葉で説明するよりも実際に動かしてみてみましょう。

使用例

上記のコードを実際に動かしてみると、テキストボックスで入力した値が上部にテキストとして即座に反映されていますね。

これはテキストボックスの値(value属性の値)が変更されると、 data で持っている inputText の値に自動的に反映される仕組みをv-modelディレクティブが備えているからなんです。

注意点

よくある例で、value や checked、selected 属性に初期値を設定しておきたい場合があると思います。

しかし、v-model には 上記にある属性の初期値を無視するという特徴があります。

例えば、下記のように属性に初期値を記述する方法では失敗します。

そのため、下記のコードのように data に初期値を持たせておくか、カスタムディレクティブで独自に実装を追加する必要があります。

補足

v-model は 下記の内容の 糖衣構文(syntax suger) です。

v-on

v-onディレクティブを利用してイベントリスナーを加えることで、Vue インスタンスのメソッドを呼び出すことができます。

下記の場合、イベントリスナーは click なので、ボタンをクリックした時 counter メソッドが呼び出されるということですね。

使用例

上記コードを実行してみると、クリック回数のテキストとボタンが表示されたと思います。

コードを見ると、Vueインスタンス内に、新たに methods いうプロパティが登場しています。

まだ今回は詳しく書きませんが、methods には 呼び出したいメソッドを定義することができます。

counter メソッドは data ではなく、この methods に 記述しましょう。

methods から data の中身を参照する際には this が必要なので忘れないようにしましょう!

ボタンを押すごとに counter メソッドが呼びだされて上部のテキストの回数が加算されていますね!

省略記法

v-on は、下記の例のように省略して記述することもできます。

例) v-on:click → @click

後編に続く

今回は前編として v-bindv-modelv-on ディレクティブをみてきました。

よく使用するディレクティブは他にもまだあります。

続きは後編で、引き続きみていきましょう!

関連記事

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事