Technical Blog
技術ブログ
WordPressで継続して書いてきた技術記事・開発記録をまとめています。 学習内容、開発で詰まったこと、実装の理解を言葉に残しています。
CDNでVue 3を使用する
Vue.jsで作成したプログラムの「ビンゴゲーム」と「宣言的レンダリング & リアクティビティ」で、CDMのvueの読み込み方が異なっている。 ビンゴゲームの文脈 <head>タグの中に以下を記入している。 https://github.com/ki-hi-ro/bingo/blob/master/bingo.html 宣言的レンダリング & リアク …
Vue開発用のVS Code拡張機能を入れてみる
Vueで検索すると色々出てきた。 VeturとVue (Official)を入れるのが直感的に良さそう。 Vue 3の場合はVue (Official) Vue 3かどうかはどうやって確認するか？ npm list vueで、Vueのバージョンが確認できた。 最初は、Vueの一階層上で実行してしまったが、Vueのあるfrontendに降り立って、実行した。 3.5.18とのこと …
vuedraggableの仕組みを理解する
要素をドラッグアンドドロップできるVue.jsライブラリ「vuedraggable」の仕組みを理解するために記事を書いていく。 現状の動作 サバ味噌煮を高カカオチョコレートの下に持っていったりすることができる。 サバ味噌煮をクリックした状態で、高カカオチョコレートの下まで移動して、クリックを手放した。 現状のソース frontend/src/components/Shoppin …
今日の支出合計算出アプリ、SPA
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen. 使い方 例えば、コンビニで88円の水を買ったとすると、入力欄に88と入力して、「記録」ボタンを押します。そうすると、今日の …