知っておくべき 25 の Vue のヒント

エクスポートデフォルト{
  名前: '画像',
  小道具: {
    ソース: {
      タイプ: 文字列、
    },
    スタイル: {
      タイプ: 文字列、
      バリデータ: s => ['square', 'rounded'].includes(s)
    }
  }
};

<button class="button" @click="$emit('click')">
  <スロット>
    <!-- スロットが指定されていない場合に使用されます -->
    クリックしてください
  </スロット>
</ボタン>

<テンプレート>
  <button class="button" @click="$emit('click')">
    <!-- 最初は何もしないスロットタグを追加します -->
    <!-- スロットにコンテンツを提供することでこれを上書きできます -->
    <スロット>
      <div class="formatting">
        {{ 文章 }}
      </div>
    </スロット>
  </ボタン>
</テンプレート>

<!-- コンポーネントのデフォルト機能を使用する -->
<ButtonWithExtensionPoint text="書式設定されたテキスト" />

<!-- 拡張ポイントを使用してカスタム動作を作成する -->
<拡張ポイント付きボタン>
  <div class="異なるフォーマット">
    ここで何か違うことをする</div>
</ButtonWithExtensionPoint>

時計 {
  '$route.query.id'() {
    // ...
  }
}

<ComplicatedChart v-show="chartEnabled" />

<データテーブル>
  <テンプレート #header="テーブル属性">
    <TableHeader v-bind="tableAttributes" />
  </テンプレート>
</データテーブル>

<データテーブル #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</データテーブル>

定数$スロット = {
  デフォルト: <デフォルトスロット>,
  アイコン: <アイコンスロット>,
  ボタン: <ボタンスロット>,
};

<!-- スロット.vue -->
<テンプレート>
  <div>
    <h2>ここにいくつかのスロットがあります</h2>
    <スロット />
    <スロット名="秒" />
    <スロット名="3番目" />
  </div>
</テンプレート>

<テンプレート>
  <スロット>
    <テンプレート #2>
      これは2番目のスロットに適用されます
    </テンプレート>
  </スロット>
</テンプレート>

$slots = { 2番目: <vnode> }

<テンプレート>
  <div>
    <h2>パッケージスロット</h2>
    <div v-if="$slots.default" class="styles">
      <スロット />
    </div>
  </div>
</テンプレート>

<テンプレート>
  <div>
    <h2>これはかなり素晴らしいコンポーネントですよね?</h2>
    <div class="default-styling">
      <スロット>
    </div>
    <button @click="$emit('click')">クリックしてください!</button>
  </div>
</テンプレート>

<div>
  <h2>これは本当にクールなコンポーネントです</h2>
  <div class="default-styling">
    <!-- スロットにはコンテンツはありませんが、この div はレンダリングされます -->
  </div>
  <button @click="$emit('click')">クリックしてください!</button>
</div>

<div>
  <h2>これは本当にクールなコンポーネントです</h2>
  <button @click="$emit('click')">クリックしてください!</button>
</div>

<!-- 残念ながらこのイベントは存在しません-->
<スロット @change="更新" />

エクスポートデフォルト{
  マウント() {
    // 変更があったら `update` を呼び出す
    const オブザーバー = 新しい MutationObserver(this.update);

    //このコンポーネントの変更を監視する observer.observe(this.$el, {
      子リスト: true、
      サブツリー: true
    });
  }
};

<スタイルスコープ>
  。成分 {
    背景: 緑;
  }
</スタイル>

<スタイル>
  /*グローバルアプリケーション*/
  .コンポーネントp{
    下部マージン: 16px;
  }
</スタイル>

<スタイルスコープ>
  /*この特定のコンポーネントにスコープ設定*/
  。成分 {
    背景: 緑;
  }
</スタイル>

<スタイルスコープ>
/* スタイルのスコープを維持しながら子コンポーネントの CSS をオーバーライドします */
.my-component >>> .child-component {
  フォントサイズ: 24px;
}
</スタイル>

<!-- 簡潔にするために単一のコンポーネントとして使用します -->
<ドロップダウン v-model="選択済み" :options="[]" />

<!-- 柔軟性を高めるために分割 -->
<v-model="selected"> を選択
  <Option value="mustard">マスタード</Option>
  <Option value="ketchup">ケチャップ</Option>
  <div class="relish-wrapper">
    <Option value="relish">レリッシュ</Option>
  </div>
</選択>

.統計 {
  色: 黒;
  フォントサイズ: 24px;
  フォントの太さ: 太字;
}

