サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
v2.ja.vuejs.org
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
最終更新日: 2018年5月14日 はじめにもしあなたが Vue でアプリケーションを構築しているとき、メモリリークに注意する必要があります。 この Issue はシングルページアプリケーション( SPA )を設計する際には特に重要で、SPA を使っているときユーザはブラウザをリフレッシュする必要はなく、コンポーネントをクリーンアップすることとガベージコレクションが期待通りに動作することを確認することは JavaScript アプリケーションの責務です。 Vue アプリケーションのメモリリークは一般的に Vue 自体からは起こらず、むしろ他のライブラリをアプリケーションに組み込む際発生する可能性があります。 かんたんな例次の例のメモリリークは Vue コンポーネント上で Choices.js ライブラリが原因で引き起こされていて正しく解放されません。それでは、どのようにして Choices
最終更新日: 2020年4月25日 基本例元々 Vue コンポーネントは再利用される物です。再利用はそのコンポーネントを1つのアプリケーション内でのみ利用する場合は簡単に行えます。しかし一度書いたコンポーネントを複数のサイトやアプリケーションで利用するにはどうしたら良いでしょう。おそらく最も簡単な解決策は npm を利用する事です。 npm を経由して共有できるようにコンポーネントをパッケージ化する事で、成熟したウェブ・アプリケーションにおけるビルドのプロセス内にコンポーネントを組み込むことができます。: import MyComponent from 'my-component'; export default { components: { MyComponent, }, // コンポーネントの残りの箇所 } 直接ブラウザ内で <script> タグを用いて利用する事もできます: <s
最終更新日: 2018年3月20日 基本的な例Web サイト上でスクロールイベントと連動するアニメーションなど、ちょっとした振る舞いを加えたくなる時は多くあります。やり方は多くありますが、最も少ないコード量と依存で実現できる方法はおそらく、特定のスクロールイベントを発火させるフックを作成する、カスタムディレクティブを使用することでしょう。 Vue.directive('scroll', { inserted: function (el, binding) { let f = function (evt) { if (binding.value(evt, el)) { window.removeEventListener('scroll', f) } } window.addEventListener('scroll', f) } }) // main app new Vue({ el: '
このように Posts タブがレンダリングされていなくても、自身の状態(選択された投稿)を保持するようになります。完全なコードは この例 を参照してください。 <keep-alive> にラップされるコンポーネントは、全て name を持つ必要があります。 コンポーネントの name オプションを使うか、ローカル/グローバル登録を使用してください。 <keep-alive> の詳細な情報については API リファレンス を参照してください。 非同期コンポーネント 大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバからロードしたい場合があるでしょう。Vue では、コンポーネント定義を非同期で解決するファクトリ関数としてコンポーネントを定義することができます。Vue は、コンポーネントをレンダリングする必要がある場合にのみファクトリ関数をトリ
最終更新日: 2019年3月29日 すべてのアプリケーションは、小規模から大規模の障害を理解する必要があるところまできました。このレシピでは、ブラウザでアプリケーションのデバッグをしたいと考えている VS Code ユーザーのためにいくつかのワークフローを説明します。 このレシピでは、ブラウザで実行している Vue CLI アプリケーションをデバッグする方法を示します。 注意: このレシピは Chrome と Firefox を含みます。もしあなたが他のブラウザで VS Code のデバッグを設定する方法を知っている場合、あなたの知見を共有することを検討してください (ページの下部を参照してください)。 前提条件VS Code とあなたが選択したブラウザがインストールされていることと、ブラウザに対応するデバッガの拡張機能がインストールされ有効化されていることを確認してください: Debug
最終更新日: 2019年10月29日 簡単な例あなたははじめての Vue.js アプリケーションを素晴らしい Vue.js webpack テンプレート を利用して作成し、Docker コンテナで実行もできることを同僚に披露したいと思っています。 ではプロジェクトルートに Dockerfile を作成しましょう: FROM node:lts-alpine # 静的コンテンツを配信するシンプルな http サーバをインストールする RUN npm install -g http-server # カレントワーキングディレクトリとして 'app' フォルダを指定する WORKDIR /app # `package.json` と `package-lock.json` (あれば)を両方コピーする COPY package*.json ./ # プロジェクトの依存ライブラリをインストールする R
最終更新日: 2022年10月12日 基本の例クライアントサイドストレージは、パフォーマンスの向上をアプリケーションに対してすばやく追加する優れた方法です。ブラウザ自体にデータを格納することで、ユーザが必要とするたびにサーバから情報を取得するのをスキップすることができます。オフラインのとき特に便利ですが、オンラインユーザでもリモートサーバと比較してローカルデータを使用することにメリットがあります。クライアントサイドストレージは、クッキー, ローカルストレージ(技術的には “Web Storage”), IndexedDB, および WebSQL(新しいプロジェクトでは使用しないでください)で実行できます。 このクックブックでは最も単純なストレージメカニズムの、ローカルストレージに焦点を当てます。ローカルストレージはデータを格納するための key/value システムを使用します。単純な値だ
フォームのバリデーションはブラウザにネイティブサポートされますが、異なるブラウザ間での取り扱いには注意が必要です。またバリデーションが完全にサポートされている場合においても、カスタマイズしたバリデーションが必要な場合もあるため、 Vue ベースでのソリューションが適切かもしれません。簡単な例から見ていきましょう。 3 つのフィールドをもち、2 つが必須の場合。はじめに HTML を見てみましょう。 <form id="app" @submit="checkForm" action="https://vuejs.org/" method="post" > <p v-if="errors.length"> <b>Please correct the following error(s):</b> <ul> <li v-for="error in errors">{{ error }}</li>
最終更新日: 2019年3月11日 あなたが Vue.js のウェブサイトを新しく立ち上げたとしましょう。おめでとうございます!いま、あなたは自分のウェブサイトに早くブログを追加したいでしょうが、1つの WordPress のインスタンス(また、さらに言えば DB の動作する CMS)だけをホスティングするためにサーバ全体をチューニングしたくはないでしょう。いくつかの Vue.js ブログのコンポーネントといくつかのルーティングを追加して、それらがすべてうまく動作するようにしたいだけですよね?あなたが探しているのは、Vue.js アプリケーションから直接処理できる API によって完全に制御されたブログです。このチュートリアルは、どうやってそれを適切に行うか、教えます。詳しく見ていきましょう! 私たちは、Vue.js で CMS によるブログを素早くつくっていきます。これには、Butter
最終更新日: 2018年3月20日 基本的な例ウェブアプリケーションを構築するとき、 API からデータを取得して表示することがよくあります。これを行うにはいくつかの方法があり、一般的なアプローチは Promise ベースの HTTP クライアントの axios を使うことです。 この例題では、 CoinDesk API を利用して Bitcoin の価格を表示し、毎分更新します。最初に、 npm か yarn もしくは CDN リンクのいずれかを利用して axios をインストールします。 API から情報を取得する方法はいくつかありますが、表示する内容を知るために、まずデータ形式がどうなっているかを調べることをオススメします。 API エンドポイントを呼び出して出力をすることでデータ形式がどうなっているか調べられます。 CoinDesk API ドキュメントをみると、 https://
最終更新日: 2018年3月20日 基本的な例SVG アイコンシステムを作成する方法は多くありますが、 Vue の機能を活かす 1 つの方法は、編集可能なインラインのアイコンをコンポーネントとして作成することです。この方法のいくつかの利点は以下の通りです: 即座に編集することが簡単です アニメーション可能です 標準のプロパティやデフォルトを使用して標準サイズを保つことができ、必要ならば変更することもできます インラインなので、 HTTP リクエストは必要ありません 動的にアクセス可能に作ることができます まず、全てのアイコン用のフォルダを作り、簡単に検索できるように標準化された方法で命名をしましょう。 components/icons/IconBox.vue components/icons/IconCalendar.vue components/icons/IconEnvelope.vu
ラッパーコンポーネント の例 最終更新日: 2017年6月26日 この例では、カスタムコンポーネント内部でラップすることによって、サードパーティの jQuery プラグイン (select2) を統合しています。
最終更新日: 2022年1月15日 公式 Flux ライクな実装大規模なアプリケーションは、多くの状態が色々なコンポーネントに散らばったり、コンポーネント間の相互作用のために複雑になりがちです。この問題を解消するために、 Vue は Elm から触発された状態管理ライブラリの vuex を提供します。vue-devtools とも連携し、特別なセットアップなしでタイムトラベルデバッグを提供します。 React 開発者への情報もしあなたが React のエコシステムから来たのなら、最も人気のある Flux 実装の redux と vuex がどう比較されるか気になっていることでしょう。Redux は実際に view レイヤの知識を持たないので、シンプルなバインディング を通して簡単に Vue とあわせて利用することができます。Vuex は、 自らが Vue のアプリケーション内にいることを知
モーダルコンポーネント の例 最終更新日: 2017年6月26日 コンポーネント、プロパティの伝達、コンテンツ挿入、トランジションの機能が使われています。
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Firebase + バリデーション の例 最終更新日: 2017年6月26日 この例はデータ永続バックエンドとして Firebase を使い、そしてクライアント間でリアルタイムに同期します(あなたは多数のブラウザタブで開いて試すことができます)。そのうえ、アイテムを追加する/削除するときは、算出プロパティを使用し、瞬時にバリデーションを実行して、CSS トランジションのきっかけとなります。
最終更新日: 2021年5月22日 グローバル設定Vue.config は Vue のグローバル設定を含んでいるオブジェクトです。あなたのアプリケーションが読み込まれる前に、下記のプロパティを変更することができます: silent 型: boolean デフォルト: false 使用方法: Vue.config.silent = true すべての Vue のログと警告を抑制します。 optionMergeStrategies 型: { [key: string]: Function } デフォルト: {} 使用方法: Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option:
最終更新日: 2020年3月7日 FAQ わお、このページは非常に長いですね!ということは、バージョン 2.0 は従来と全く異なっていて、私は全てを基礎からもう一度学ぶ必要があるのでしょう。その上で、移行は不可能ということでしょうか? よくぞ聞いてくれました!その答えは No です。 API のおおよそ 90% が同じで、かつ基本となるコンセプトは変わっていません。 このセクションは、非常に詳しい説明と、多くの例を提供したいため、非常に長いです。 ですが、安心してください、 このセクションは、上から下まで全て読むようなものではありません! どこから移行をはじめるべきですか? 現在のプロジェクト上で、移行ヘルパーを実行します。私たちは以前の Vue 開発を単純なコマンドライン インターフェースに最小構成で注意深く詰め込みました。それは、廃止された機能を認識するたびに移行をサジェストし、その上
最終更新日: 2020年11月7日 Vue.js とは?Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。 あなたが経験豊富なフロントエ
次のページ
このページを最初にブックマークしてみませんか?
『Vue.js v2 ドキュメント』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く