はてなブックマーク

v-if ​v-if ディレクティブは、ブロックを条件に応じてレンダリングしたい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみレンダリングされます。

Vue.js - The Progressive JavaScript Framework

vue<script setup> const model = defineModel() function update() { model.value++ } </script> <template> <div>Parent bound v-model is: {{ model }}</div> <button @click="update">Increment</button> </template>

リアクティビティーの探求 ​Vue の最も特徴的な機能の 1 つは、控えめなリアクティビティーシステムです。コンポーネントの状態はリアクティブな JavaScript オブジェクトで構成されています。状態を変更すると、ビュー（View）が更新されます。状態管理はシンプルで直感的ですが、よくある落とし穴を避けるために、仕組みを理解することも重要です。このセクションでは Vue のリアクティビティーシステムのより低レベルの詳細について、いくつか掘り下げていきます。 リアクティビティーとは？ ​最近この用語がプログラミングでよく出てくるようになりましたが、人々がそれについて話すとき、何を意味しているのでしょうか？リアクティビティーとは、宣言的な方法で変化に対応できるようにするプログラミングパラダイムです。よく挙げられる典型的な例として Excel のスプレッドシートが挙げられます: ABC0

Provide / Inject ​このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。 props のバケツリレー（Prop Drilling） ​通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、propsを使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。props だけを使う場合、親コンポーネントのチェーン全体に同じ props を渡さなければなりません: <Footer> コンポーネントはこれらの props を全く気にしないかもしれませんが、<DeepChild> がそれらにアクセスできるように宣言して渡す必要があることに注意してください。さらに長い親チェーン

TIP このページは Vue を使用した経験、 特に Vue 2 の Options API の経験があることを前提としています。 Composition API はオプションを宣言する代わりに関数をインポートすることで Vue コンポーネントを書くことができる API セットのことです。以下に記載する API を含む包括的な用語です: リアクティビティー API 、例: ref() や reactive() で、リアクティブな状態、算出状態、ウォッチャーを直接作成できます。 ライフサイクルフック、 例: onMounted() や onUnmounted() で、コンポーネントのライフサイクルにプログラム的なフックを設定します。 依存関係の注入、すなわち provide() と inject() によって、 リアクティビティー API を使用しながら Vue の依存関係注入システムを利用

サーバーサイドレンダリング（SSR） ​概要 ​SSR とは？ ​Vue.js は、クライアントサイドのアプリケーションを構築するためのフレームワークです。デフォルトでは、Vue コンポーネントは、出力としてブラウザー内で DOM を生成・操作します。ですが、同じコンポーネントをサーバー上で HTML 文字列にレンダリングし、それをブラウザーに直接送信し、最終的にクライアント上で完全にインタラクティブなアプリケーション内に静的なマークアップを"hydrate（ハイドレート）"することもできます。 サーバーレンダリングの Vue.js アプリケーションは、アプリケーションのコードの大部分がサーバーとクライアントの両方で実行されるという意味で、"isomorphic"（アイソモルフィック）または "universal"（ユニバーサル）であると考えることもできます。 なぜ SSR なのか？ ​ク

クイックスタート ​オンラインで Vue を試す ​Vue をすぐに体験するには、Playground で直接試すことができます。 もし、ビルドのステップのないプレーンな HTML のセットアップを好む場合は、この JSFiddle を出発点として使用できます。 Node.js とビルドツールの概念に既に慣れている場合は、StackBlitz を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。 推奨されるセットアップのチュートリアルについては、はじめての Vue アプリケーションの実行、編集、デプロイ方法を紹介するインタラクティブな Scrimba チュートリアルをご覧ください。 Vue アプリケーションの作成 ​ このセクションでは、ローカルマシン上で Vue のシングルページアプリケーションを生成する方法を紹介します。作成されたプロジェクトは、Vite に基づいたビル

TIP このセクションは Composition API の基本的な知識があることを前提としています。もし Vue を Options API のみで学んできた場合は、（左サイドバーの上部にあるトグルを使って）API 選択を Composition API に設定し、リアクティビティーの基礎とライフサイクルフックの章を読み直すとよいでしょう。 「コンポーザブル」とは？ ​Vue アプリケーションの文脈で「コンポーザブル（composable）」とは、Vue の Composition API を活用して状態を持つロジックをカプセル化して再利用するための関数です。 フロントエンドアプリケーションを構築するとき、共通のタスクのためにロジックを再利用しないといけないことがよくあります。例えば、多くの箇所で日付をフォーマットする必要があるので、そのための再利用可能な関数を抽出します。このフォーマッ

Note この Vue.js スタイルガイドは古くなっていますので、見直しが必要です。ご質問やご意見がありましたら、issue をオープンしてください。 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための素晴らしい参考資料となります。しかし、どんなスタイルガイドもすべてのチームやプロジェクトにとって理想的であるとは考えていません。そのため、過去の経験、周囲の技術スタック、および個人的な価値観に基づいて、注意深い逸脱が奨励されます。 ほとんどの場合、一般的な JavaScript や HTML に関する提案も避けています。セミコロンや末尾のカンマの使用は気にしません。 HTML の属性値がシングルクオートで囲まれているかダブルクオートで囲まれているかも気に

<script setup> ​<script setup> は単一ファイルコンポーネント（SFC）内で Composition API を使用するコンパイル時のシンタックスシュガー（糖衣構文）です。SFC と Composition API の両方を使うならば、おすすめの構文です。これは通常の <script> 構文よりも、多くの利点があります: ボイラープレートが少なくて、より簡潔なコード純粋な TypeScript を使って props と発行されるイベントを宣言する機能実行時のパフォーマンスの向上（テンプレートは中間プロキシなしに同じスコープ内のレンダー関数にコンパイルされます）IDE で型推論のパフォーマンス向上（言語サーバーがコードから型を抽出する作業が減ります）基本の構文 ​この構文を導入するには、setup 属性を <script> ブロックに追加します: 内部のコードは、

今ここに表示されているのは、Vue 3 のドキュメントです！ Vue 2 のサポートは 2023 年 12 月 31 日に終了しました。詳細は Vue 2 EOL をご覧ください。Vue 2 からの移行について詳しくは、移行ガイドを確認してください。 Vue とは？ ​Vue（発音は /vjuː/、view と同様）は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript の上に構築され、あらゆる複雑さのユーザーインターフェースを効率的に開発するのに役立つ、宣言的でコンポーネントベースのプログラミングモデルを提供します。 最小限のサンプルは、次のようになります:

The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール Vue 2 のセキュリティー・アップデート Special Sponsor slot is now vacant - Inquire now 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。