/* 隣り合う統計情報の間に間隔を空ける */
.統計 + .統計 {
  左マージン: 10px;
}

const 外部変数 = getValue();

エクスポートデフォルト{
  データ（） {
    戻る {
      反応変数: 外部変数、
    };
  }
};

'vue' から { ref } をインポートします。

// Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue();
const リアクティブ変数 = ref(外部変数);

// .value を使用してアクセスします console.log(reactiveVariable.value);

代わりにリアクティブを使用してください:

'vue' から { reactive } をインポートします。

// Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue();
// Reactive はオブジェクトと配列でのみ機能します const anotherReactiveVariable = reactive(externalVariable);

// 直接アクセス console.log(anotherReactiveVariable);

<li
  v-for="{ ユーザー内の name, id }"
  :key="id"
>
  {{ 名前 }}
</li>

<li v-for="(値, キー) in [
  「海勇」
  '凍った'、
  「ウェブ初心者」
]">
  {{ インデックス + 1 }} - {{ 値 }}
</li>

<li v-for="(値, キー) in {
  名前:「海勇」
  公開: 2021年、
  監督:「ブロガー」
}">
  {{ キー }}: {{ 値 }}
</li>

<li v-for="(値、キー、インデックス) in {
  名前:「海勇」
  公開: 2021年、
  監督:「ブロガー」
}">
  #{{ インデックス + 1 }}。{{ キー }}: {{ 値 }}
</li>

<テンプレート>
  <ul>
    <li v-for="n in 5">アイテム #{{ n }}</li>
  </ul>
</テンプレート>

エクスポートデフォルト{
  計算: {
    いくつかの計算されたプロパティ() {
      // 計算プロパティを更新},
  },
  時計：
    いくつかの計算されたプロパティ() {
      // 計算されたプロパティが更新されたときに何かを行う }
  }
};

<テンプレート>
  <div>
    <h2>{{ 見出し }}</h2>
    <アイコン
      :type="アイコンタイプ"
      :size="アイコンサイズ"
      :colour="アイコンの色"
    />
  </div>
</テンプレート>

'./Icon' から Icon をインポートします。
エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    アイコンタイプ: {
      タイプ: 文字列、
      必須: true、
    },
    アイコンサイズ: {
      タイプ: 文字列、
      デフォルト: '中'、
      バリデータ: サイズ => [
        '小さい'、
        '中くらい'、
        '大きい'、
        「特大」
      ].includes(サイズ)、
    },
    アイコンカラー:
      タイプ: 文字列、
      デフォルト: '黒'、
    },
    見出し：
      タイプ: 文字列、
      必須: true、
    },
  },
};

'./Icon' から Icon をインポートします。
エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    ...アイコン.props、
    見出し：
      タイプ: 文字列、
      必須: true、
    },
  },
};

'./Icon' から Icon をインポートします。

アイコンプロパティを定数に設定する

// 事前に何らかの処理を行う
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

エクスポートデフォルト{
  コンポーネント: { アイコン },
  小道具: {
    ...アイコンプロップ、
    見出し：
      タイプ: 文字列、
      必須: true、
    },
  },
};

window.addEventListener('mousedown', e => {
  // クリックされた要素を取得します。const clickedEl = e.target;

  // `el` は外部クリックを検出する要素です if (el.contains(clickedEl)) {
    // "el" 内をクリック } else {
    // `el` の外側をクリック}
});

<!-- VFor.vue -->
<テンプレート>
    <div>
        <!-- 最初の項目をレンダリングします-->
    {{リスト[0]}}
        <!-- 他にも処理すべき項目があるが、レンダリングした項目はそのままにしておく必要がある場合 -->
    <v-for
      v-if="リストの長さ > 1"
            :list="リスト.スライス(1)"
        />
    </div>
</テンプレート>

テンプレート>
  <div>
    <!-- レンダリングするアイテムをスロットに渡します -->
    <スロット v-bind:item="リスト[0]">
      <!-- デフォルト -->
      {{リスト[0]}}
    </スロット>

    <v-for
      v-if="リストの長さ > 1"
      :list="リスト.スライス(1)"
    >
      <!-- スコープ スロットを再帰的に渡します -->
      <テンプレート v-slot="{ アイテム }">
        <スロット v-bind:item="item" />
      </テンプレート>
    </v-for>
  </div>
</テンプレート>

<テンプレート>
  <div>
    <!-- 一般的なリスト -->
    <v-for :list="リスト" />

    <!-- 太字項目のリスト -->
    <v-for :list="リスト">
      <テンプレート v-slot="{ アイテム }">
        <strong>{{ アイテム }}</strong>
      </テンプレート>
    </v-for>
  </div>
</テンプレート>

エクスポートデフォルト{
  名前: 'LiveUsersWidget',
  // 👇 追加プロパティとして追加するだけです columns: 3,
  小道具: {
    // ...
  },
  データ（） {
    戻る {
      //...
    };
  },
};

'./LiveUsersWidget.vue' から LiveUsersWidget をインポートします。
const { columns } = LiveUsersWidget;

エクスポートデフォルト{
  名前: 'LiveUsersWidget',
  列: 3,
  作成された() {
    // 👇 `$options` にはコンポーネントのすべてのメタデータが含まれます console.log(`Using ${this.$options.metadata} columns`);
  },
};

<!-- "単一" ファイル コンポーネント -->
<テンプレート src="./template.html"></テンプレート>
<script src="./script.js"></script>
<スタイル スコープ src="./styles.css"></style>

<!-- オーバーフローメニュー.vue -->
<テンプレート>
  <メニュー>
    <!-- メニューをトリガーするカスタム ボタンを追加します -->
    <テンプレート #button v-slot="bind">
      <!-- クリック ハンドラー、a11y 属性などを渡したい場合は、bind を使用します。 -->
      <ボタン v-bind="bind">
        <!-- 独自の「...」アイコンを使用します。このボタンにはテキストはありません -->
        <テンプレート #アイコン>
          <svg src="./ellipsis.svg" />
        </テンプレート>
      </ボタン>
    </テンプレート>
  </メニュー>
</テンプレート>

<テンプレート>
  <オーバーフローメニュー
    :menu-items="項目"
    @click="ハンドルメニュークリック"
  />
</テンプレート>

<!-- 親.vue -->
<テンプレート>
  <子コンポーネント ref="子" />
</テンプレート>

 
// Parent.vue のどこか this.$refs.child.method();

<テンプレート>
  <子コンポーネント
    :tell-me-what-to-do="いくつかの指示"
    @something-happened="hereIWillHelpYouWithThat"
  />
</テンプレート>

<!-- 親.vue -->
<テンプレート>
  <ChildComponent :trigger="メソッドを呼び出すべき" />
</テンプレート>

// 子.vue
エクスポートデフォルト{
  プロパティ: ['トリガー'],
  時計：
    shouldCallMethod(newVal) {
      if (newVal) {
        // このメソッドはトリガーが `true` に設定されている場合に呼び出されます this.method();
      }
    }
  }
}

<!-- 親.vue -->
<テンプレート>
  <子コンポーネント ref="子" />
</テンプレート>

// Parent.vue のどこか this.$refs.child.method();

エクスポートデフォルト{
  名前: 'ColourChange',
  小道具: {
    色：
      タイプ: 配列、
      必須: true、
    },
  },
  時計：
    // メソッドの代わりにオブジェクト構文を使用する colours: {
      // これにより、Vue は配列の内側を見るよう通知されます deep: true,

      // メソッドをハンドラーフィールド handler() に移動する必要があります
        console.log('カラーリストが変更されました!');
      }
    }
  }
}

時計（
  色、
  () => {
    console.log('カラーリストが変更されました!');
  },
  {
    深い：本当、
  }
);

someurl.com/edit?date-range=last-week

定数 dateRange = this.$route.query.dateRange;

<ルーターリンク:to="{
  クエリ: {
    日付範囲: 新しい日付範囲
  }
}">

<テンプレート>
  <div class="カード">
    <img src="画像パス" />
    <h3>
      {{ タイトル }}
    </h3>
    <h4 v-if="展開">
      {{ サブ見出し }}
    </h4>
    <div v-if="expanded" class="card-content">
      <スロット/>
    </div>
    <ソーシャルシェア v-if="expanded" />
  </div>
</テンプレート>

<テンプレート>
  <div class="カード">
    <img src="画像パス" />
    <h3>
      {{ タイトル }}
    </h3>
    <テンプレートv-if="展開">
      <h4>
        {{ サブ見出し }}
      </h4>
      <div class="カードコンテンツ">
        <スロット/>
      </div>
      <ソーシャルシェア/>
    </テンプレート>
  </div>
</テンプレート>

// ビュー3
const app = createApp(App);
app.config.errorHandler = (エラー) => {
  警告(エラー);
};

// ビュー2
Vue.config.errorHandler = (err) => {
  警告(エラー);
};