Vue.jsについての記事

ki-hi-ro/my-vue-js に成果物をアップしています。

2025.08.13（更新日: 2025.10.25）
Vue開発用のVS Code拡張機能を入れてみる
Vueで検索すると色々出てきた。 VeturとVue (Official)を入れるのが直感的に良さそう。 Vue 3の場合はVue (Official) Vue 3かどうかはどうやって確認するか？ npm list vueで、Vueのバージョンが確認できた。 最初は、Vueの一階層上で実行してしまったが、Vueのあるfrontendに降り立って、実行した。 3.5.18とのこと ...
2025.08.27（更新日: 2025.08.27）
CDNでVue 3を使用する
Vue.jsで作成したプログラムの「ビンゴゲーム」と「宣言的レンダリング & リアクティビティ」で、CDMのvueの読み込み方が異なっている。 ビンゴゲームの文脈 <head>タグの中に以下を記入している。 https://github.com/ki-hi-ro/bingo/blob/master/bingo.html 宣言的レンダリング & リアク ...
2022.11.11（更新日: 2025.08.24）
コンポーネント、v-for、v-bind
コンポーネント v-for v-bind について書いていきます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-3 コンポーネント my-componentについて考えていきましょう。 HTML my-componentです。 JS MyComponentが定義されています。 画面 JSで定義されたtemplat ...
2022.11.09（更新日: 2025.08.24）
Vue.jsのバージョン、Evan Youさんの趣味、v-model
Vue.jsのバージョン Evan Youさんの趣味 v-model について書いていきます。 Vue.jsのバージョン 2013年12月8日の0.6.0から、バージョンアップを繰り返しています。 Evan Youさんの趣味 また、コードネームには日本のアニメの名前が使用されており、3.0.0には「ONE PIECE」という名前が付いていました。 Vue.jsの作者の「Evan ...
2022.11.03（更新日: 2025.08.24）
CDNから直接Vueを使用する方法、宣言的レンダリング、リアクティビティー（カウンター）
CDNから直接Vueを使用する方法 宣言的レンダリング リアクティビティー（カウンター） について書いていきます。 サンプルコード index.htmlをブラウザで開くと、サンプルが表示されます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-1 このようなサンプルです。 CDNから直接Vueを使用する方法 以下の ...
2025.08.13（更新日: 2025.08.24）
vuedraggableの仕組みを理解する
要素をドラッグアンドドロップできるVue.jsライブラリ「vuedraggable」の仕組みを理解するために記事を書いていく。 現状の動作 サバ味噌煮を高カカオチョコレートの下に持っていったりすることができる。 サバ味噌煮をクリックした状態で、高カカオチョコレートの下まで移動して、クリックを手放した。 現状のソース frontend/src/components/Shoppin ...
2022.12.29（更新日: 2025.08.11）
今日の支出計算管理アプリ、現在の残高を表示する機能の追加
前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録して、支出を記録するごとに残高が減っていき、現在の残高が分かる機能を追加しました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen. 使い方 最 ...
2022.12.29（更新日: 2025.08.11）
今日の支出合計算出アプリ、SPA
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen. 使い方 例えば、コンビニで88円の水を買ったとすると、入力欄に88と入力して、「記録」ボタンを押します。そうすると、今日の ...
2022.12.23（更新日: 2025.08.11）
マークダウンエディター、Marked
この本を参考にして、Vue.jsでMarkdownを作ってみました。 準備 色々と準備をしていきます。 HTMLの雛形を作成する まずは、VScodeの省略記法で、「!」と入力してHTMLの基本的な形を作成します。 作成後のコード マークダウンの記述をする範囲を作成する my-markdownというidを持つdivタグの中に、マークダウンの処理を書いていきます。 vue.jsで ...
2022.12.07（更新日: 2025.08.11）
カレンダー入力のUI作成、vuejs-datepicker
クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。 学習ブログを書いていきます。 今回の要件 引越し予定日の年・月・日をカレンダーから選択できるようにする。 ライブラリを使うための準備 まずは、vue.jsとvuejs-datepickerを読み込みました。 最も基本的な形 See the Pen ...
2022.11.21（更新日: 2025.08.11）
SPAのToDoアプリ
Vue.jsで、SPA（Single Page Application）のToDoアプリを作ってみました。 今回作成したもの See the Pen Untitled by Shibata Hiroki (@khiro-enginner) on CodePen. 動き ソースコード HTML・JavaScript（JS）・CSSが関連し合って、ToDoアプリが実現しています。 ...
2022.11.17（更新日: 2025.08.11）
vuetify
vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 公式ドキュメントの流れに沿って、進めていきました。 vuetifyのインストール を入力すると、以下のようになりました。 これで、インストールが完了しました。 途中で、yarnのアップグレードを進められていますが、今回は無視しておきます。 色々と聞かれて設定していく 対 ...
2022.11.15（更新日: 2025.08.11）
Vueアプリケーション、Vite、node.js、npm run dev
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 本記事では、どのように上の画面に到達したのかについて書いていきます。 公式サイトを開く まずは、公式サイトの「クイックスター ...
2022.11.13（更新日: 2025.08.11）
v-on、watch、methods
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最初は「3秒」と「ボタン」が表示されています。 ボタンを押すとタイマーが動作します ...
2022.12.03（更新日: 2025.08.11）
Vue.jsとjQueryの違い
Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが確認できます。 See the Pen jQuery by Shibat ...

年月

タグ

↑

↑