Help us understand the problem. What is going on with this article?

【Vue.js】よく使いそうなディレクティブまとめ【初心者】

はじめに

Vue.jsを触り始めたので、よく使いそうなディレクティブを自分用にまとめました。

※HTML側の表記のみサンプルで記載しています。

公式ドキュメントはこちら

環境

- OS: macOS Catalina 10.15.1
- Vue.js: 2.6.10

各ディレクティブの意味と使用例

1.v-bindデータバインディング

公式ドキュメント

【意味】

データバインディングを作成する。
HTMLの各タグにJavaScriptのデータを紐付ける。

【使用例】

<a v-bind:href="url">Click here</a>
<a :href="url">Click here</a>

短縮形が用意されていて、通常は下側の表記を使う。

その他、以下のタグと連携する活用例が多い。

  • href
  • src
  • id
  • class
  • checked

2.v-onイベント発火

公式ドキュメント

【意味】

HTMLタグに紐付け、イベント発火時に指定したJavaScriptを実行する。

【使用例】

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

例では、ボタンをクリックすると変数counterに1加えられ、pタグ内に反映される。

<div id="example-1">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

短縮系が用意されていて、通常は@clickのように使用する。

その他活用の幅が広く、様々な修飾子が用意されている。
詳細は公式ドキュメント参照。


3.v-model双方向データバインディング

公式ドキュメント

【意味】

双方向データバインディングを作成する。
フォームなどと連携し、リアルタイムで値を反映させたいときに使用する。

【使用例】

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

例では、inputタグで作成されたフォームに入力された文字がpタグ内の{{message}}にリアルタイムで表示される。

その他チェックボックス、セレクトボックスなどにも応用出来る。


4.v-if条件分岐

公式ドキュメント

【意味】

trueなら表示、falseなら表示されない。

【使用例】

<div v-if="hoge">
  fuga
</div>
<div v-if="foo">
  bar
</div>

例では

  • hogeがtrue => fugaが表示
  • fooがtrue => barが表示

また、もう少し複雑な処理であれば
v-else-if
v-else
も組み合わせて条件分岐させることが出来る。


5.v-show表示/非表示

【意味】

v-ifと記法・使用用途は近い。

ただし、実態はCSSでdisplay: noneを付与して非表示にしているだけのでfalseの場合も要素自体は存在する。

【使用例】※v-ifと同様

<div v-show="hoge">
  fuga
</div>
<div v-show="foo">
  bar
</div>

例では

  • hogeがtrue => fugaが表示
  • fooがtrue => barが表示

6.v-for繰り返し処理

公式ドキュメント

【意味】

配列の要素を1つずつ取り出し、取り出す要素が無くなるまで繰り返す。

【使用例】

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

この例では、個数分だけliタグが繰り返し表示される。

vforの後にあるitem in itemsの意味は

  • item => htmlにある{{item.message}}の中にあるitem
  • items => JavaScriptのdataに入っているitems配列

表やリストに対して使用する例が多い。

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

これからガンガン使って慣れていきます!:fist:

参考にさせて頂いたサイト(いつもありがとうございます)

ディレクティブ - vue.js

terufumi1122
小売業経験8年。異業種から未経験・完全独学でサーバーサイドエンジニアになった人。 ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails #駆け出しエンジニアとつながりたい #元転勤族
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした