はてなブックマーク

コンポーネントの v-model ​基本的な使い方 ​コンポーネント上で v-model を使用すると双方向バインディングを実装できます。 vue<!-- Child.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>

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

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

クイックスタート ​オンラインで Vue を試す ​Vue をすぐに体験するには、Playground で直接試すことができます。 もし、ビルドのステップのないプレーンな HTML のセットアップを好む場合は、この JSFiddle を出発点として使用できます。 Node.js とビルドツールの概念に既に慣れている場合は、StackBlitz を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。 Vue アプリケーションの作成 ​ このセクションでは、ローカルマシン上で Vue のシングルページアプリケーションを生成する方法を紹介します。作成されたプロジェクトは、Vite に基づいたビルド設定を使用し、Vue の単一ファイルコンポーネント（SFC）を使用できるようにします。 Node.js の最新バージョンがインストールされていること、現在の作業ディレクトリがプロジェクトを

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

<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 のセキュリティー・アップデート 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。