Vue 3から始める、Vue.js 第1回 Vue 3はどう変わったか 2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。 はじめに 本シリーズでは2020年9月にリリースされたVue 3をベースに、Vue.jsの基本的な使い方を解説します。内容としてはVue 3に特化したものではなく、Vue 3以前からある機能も網羅して、はじめてVue.jsに触れる場合でも理解できるように解説していきます。 第1回目はVue 3の概要やVue 2との違いを解説しますので、これからVue.jsに触れる人には若干難しい概念も含まれるかもしれません。これからシリーズを読み進めてもらうと、だんたんクリアになってくると思いますので、今は、あまり気にせず読んでください。 初出記事より改定 本記事は2020年12月に公開されましたが、その後のVueの
Vueの新バージョン3で登場した新機能の一つが、Suspenseです。これは、ネットワークなどの非同期処理実装時において、その処理前やエラーハンドリングを簡単にしてくれる機能になります。使い方をマスターすれば、非同期処理の伴う表示処理が簡潔に書けるようになるでしょう。 これまでの非同期処理の書き方 例えば、非同期処理で取得したデータをもとに、データの一覧表示を行うコンポーネント（DataTable）があったとします。この場合、DataTableは次のような処理を実装すると思います。 呼び出された直後に「読み込み中…」というラベルを表示する 非同期処理がうまくいった時に、データを一覧表示する 非同期処理が失敗した時に、「エラーが発生しました」というラベルを表示する 呼び出し元になる親コンポーネントは、データを一覧表示するコンポーネントがどのようなステータスにあるのかまったく関知しない形になり
はじめに Vue3.0がリリースされましたが、Vue2系からアップデートしましたか？ 実は破壊的な変更点があり、思考停止でアップデートすると危険です。 今回は破壊的変更点の中で特に影響が大きそうな部分を抽出して解説します！！ 動画でも解説してるので、動画が好きな方はそちらを確認してみてください！！ 【YouTube動画】 Vue3.0の破壊的変更点 Global API 実際のコードの変更をみていきましょう！ 以前は以下のように使っていた部分が import Vue from 'vue' import App from './App.vue' Vue.use(/* ... */) Vue.mixin(/* ... */) Vue.component(/* ... */) Vue.directive(/* ... */) new Vue({ render: h => h(App) }).$m
8月上旬に正式リリース予定とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとにvuejs/rfc又はVue3 Documentへのリンクを貼っているので索引的に使ってもらえると嬉しいです。 この記事は以下バージョン時点の情報です。 vue-next v3.0.0-rc.5 Composition APIの追加 rfcs/0013-composition-api.md at master · vuejs/rfcs Composition API RFC | Vue Composition API おそらく一番大きな目玉となる変更はこちら。Composition APIという新しいAPIが追加されます（PluginでVue2系でも使用可能です）。 Composition APIはコンポーネントのロジックの柔軟な再構成を可能にする関数ベースのAPI群
8月上旬に正式リリース予定とされているVue3の変更点をいち早く理解できるように概要をまとめてみました。それぞれの項目ごとにvuejs/rfc又はVue3 Documentへのリンクを貼っているので索引的に使ってもらえると嬉しいです。 この記事は以下バージョン時点の情報です。 vue-next v3.0.0-rc.5 Composition APIの追加 rfcs/0013-composition-api.md at master · vuejs/rfcs Composition API RFC | Vue Composition API おそらく一番大きな目玉となる変更はこちら。Composition APIという新しいAPIが追加されます（PluginでVue2系でも使用可能です）。 Composition APIはコンポーネントのロジックの柔軟な再構成を可能にする関数ベースのAPI群
VueCLI3をまとめました。 また、記事下部に「webpackdevserveからVuiCLI3への移行」もまとめています。設定値が違うとわかりづらいエラーが出るので、自分が移行した時は手間がかかった部分をまとめました。 VueCLI3にすると、デフォルトでキャッシュバスティング、jsファイル分割、などより高速かつコード量が減ります。 目次 ざっくりと使い方とできることを説明 実際に使うときに必要となる細かな設定 1. 使い方とできること VueCLIのインストール VueCLIはコマンドだけでvueプロジェクトの雛形を作成できます。 [パターン1] npmのグローバルに追加 vueコマンドでどのディレクトリにいても実行できるのでこれを入れる。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く