Vue.js関連の変更点

追加された行はこの色です。
削除された行はこの色です。
Vue.js関連へ行く。
Vue.js関連の差分を削除
#author("2023-12-15T14:55:34+09:00","default:irrp","irrp")
#author("2024-03-08T23:31:11+09:00","default:irrp","irrp")
→モダンJavaScript

→JavaScript関連ツール

#contents

* 一般 [#df72a0e8]
-[[Vue 3.4 - Speaker Deck>https://speakerdeck.com/kazupon/vue-3-dot-4]] 2024.3

-[[破壊的変更を乗り越えてVue3移行達成した話 - Stockmark Tech Blog>https://tech.stockmark.co.jp/blog/anews_vue3/]] 2023.12

-[[Vue3の衰退を招いたのは<script setup>とCompositionAPIかもしれない という考察 - Qiita>https://qiita.com/fruitriin/items/81691ce68cf3678f3bda]] 2023.6

-[[【初心者向け】 Vue3.0 × TypeScript の VSCode 開発環境を準備する - サーバーワークスエンジニアブログ>https://blog.serverworks.co.jp/setup-vite-vue-typescript]] 2023.1

-[[Vue3はどうやってリアクティブシステムを実現しているのか:その1 オブジェクトの監視 - Qiita>https://qiita.com/Nem-Nem/items/5d17ff3f69e01272c92b]] 2021.11

-[[Vue.js でマインスイーパーをつくる>https://qiita.com/kosuke-sugimori/items/894277a9d50fe7bd7661]] 2021.2

-[[今更きく…Vue3とは？>https://qiita.com/Ayumu_Usu/items/0c5b4d6d0f50f376b9b7]] 2020.9

-[[Vue 3.0で導入されるcomposition apiを使って簡単なアプリケーションを作ってみる>https://qiita.com/KDM012/items/be428d71d98e48ecbbc3]] 2020.8

-[[東京都 新型コロナウイルス対策サイトへの貢献方法を解説>https://qiita.com/FPC_COMMUNITY/items/b9cc072813dc2231b2b2]] 2020.3

-[[今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと>https://qiita.com/fruitriin/items/3249bb24d60932bb42ee]] 2020.3

-[[Vue.js v3 をつくって学ぶ リアクティブシステム>https://qiita.com/hareku/items/41c42554e7718aa17483]] 2020.2

-[[Vue.js 3.0 の新機能を試す。 &#12316; Suspense 編&#12316; >https://qiita.com/ryo2132/items/7225d60768a15dabfb9f]] 2020.2

-[[Vue.js + Vuexでデータが循環する全体像を図解してみた>https://qiita.com/m_mitsuhide/items/f16d988ec491b7800ace]] 2019.12

-[[Vue___Vuex_のアーキテクチャ完全に理解した.pdf >https://speakerdeck.com/entaku/vue-vuex-falseakitekutiyawan-quan-nili-jie-sita]] 2019.11

-[[Vue.jsを習得するためにやった事 まとめ（随時更新）>https://qiita.com/i-ryo/items/baa50cf0a6647fe8bd2e]] 2019.10

-[[Vue.js「コンポーネント」入門>https://qiita.com/kiyokiyo_kzsby/items/980c1dc45e00d2d3cbb4]] 2019.9

-[[Vueコンポーネントの強く推奨される名付け方>https://qiita.com/suin/items/e4d6a0e0d4912fbf9b77]] 2018.8
--単一ファイルコンポーネントのファイル名はPascalCaseかkebab-case

-[[Hypertext Candy Vue.js>https://www.hypertextcandy.com/tags/vuejs]]

-[[Vue.js概要？>https://qiita.com/asip2k25/items/bd4bdccd5201d542953c]] 2018.5

-[[Vue.jsを100時間勉強して分かったこと>https://qiita.com/kskinaba/items/3e8887d45b11f9132012]] 2019.5

-[[Vue.js＆axios＆AWS で壁に当たったとき見直すポイントメモ>https://qiita.com/ShinoTatwu/items/5ab4fd1e838c94a66335]] 2018.11

-[[ReactとVueのどちらを選ぶか>https://qiita.com/yoichiwo7/items/236b6535695ea67b4fbe]] 2018.6

-[[サーバー系エンジニアがVue.jsとTypeScriptに入門して10日ほど勉強した内容をまとめてみました。>https://qiita.com/poly_soft/items/39bde910f813fc9ab84a]] 2017.12.2

-[[Vue.js入門>http://gihyo.jp/dev/serial/01/vuejs]] 2017.5
-https://jp.vuejs.org/ Vue.js関連ドキュメントの翻訳サイト


* Tips [#d8e329e5]
-[[Vue.jsでChart.js触ってみた>https://www.i-vinci.co.jp/techblog/655]] 2022.3

-[[今Vue3やるなら＜script setup>を使おう - Qiita>https://qiita.com/Nem-Nem/items/18afc73e1640e0a3274d]] 2022.1

-[[v-bindでstyle、classの属性値を変える[Vue.js]>https://noumenon-th.net/programming/2019/05/21/v-bind/]] 2019.5

-[[Vus.jsでdeep watchをするふたつの方法>https://qiita.com/akifo/items/4a8b7270dffedb1bcf59]] 2016.2

-[[Vue Devtoolsでパフォーマンス改善ポイントを見つける>https://qiita.com/shun91/items/be4ae465c32b131a27f2]] 2019.12

-[[[Vue.js] $refsでコンポーネント内の子要素を触る>https://qiita.com/1994spagetian/items/5f372fc68122ec207c78]] 2019.4

-[[Vue.js のフィルタでは this は使えない>https://se-tomo.com/2018/10/26/vue-js%E3%81%AE%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%81%A8%E3%81%AF/]] 2018.10

-[[【Vue.js】{{ … }} を表示させない(v-cloak) >https://algorithm.joho.info/programming/javascript/vue-js-v-cloak/]] 2018.7

-ag-gridのサンプルなどでタグ属性値の先頭にコロン(:)を付けている場合があるが、これはv-bindの省略記法。
--参照：https://v1-jp.vuejs.org/guide/syntax.html

-[[Vue.js: v-forで項目インデックスをkey属性にしていいのか>https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316]] 2019.9
--要素の追加や削除あるいは順序変更がない場合にかぎれば、keyを使わなくても問題はないようです。むしろ「標準のモードは効率がいい」とされます。ただ、あとで変わりやすい前提と思われるので、keyを「必須」にしている

-[[Vueのライフサイクルを完全に理解した>Vueのライフサイクル>https://qiita.com/chan_kaku/items/7f3233053b0e209ef355]] 2019.6

-[[Vue.jsでSassを使う>http://better-than-i-was-yesterday.com/vue-js-sass/]] 2019.10
 // このとき、sassのパッケージを入れると npm install 時に 下記のようなメッセージが出るが、これは無視してよい。
 // むしろ無視しないと webpack の差分コンパイルが失敗するようになってしまうので無視すべき
 // これは webpack 側の(?)バグであるようです。
 // ↓無視すべき警告
 // npm WARN sass-loader@8.0.0 requires a peer of webpack@^4.36.0 but none is installed. You must install peer dependencies yourself.
--参照URL：https://github.com/webpack-contrib/sass-loader/issues/749


-[[Get Started with ag-Grid in Your Vue Project>https://www.ag-grid.com/vue-getting-started/]] 2019.10
--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 いろいろ便利な裏技集（随時更新していくよ）>https://qiita.com/gurigurico/items/9c10d21461fff497d31d]] 2019.9

-[[Vue.js】propsで子コンポーネントにデータが渡らないのはHTMLの命名規則が原因だった>https://qiita.com/_Keitaro_/items/f77d2340f9390f028677]] 2019.9

-[[Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開>https://qiita.com/aocattleya/items/3faa42b5d27a0f608785]] 2019.8

-[[Vue.observable を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？>https://qiita.com/tmy/items/a545e44100247c364a71]] 2019.8

-[[Vue.jsで日付処理ライブラリMoment.jsを使う>https://www.webopixel.net/javascript/1227.html]] 2017.4

-[[Vue.jsコンポーネント入門 (4) $emitによるイベントの発行>https://www.hypertextcandy.com/vuejs-components-introduction-emit-events]] 

-[[vueとexpressでSPAを作る>https://qiita.com/y4u0t2a1r0/items/a6aea444efc8e8e65293]] 2019.4

-[[【Vue.js】 コンポーネント間の通信について解説>https://se-tomo.com/2018/11/03/vue-js-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E9%96%93%E3%81%AE%E9%80%9A%E4%BF%A1/]] 2018.11
--通信方法には３つある
---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/items/c27d69f17d2d08722b3a]]

-[[【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス)>https://qiita.com/07JP27/items/0923cbe3b6435c19d761]] 2019.5


*CSSライブラリとの連携 [#mb89510d]
-[[1分でわかるBootstrapとBootstrapVueをVue.jsで使用する方法>https://iwb.jp/javascript-bootstrapvue-vuejs-howto/]] 2019.5
-https://bootstrap-vue.js.org/

-[[Vue.js＋ElementUIプロジェクト>https://qiita.com/yoshi0518/items/76195d52b794c4b81816]] 2019.8
-https://element.eleme.io/
--Element, a Vue 2.0 based component library for developers, designers and product managers
-【注意点】ElementUIにスタイルを付けたい場合、scoped でない style のブロックを別に作って設定しないと効かないものがある。例えば .el-input__inner など。


*Vagrantを使った開発環境 [#eee8dcf3]
-[[【vue.jsでSPA】Vagrantで開発環境を用意する>https://kawadev.net/vagrant-laravel-vuejs-startup]] 2018.9

-[[【Vue.js】Vue CLI 3のホットリロードをWindows+Vagrant環境で動かす>https://kawadev.net/vue-cli3-hmr/]] 2018.12


*Vue-CLI [#r090e154]
-[[【Vue.js】Vue CLIでVue.jsを動かす&#12316;プロジェクト作成まで>https://qiita.com/yukibe/items/fac6d6c45dd308e3d7dc]] 2019.8

-[[vue-cliからの開発メモ>http://packpak.hatenablog.com/entry/2018/09/01/215219]] 2018.9
--npm run dev で差分コンパイルができる

-[[Vue.jsでフォームバリデーションを作ってみよう！>https://qiita.com/matsumana07384/items/a8f940f681ad42c39a82]] 2019.6
--Vue-CLIの入門記事

-[[Vue CLIで作成したプロジェクトで起動する開発サーバーのポート番号を変更する>https://dev.classmethod.jp/client-side/spa/change-vue-project-devserver-port/]] 2019.3
--vue.config.js で設定する


*Vue-Router [#o7ce7186]
-input type="submit" でページがリロードされてしまう問題への対処
--この問題への対処法は二つある。
--方法?組み込みオブジェクト$eventを使う
--例えばこのようにinputタグを書いておき…
 <input name="logIn" type="submit" value="Login" v-on:click="authenticate($event)" />
--メソッド側でこのようにする
 authenticate(event) {
   event.preventDefault();
   ...
---参考ページ：https://qiita.com/Phiyory18/items/cfa1c1c756c7f54e98ab

--方法?イベント修飾子.preventを使う
---参考ページ:https://jp.vuejs.org/v2/guide/events.html


*Nuxt.js [#j1892346]
-[[UnJS にどんなツールがあるのか、上位30件すべて紹介してみた>https://zenn.dev/ytr0903/articles/c6c42147ed29be]] 2023.11

-[[Nuxt3入門(第5回) - アプリケーションの設定情報を管理する | 豆蔵デベロッパーサイト>https://developer.mamezou-tech.com/nuxt/nuxt3-app-configuration/]] 2022.10

-[[Azure Static Web AppsでNuxt.jsアプリを作成する>https://qiita.com/jiru/items/0fefe54133ad07968687]] 2021.8
--Azure Static Web Apps とは、その名の通りAzureの静的サイトホスティングサービスです。
--さらに、大きな特徴として、Azure Functionsを内包しています。
--つまり、SPA（シングルページアプリケーション）をまるっとホスティングしてくれるサービスになります。

-[[インストール Nuxt.js>https://ja.nuxtjs.org/guide/installation/]] 

-[[いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた>https://qiita.com/kira_puka/items/5de099c96b68885f8574]] 2019.9

-[[[初心者向け]ゼロから始めるNuxt.js入門>https://qiita.com/Kentaro91011/items/406d8121775f98ddd84d]] 2019.4

-[[Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと...>https://qiita.com/kira_puka/items/8c1d1240c3aa200cbec0]] 2019.8

-https://ja.nuxtjs.org/
-https://ja.nuxtjs.org/guide/


*Vue のテスト [#z934cffe]
-[[Vue.js ユニットテストの基本まとめ>https://qiita.com/kskinaba/items/d23259060e6e13b7353c]] 2020.2
-[[Vue Test Utils 公式ドキュメント>https://vue-test-utils.vuejs.org/]] 2020.8
-[[jestでテストカバレッジを見る>https://qiita.com/monisoi/items/44931e36c5f7b1f4e683]] 2017.5
Vue.js関連 の変更点
