Vue.js ライブラリ集
Vue.jsの環境構築手順や基礎的な構文やライブラリをまとめたものです。
環境構築
- Vue3環境をwindowsに構築する
- CentOs8に Vue.jsの環境を構築してHello Worldしてみる
- 一番簡単な方法でHello Worldしてみる
- Vue.jsでTypeScriptを利用する
基礎
- mount(‘#app’)がマウントされているファイル
- imgタグのsrc属性にデータバインディングのやり方
- computed(算出プロパティ)の使い方
- watchを使用してデータを監視する
- v-ifとv-modelの簡単な使い方
- v-cloakの簡単な使い方
- v-cloakを使用してMustache構文(二重中括弧)をロード時に表示させないようにする
- v-htmlの簡単な使い方
- v-showの簡単な使い方
- v-onとコンポーネントの簡単な使い方
- componentを作成する
- v-bindでクラス名を指定する
- v-bindで画像のパスを指定する
- v-model時に前後にある空白を除去する
- v-model時に数値型を返す
- v-on:mousedownとv-on:mouseupとv-on:clickのイベント実行順序を確認する
- Filtersの簡単な使い方
- transition ラッパーコンポーネントの使い方
- vue-routerの簡単な使い方
- Mustache構文(二重中括弧)内にfilterを使用する
- 独自ディレクティブを作成する
- mountedで配列を追加する
- mountedでオブジェクトのキーを追加する
- propsを利用して親コンポーネントから子コンポーネントでパラメーターを渡す
- emitを利用して子コンポーネントから親コンポーネントのメソッドを実行する
- クラスのバインディング
- ボタンのクリックイベントを設定する
- フォームに入力文字数制限をかける
- フォーム送信時のイベントを設定する
- 1度だけ実行されるクリックイベントを設定する
- tabキーの入力を取得する
- v-bindで属性を一括指定する
- v-bindでstyleを指定する
- v-bindに指定する属性を動的に変更する
- 値により表示を変更する
- 動的にリストを作成する
- 右クリックイベントを設定する
- 右クリックイベントを取得する
- リセットイベントを取得する
- クリックイベントでブラウザのデフォルトの動作を発動させない
- クリックイベント時にENTERキーイベントも取得する
- クリックイベントを指定した要素で止める
- テキストフォームにバリデーションをかける
- テキストフォームに入力された文字列を表示する
- ホイールボタンのクリックイベントを設定する
- ラジオボタンの値を取得する
- v-on:Keypressとv-on:keydowとv-on:keyupのイベント実行順序を確認する
- htmlタグを指定した要素に挿入する
- チェックボックスの状態を取得する
- チェックボックスの切り替えで文字列を切り替える
- onChangeイベントを設定する
- 属性を削除する
- 画像がない場合、別の画像を表示する
- 属性値を設定する
- NumLockキーの入力を取得する
- フォーカスされたイベントを取得する
- フォーカスが外れたイベントを取得する
- テキストフォームの入力値を選択したイベントを取得する
- マウスホイールのイベントを取得する
- ダブルクリックイベントを取得する
- mousemoveイベントを取得する
- mouseoverイベントを取得する
- mouseoutイベントを取得する
- mouseupイベントを取得する
- mousedownイベントを取得する
- mouseenterイベントを取得する
- mouseleaveイベントを取得する
- keypressイベントを取得する
- keydownイベントを取得する
- ドラッグイベントを取得する
- dragoverイベントを取得する
- dragleaveイベントを取得する
- dragenterイベントを取得する
- dragstartイベントを取得する
- dragendイベントを取得する
- 方向キーの入力を取得する
- 半角空白の入力を取得する
- delete・backspaceキーの入力を取得する
- 画像が存在しない場合の処理を記述する
- Mustache構文(二重中括弧)を文字列として表示する
- 使用しているvue.jsのバージョンを表示する
その他
- webpack-dev-serverを利用時にnpm run dev 外部IP(プライベートIP)の利用手順
- Bootstrap-Vueを利用したプロジェクトの作成
- Vuetifyを利用してみる
- VueCLIからelectron-vue.jsをインストールしてVuetifyを利用する
- Vuetifyの無料テンプレートを利用してみる
- axios(アクシオス)を使用してWebApiからデータを取得するサンプルコード
- Sublime Textでvue.jsを利用する
- 使用しているvue.jsのバージョンを表示する
ライブラリ集
- vue3-markdown-itを使用してmarkdownを表示する
- Vue3 ライブラリ「vue3-discordpicker」を使用して絵文字ピッカーを実装する
- ライブラリ「v-contextmenu@next」を使用して右クリックメニューを実装する
- ライブラリ「vue3-treeselect」を使用してツリー状で選択可能なセレクトボックスを実装する
- 「@dafcoe/vue-swappable-card」を使用してスワイプ可能なカードを実装する
- 「vue-color-kit」を使用してcolor pickerを実装する
- 「vue3-carousel」を使用してカルーセルを実装する
- @vueform/multiselectを使用して複数選択可能なセレクトボックスを実装する
- smart-tagzを使用してタグ入力を実装する
- vue-conversational-formを利用してインタラクティブなフォームを実装する
- Quasar Frameworkをインストールして使用する
- vue-waitを使用してloading中を表示する
- vue-cursor-fxを使用してマウスカーソルにエフェクトをかける
- vue-qriouslyを使用して簡単にバーコードを作成
- Vue.Draggableを利用してドラッグ＆ドロップを実装する
- vue-infinite-loadingを使用して無限スクロールを実装する
- vuejs-datepickerを利用してカレンダーから日付選択を可能にする
- vue-froala-wysiwygを使用してWYSIWYGエディターを実装する
- k-progressを使用してプログレスバーを実装する
- Material Kitを利用してみる
- ant-design-vueを使用してみる
- vue-treeselectの簡単な使い方
- vue-swatchesの簡単な使い方
- vue-simple-drawerを利用してメニューを横からスライド表示する
- vue-carouselを使用してスクロール機能を実装する
- vue-functional-calendarを使用してカレンダーを実装する
- vue-swipeable-bottom-sheetを使用してボトムシート (Bottom Sheets)を実装するまでの手順
- vue-particlejsをインストールしてパーティクルアニメーションを実装する手順
- vue-simple-password-meterを使用してパスワードの強度を表示する
- vue-step-indicatorをインストールしてステップインジケーターを実装する手順
- vue-email-dropdownをインストールしてmailアドレスのドメインをAutocompleteする手順
- vue-horizontal-timelineを利用して横に並ぶタイムラインを実装する
- vue-event-calendarをインストールしてカレンダーにイベントを追加する
- vue-simple-flowchartを利用してシンプルなフローチャートを実装する
- vue-rate-itを利用してハート型の評価機能を実装する
- ギャラリービューを簡単に実装できる「vue-previewer」の簡単な使い方
- vue-particle-effect-buttonsを使ってアニメーションのかかったbuttonを実装する
- breadstickを使用してをNotificationを表示するまでの手順
- vue-yandex-shareを使用してsnsシェアボタンを実装する
- vue-toastedをインストールしてNotificationを表示する
- lingalleryを利用してシンプルなギャラリーを実装する
- vue-scroll-indicatorを使用してページ読み込みのプログレスバーを実装する
- vue-histogram-sliderをインストールしてスライド式のヒストグラムを実装する
- vue-accessibility-toolbarを利用してアクセシビリティツールバーを表示する
- vue-draggableCalを使用してカレンダーを実装する
- vue-email-dropdownをインストールしてmailアドレスのドメインをAutocompleteする手順
- vue-json-componentを利用してJSONデータをtree表示する
- vue-flowyを使用してワークフローを作成する
- vue-timeagoを使用して日付計算を表示する
- vue–slick-popoverをインストールしてポップオーバーを実装する
- vue-chartlessを利用して円グラフと棒グラフを作成する
- vue-feedback-reactionを利用して絵文字を実装する
- vue-compare-imageをインストールして画像を2分割して表示する
- vue-carousel-cardをインストールしてカード型のカルーセルを実装する
- vue-scroll-snapをインストールしてOne Page Scrollを実装する手順
- vue-info-cardを利用してひっくり変えるカードを実装する
- vue2-flip-countdownを使用してカウントダウン機能を実装する
- Vue2-Dropzoneをインストールしてファイルのアップロードフォームを表示する
- Vue-Tree-Chartを利用してデータをツリーチャートで表示する
- vue-sweetalert2をインストールしてalertを表示する
- @dafcoe/vue-collapsible-panelを使用してパネルとアコーディオンを実装する
- 「@vueform/slider」を使用してカスタマイズしやすいスライダーを実装する
- 「vue3-router-tree」を使用してツリービューを実装する
- vue3-markdown-itを使用してmarkdownを表示する
- Vue3 ライブラリ「vue3-discordpicker」を使用して絵文字ピッカーを実装する
- Vue3 ライブラリ「v-contextmenu@next」を使用して右クリックメニューを実装する
- 「@dafcoe/vue-swappable-card」を使用してスワイプ可能なカードを実装する
- 「vue-color-kit」を使用してcolor pickerを実装する
- 「vue3-carousel」を使用してカルーセルを実装する
- @vueform/multiselectを使用して複数選択可能なセレクトボックスを実装する
- smart-tagzを使用してタグ入力を実装する
- vue-conversational-formを利用してインタラクティブなフォームを実装する
- Quasar Frameworkをインストールして使用する
- vue-waitを使用してloading中を表示する
- vue-cursor-fxを使用してマウスカーソルにエフェクトをかける
- vue-qriouslyを使用して簡単にバーコードを作成
- Vue.Draggableを利用してドラッグ＆ドロップを実装する
- vue-infinite-loadingを使用して無限スクロールを実装する
- vuejs-datepickerを利用してカレンダーから日付選択を可能にする
- vue-froala-wysiwygを使用してWYSIWYGエディターを実装する
- k-progressを使用してプログレスバーを実装する
- Material Kitを利用してみる
- ant-design-vueを使用してみる
- vue-treeselectの簡単な使い方
- vue-swatchesの簡単な使い方
- vue-simple-drawerを利用してメニューを横からスライド表示する
- vue-carouselを使用してスクロール機能を実装する
- vue-functional-calendarを使用してカレンダーを実装する
- vue-swipeable-bottom-sheetを使用してボトムシート (Bottom Sheets)を実装するまでの手順
- vue-particlejsをインストールしてパーティクルアニメーションを実装する手順
- vue-simple-password-meterを使用してパスワードの強度を表示する
- vue-step-indicatorをインストールしてステップインジケーターを実装する手順
- vue-email-dropdownをインストールしてmailアドレスのドメインをAutocompleteする手順
- vue-horizontal-timelineを利用して横に並ぶタイムラインを実装する
- vue-event-calendarをインストールしてカレンダーにイベントを追加する
- vue-simple-flowchartを利用してシンプルなフローチャートを実装する
- vue-rate-itを利用してハート型の評価機能を実装する
- ギャラリービューを簡単に実装できる「vue-previewer」の簡単な使い方
- vue-particle-effect-buttonsを使ってアニメーションのかかったbuttonを実装する
- breadstickを使用してをNotificationを表示するまでの手順
- vue-yandex-shareを使用してsnsシェアボタンを実装する
- vue-toastedをインストールしてNotificationを表示する
- lingalleryを利用してシンプルなギャラリーを実装する
- vue-scroll-indicatorを使用してページ読み込みのプログレスバーを実装する
- vue-histogram-sliderをインストールしてスライド式のヒストグラムを実装する
- vue-accessibility-toolbarを利用してアクセシビリティツールバーを表示する
- vue-draggableCalを使用してカレンダーを実装する
- vue-email-dropdownをインストールしてmailアドレスのドメインをAutocompleteする手順
- vue-json-componentを利用してJSONデータをtree表示する
- vue-flowyを使用してワークフローを作成する
- vue-timeagoを使用して日付計算を表示する
- vue–slick-popoverをインストールしてポップオーバーを実装する
- vue-chartlessを利用して円グラフと棒グラフを作成する
- vue-feedback-reactionを利用して絵文字を実装する
- vue-compare-imageをインストールして画像を2分割して表示する
- vue-carousel-cardをインストールしてカード型のカルーセルを実装する
- vue-scroll-snapをインストールしてOne Page Scrollを実装する手順
- vue-info-cardを利用してひっくり変えるカードを実装する
- vue2-flip-countdownを使用してカウントダウン機能を実装する
- Vue2-Dropzoneをインストールしてファイルのアップロードフォームを表示する
- Vue-Tree-Chartを利用してデータをツリーチャートで表示する
- vue-sweetalert2をインストールしてalertを表示する
- @dafcoe/vue-collapsible-panelを使用してパネルとアコーディオンを実装する
- 「@vueform/slider」を使用してカスタマイズしやすいスライダーを実装する
- 「vue3-router-tree」を使用してツリービューを実装する
他言語で利用
- rails6 vue.jsのUIライブラリ「vuetify」を利用する
- Laravel6でvue.jsを利用する
- Laravel7 vue.jsを使用する手順
- Laravel7 Vue.jsを使用してSPAを実装する手順
エラー
- エラー「The engine “node” is incompatible with this module. Expected version」が発生した場合の対処法
- エラー「Component template should contain exactly one root element」の原因と対応方法
- エラー「error: ‘hoge’ is assigned a value but never used (no-unused-vars) 」が発生した時の対処法
- Cannot find module ‘less’が発生した際の対処法
- error: Duplicate key ‘components’ (no-dupe-keys)が発生した場合の対処法
- Module Error (from ./node_modules/eslint-loader/index.js): error: Unexpected console statement (no-console)が発生した場合の対処法
- error: Parsing error: Unterminated string constantが発生した場合の対処法