読書メモ Vue.jsのディレクティブ

Vue.jsのディレクティブについて、初歩的だけど大事そうなところメモ。本のコピペ 🙏

ディレクティブとは

  • 標準のHTMLに対して独自の属性を追加することで属性値の式の変化に応じたDOM操作を行うことができ、この特別な属性のことをディレクティブという
  • ディレクティブを使うと、テンプレートないの要素の表示を条件毎に切り替えたり、繰り返しレンダリングしたりできる

v-show

  • テンプレートの表示/非表示を切り替えたい場合に使う
<p v-show="!canBuy">
    　{{ 1000 | numberWithDelimiter }}円以上からご購入いただけます
</p>
        computed: { // 算出プロパティ
            totalPrice: function () {
                return this.items.reduce(function (sum, item) {
                    return sum + (item.price * item.quantity)
                }, 0)
            },
            totalPriceWithTax: function () {
                // 算出プロパティに依存した算出プロパティも定義できる
                return Math.floor(this.totalPrice * 1.08)
            },
            canBuy: function () {
                return this.totalPrice >= 1000
            }

        }

v-bind

  • 特定の条件が成立したとき、UIの見た目を変えたい場合、に使えるのがv-bindディレクティブ（例えばフォーム入力で不正な値が入力された場合はフィールドの色を赤く表示するUIにするなど）

v-on

  • イベントがおきたときに属性の式を実行する
v-on:イベント名="式として実行したい属性値"

v-model