Vue.js関連
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
] [
Twitter
]
開始行:
→モダンJavaScript
→JavaScript関連ツール
#contents
* 一般 [#df72a0e8]
-[[なぜ分割代入をすると Vue は reactive ではなくなるのか ...
-[[Vue.js でマインスイーパーをつくる>https://qiita.com/ko...
-[[今更きく…Vue3とは？>https://qiita.com/Ayumu_Usu/items/...
-[[東京都 新型コロナウイルス対策サイトへの貢献方法を解説>...
-[[今からVue.jsを始める人のための「知るのを後回しにしてよ...
-[[Vue.js + Vuexでデータが循環する全体像を図解してみた>ht...
-[[Vue___Vuex_のアーキテクチャ完全に理解した.pdf >https:/...
-[[Vue.jsを習得するためにやった事 まとめ（随時更新）>http...
-[[Vue.js「コンポーネント」入門>https://qiita.com/kiyokiy...
-[[Vueコンポーネントの強く推奨される名付け方>https://qiit...
--単一ファイルコンポーネントのファイル名はPascalCaseかkeb...
-[[Hypertext Candy Vue.js>https://www.hypertextcandy.com/...
-[[Vue.js概要？>https://qiita.com/asip2k25/items/bd4bdccd...
-[[Vue.jsを100時間勉強して分かったこと>https://qiita.com/...
-[[Vue.js＆axios＆AWS で壁に当たったとき見直すポイントメ...
-[[ReactとVueのどちらを選ぶか>https://qiita.com/yoichiwo7...
-[[サーバー系エンジニアがVue.jsとTypeScriptに入門して10日...
-[[Vue.js入門>http://gihyo.jp/dev/serial/01/vuejs]] 2017.5
-https://jp.vuejs.org/ Vue.js関連ドキュメントの翻訳サイト
*Vue3 [#t5d78cbf]
-[[Differences between VueJS 2 and VueJS 3>https://shifta...
-[[Vue 3 移行の技術 Tips - MicroAd Developers Blog>https:...
-[[[Vue3]テトリスを作ろう(実装編?) #TypeScript - Qiita>ht...
-[[Vue 3.4 - Speaker Deck>https://speakerdeck.com/kazupon...
-[[破壊的変更を乗り越えてVue3移行達成した話 - Stockmark T...
-[[Vue3の衰退を招いたのは<script setup>とCompositionAPIか...
-[[【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境...
-[[Vue3はどうやってリアクティブシステムを実現しているのか...
-[[Vue 3.0で導入されるcomposition apiを使って簡単なアプリ...
-[[Vue.js v3 をつくって学ぶ リアクティブシステム>https://...
-[[Vue.js 3.0 の新機能を試す。 〜 Suspense 編ӏ...
* Tips [#d8e329e5]
-[[v-if と v-show のベストプラクティス>https://zenn.dev/l...
-[[Vue.jsで使用頻度は高くないが覚えておきたい機能 #Vue.js...
-[[Vueのcomputedをゆるく解説してみる>https://zenn.dev/ars...
-[[Vue.jsでChart.js触ってみた>https://www.i-vinci.co.jp/t...
-[[今Vue3やるなら＜script setup>を使おう - Qiita>https://...
-[[v-bindでstyle、classの属性値を変える[Vue.js]>https://n...
-[[Vus.jsでdeep watchをするふたつの方法>https://qiita.com...
-[[Vue Devtoolsでパフォーマンス改善ポイントを見つける>htt...
-[[[Vue.js] $refsでコンポーネント内の子要素を触る>https:/...
-[[Vue.js のフィルタでは this は使えない>https://se-tomo....
-[[【Vue.js】{{ … }} を表示させない(v-cloak) >https://alg...
-ag-gridのサンプルなどでタグ属性値の先頭にコロン(:)を付け...
--参照：https://v1-jp.vuejs.org/guide/syntax.html
-[[Vue.js: v-forで項目インデックスをkey属性にしていいのか...
--要素の追加や削除あるいは順序変更がない場合にかぎれば、k...
-[[Vue.jsのライフサイクルを理解する（Composition API版） ...
-[[Vueのライフサイクルを完全に理解した>Vueのライフサイク...
-[[Vue.jsでSassを使う>http://better-than-i-was-yesterday....
// このとき、sassのパッケージを入れると npm install 時に...
// むしろ無視しないと webpack の差分コンパイルが失敗する...
// これは webpack 側の(?)バグであるようです。
// ↓無視すべき警告
// npm WARN sass-loader@8.0.0 requires a peer of webpack...
--参照URL：https://github.com/webpack-contrib/sass-loader...
-[[Get Started with ag-Grid in Your Vue Project>https://w...
--ag-Grid のヘッダ部分の text-align を center にしてもヘ...
--- https://github.com/ag-grid/ag-grid/issues/1864
--- flex:1; が重要
.ag-header-cell-text {
flex: 1; /* ヘッダのテキストの位置を変更するにはこれが...
}
---参考：https://developer.mozilla.org/ja/docs/Web/CSS/flex
-[[Vue.js いろいろ便利な裏技集（随時更新していくよ）>http...
-[[Vue.js】propsで子コンポーネントにデータが渡らないのはH...
-[[Vue.jsとCSSアニメーションでラーメンタイマーを作る + Fi...
-[[Vue.observable を使ったストアパターンと TypeScript の...
-[[Vue.jsで日付処理ライブラリMoment.jsを使う>https://www....
-[[Vue.jsコンポーネント入門 (4) $emitによるイベントの発行...
-[[vueとexpressでSPAを作る>https://qiita.com/y4u0t2a1r0/i...
-[[【Vue.js】 コンポーネント間の通信について解説>https://...
--通信方法には３つある
---propsとカスタムイベントを使った親子間の通信
---イベントバスを使った非親子間の通信
---Vuexを使った状態管理
-[[vue-good-table>https://xaksis.github.io/vue-good-table...
--A powerful data table plugin for VueJS
-[[Vue.jsのv-modelを正しく使う>https://qiita.com/simezi9/...
-[[【Vue.js】Web API通信のデザインパターン (個人的ベスト...
*i18n/他言語化 [#ob96b5b3]
-[[Vue I18nを使ってアプリやWebサイトを多言語対応にする方...
-[[Vue.jsのi18nとPrimeVueのコンポーネント | エンジニア奮...
-[[【Vue.js】vue-i18nを使って多言語化 #I18n - Qiita>https...
-[[Getting started | Vue I18n>https://vue-i18n.intlify.de...
*CSSライブラリとの連携 [#mb89510d]
-[[1分でわかるBootstrapとBootstrapVueをVue.jsで使用する方...
-https://bootstrap-vue.js.org/
-[[Vue.js＋ElementUIプロジェクト>https://qiita.com/yoshi0...
-https://element.eleme.io/
--Element, a Vue 2.0 based component library for develope...
-【注意点】ElementUIにスタイルを付けたい場合、scoped でな...
*Vagrantを使った開発環境 [#eee8dcf3]
-[[【vue.jsでSPA】Vagrantで開発環境を用意する>https://kaw...
-[[【Vue.js】Vue CLI 3のホットリロードをWindows+Vagrant環...
*Vue-CLI [#r090e154]
-Vue3 では Vite に代替された
-[[【Vue.js】Vue CLIでVue.jsを動かす〜プロジェクト...
-[[vue-cliからの開発メモ>http://packpak.hatenablog.com/en...
--npm run dev で差分コンパイルができる
-[[Vue.jsでフォームバリデーションを作ってみよう！>https:/...
--Vue-CLIの入門記事
-[[Vue CLIで作成したプロジェクトで起動する開発サーバーの...
--vue.config.js で設定する
*Vue-Router [#o7ce7186]
-input type="submit" でページがリロードされてしまう問題へ...
--この問題への対処法は二つある。
--方法?組み込みオブジェクト$eventを使う
--例えばこのようにinputタグを書いておき…
<input name="logIn" type="submit" value="Login" v-on:cli...
--メソッド側でこのようにする
authenticate(event) {
event.preventDefault();
...
---参考ページ：https://qiita.com/Phiyory18/items/cfa1c1c7...
--方法?イベント修飾子.preventを使う
---参考ページ:https://jp.vuejs.org/v2/guide/events.html
*Nuxt.js [#j1892346]
-[[Nuxt 3を始める方法>https://zenn.dev/gid_e_on/articles/...
-[[UnJS にどんなツールがあるのか、上位30件すべて紹介して...
-[[Nuxt3入門(第5回) - アプリケーションの設定情報を管理す...
-[[Azure Static Web AppsでNuxt.jsアプリを作成する>https:/...
--Azure Static Web Apps とは、その名の通りAzureの静的サイ...
--さらに、大きな特徴として、Azure Functionsを内包していま...
--つまり、SPA（シングルページアプリケーション）をまるっと...
-[[インストール Nuxt.js>https://ja.nuxtjs.org/guide/insta...
-[[いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(cha...
-[[[初心者向け]ゼロから始めるNuxt.js入門>https://qiita.co...
-[[Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作っ...
-https://ja.nuxtjs.org/
-https://ja.nuxtjs.org/guide/
*Vue のテスト [#z934cffe]
-[[Vue.js ユニットテストの基本まとめ>https://qiita.com/ks...
-[[Vue Test Utils 公式ドキュメント>https://vue-test-utils...
-[[jestでテストカバレッジを見る>https://qiita.com/monisoi...
終了行:
→モダンJavaScript
→JavaScript関連ツール
#contents
* 一般 [#df72a0e8]
-[[なぜ分割代入をすると Vue は reactive ではなくなるのか ...
-[[Vue.js でマインスイーパーをつくる>https://qiita.com/ko...
-[[今更きく…Vue3とは？>https://qiita.com/Ayumu_Usu/items/...
-[[東京都 新型コロナウイルス対策サイトへの貢献方法を解説>...
-[[今からVue.jsを始める人のための「知るのを後回しにしてよ...
-[[Vue.js + Vuexでデータが循環する全体像を図解してみた>ht...
-[[Vue___Vuex_のアーキテクチャ完全に理解した.pdf >https:/...
-[[Vue.jsを習得するためにやった事 まとめ（随時更新）>http...
-[[Vue.js「コンポーネント」入門>https://qiita.com/kiyokiy...
-[[Vueコンポーネントの強く推奨される名付け方>https://qiit...
--単一ファイルコンポーネントのファイル名はPascalCaseかkeb...
-[[Hypertext Candy Vue.js>https://www.hypertextcandy.com/...
-[[Vue.js概要？>https://qiita.com/asip2k25/items/bd4bdccd...
-[[Vue.jsを100時間勉強して分かったこと>https://qiita.com/...
-[[Vue.js＆axios＆AWS で壁に当たったとき見直すポイントメ...
-[[ReactとVueのどちらを選ぶか>https://qiita.com/yoichiwo7...
-[[サーバー系エンジニアがVue.jsとTypeScriptに入門して10日...
-[[Vue.js入門>http://gihyo.jp/dev/serial/01/vuejs]] 2017.5
-https://jp.vuejs.org/ Vue.js関連ドキュメントの翻訳サイト
*Vue3 [#t5d78cbf]
-[[Differences between VueJS 2 and VueJS 3>https://shifta...
-[[Vue 3 移行の技術 Tips - MicroAd Developers Blog>https:...
-[[[Vue3]テトリスを作ろう(実装編?) #TypeScript - Qiita>ht...
-[[Vue 3.4 - Speaker Deck>https://speakerdeck.com/kazupon...
-[[破壊的変更を乗り越えてVue3移行達成した話 - Stockmark T...
-[[Vue3の衰退を招いたのは<script setup>とCompositionAPIか...
-[[【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境...
-[[Vue3はどうやってリアクティブシステムを実現しているのか...
-[[Vue 3.0で導入されるcomposition apiを使って簡単なアプリ...
-[[Vue.js v3 をつくって学ぶ リアクティブシステム>https://...
-[[Vue.js 3.0 の新機能を試す。 〜 Suspense 編ӏ...
* Tips [#d8e329e5]
-[[v-if と v-show のベストプラクティス>https://zenn.dev/l...
-[[Vue.jsで使用頻度は高くないが覚えておきたい機能 #Vue.js...
-[[Vueのcomputedをゆるく解説してみる>https://zenn.dev/ars...
-[[Vue.jsでChart.js触ってみた>https://www.i-vinci.co.jp/t...
-[[今Vue3やるなら＜script setup>を使おう - Qiita>https://...
-[[v-bindでstyle、classの属性値を変える[Vue.js]>https://n...
-[[Vus.jsでdeep watchをするふたつの方法>https://qiita.com...
-[[Vue Devtoolsでパフォーマンス改善ポイントを見つける>htt...
-[[[Vue.js] $refsでコンポーネント内の子要素を触る>https:/...
-[[Vue.js のフィルタでは this は使えない>https://se-tomo....
-[[【Vue.js】{{ … }} を表示させない(v-cloak) >https://alg...
-ag-gridのサンプルなどでタグ属性値の先頭にコロン(:)を付け...
--参照：https://v1-jp.vuejs.org/guide/syntax.html
-[[Vue.js: v-forで項目インデックスをkey属性にしていいのか...
--要素の追加や削除あるいは順序変更がない場合にかぎれば、k...
-[[Vue.jsのライフサイクルを理解する（Composition API版） ...
-[[Vueのライフサイクルを完全に理解した>Vueのライフサイク...
-[[Vue.jsでSassを使う>http://better-than-i-was-yesterday....
// このとき、sassのパッケージを入れると npm install 時に...
// むしろ無視しないと webpack の差分コンパイルが失敗する...
// これは webpack 側の(?)バグであるようです。
// ↓無視すべき警告
// npm WARN sass-loader@8.0.0 requires a peer of webpack...
--参照URL：https://github.com/webpack-contrib/sass-loader...
-[[Get Started with ag-Grid in Your Vue Project>https://w...
--ag-Grid のヘッダ部分の text-align を center にしてもヘ...
--- https://github.com/ag-grid/ag-grid/issues/1864
--- flex:1; が重要
.ag-header-cell-text {
flex: 1; /* ヘッダのテキストの位置を変更するにはこれが...
}
---参考：https://developer.mozilla.org/ja/docs/Web/CSS/flex
-[[Vue.js いろいろ便利な裏技集（随時更新していくよ）>http...
-[[Vue.js】propsで子コンポーネントにデータが渡らないのはH...
-[[Vue.jsとCSSアニメーションでラーメンタイマーを作る + Fi...
-[[Vue.observable を使ったストアパターンと TypeScript の...
-[[Vue.jsで日付処理ライブラリMoment.jsを使う>https://www....
-[[Vue.jsコンポーネント入門 (4) $emitによるイベントの発行...
-[[vueとexpressでSPAを作る>https://qiita.com/y4u0t2a1r0/i...
-[[【Vue.js】 コンポーネント間の通信について解説>https://...
--通信方法には３つある
---propsとカスタムイベントを使った親子間の通信
---イベントバスを使った非親子間の通信
---Vuexを使った状態管理
-[[vue-good-table>https://xaksis.github.io/vue-good-table...
--A powerful data table plugin for VueJS
-[[Vue.jsのv-modelを正しく使う>https://qiita.com/simezi9/...
-[[【Vue.js】Web API通信のデザインパターン (個人的ベスト...
*i18n/他言語化 [#ob96b5b3]
-[[Vue I18nを使ってアプリやWebサイトを多言語対応にする方...
-[[Vue.jsのi18nとPrimeVueのコンポーネント | エンジニア奮...
-[[【Vue.js】vue-i18nを使って多言語化 #I18n - Qiita>https...
-[[Getting started | Vue I18n>https://vue-i18n.intlify.de...
*CSSライブラリとの連携 [#mb89510d]
-[[1分でわかるBootstrapとBootstrapVueをVue.jsで使用する方...
-https://bootstrap-vue.js.org/
-[[Vue.js＋ElementUIプロジェクト>https://qiita.com/yoshi0...
-https://element.eleme.io/
--Element, a Vue 2.0 based component library for develope...
-【注意点】ElementUIにスタイルを付けたい場合、scoped でな...
*Vagrantを使った開発環境 [#eee8dcf3]
-[[【vue.jsでSPA】Vagrantで開発環境を用意する>https://kaw...
-[[【Vue.js】Vue CLI 3のホットリロードをWindows+Vagrant環...
*Vue-CLI [#r090e154]
-Vue3 では Vite に代替された
-[[【Vue.js】Vue CLIでVue.jsを動かす〜プロジェクト...
-[[vue-cliからの開発メモ>http://packpak.hatenablog.com/en...
--npm run dev で差分コンパイルができる
-[[Vue.jsでフォームバリデーションを作ってみよう！>https:/...
--Vue-CLIの入門記事
-[[Vue CLIで作成したプロジェクトで起動する開発サーバーの...
--vue.config.js で設定する
*Vue-Router [#o7ce7186]
-input type="submit" でページがリロードされてしまう問題へ...
--この問題への対処法は二つある。
--方法?組み込みオブジェクト$eventを使う
--例えばこのようにinputタグを書いておき…
<input name="logIn" type="submit" value="Login" v-on:cli...
--メソッド側でこのようにする
authenticate(event) {
event.preventDefault();
...
---参考ページ：https://qiita.com/Phiyory18/items/cfa1c1c7...
--方法?イベント修飾子.preventを使う
---参考ページ:https://jp.vuejs.org/v2/guide/events.html
*Nuxt.js [#j1892346]
-[[Nuxt 3を始める方法>https://zenn.dev/gid_e_on/articles/...
-[[UnJS にどんなツールがあるのか、上位30件すべて紹介して...
-[[Nuxt3入門(第5回) - アプリケーションの設定情報を管理す...
-[[Azure Static Web AppsでNuxt.jsアプリを作成する>https:/...
--Azure Static Web Apps とは、その名の通りAzureの静的サイ...
--さらに、大きな特徴として、Azure Functionsを内包していま...
--つまり、SPA（シングルページアプリケーション）をまるっと...
-[[インストール Nuxt.js>https://ja.nuxtjs.org/guide/insta...
-[[いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(cha...
-[[[初心者向け]ゼロから始めるNuxt.js入門>https://qiita.co...
-[[Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作っ...
-https://ja.nuxtjs.org/
-https://ja.nuxtjs.org/guide/
*Vue のテスト [#z934cffe]
-[[Vue.js ユニットテストの基本まとめ>https://qiita.com/ks...
-[[Vue Test Utils 公式ドキュメント>https://vue-test-utils...
-[[jestでテストカバレッジを見る>https://qiita.com/monisoi...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
