Vue.jsについての記事

Vue.jsで作成した支出管理アプリに、現在の残高が分かる機能を追加した

前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録して、支出を記録するごとに残高が減っていき、現在の残高が分かる機能を追加しました。 SeethePen Vue3支出管理アプリbyShibataHiroki(@khiro-enginn...

前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録し...

【Vue.js】今日の支出合計が分かるアプリ

Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 SeethePen Vue3支出管理アプリbyShibataHiroki(@khiro-enginner) onCodePen. 使い方 例えば、コンビニで88円の水を買ったとすると、入力欄に8...

Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 SeethePen Vue3...

Vue.jsでマークダウンエディターを作ってみた

.wp-block-tabletd{ text-align:left; } この本を参考にして、Vue.jsでMarkdownを作ってみました。 準備 色々と準備をしていきます。 HTMLの雛形を作成する まずは、VScodeの省略記法で、「!」と入力してHTMLの基本的な形を作...

.wp-block-tabletd{ text-align:left; } この本を参考にして、Vue.jsでMarkdownを作ってみま...

Vue.jsとjQueryの違い

Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが...

Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です...

Google Chartsの円グラフに投票できる例

こちらの参考書のchapter7の内容です。 以下のように、GoogleChartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになっています。 スタバに投票する前 スタバに投票した後 動作環境 vue.jsのバージョンは、2.5.17です。 ...

こちらの参考書のchapter7の内容です。 以下のように、GoogleChartsの円グラフが表示されていて、表のボタンを押すと数字...

Vue.jsで、SPAのToDoアプリを作成してみた

この本を参考にして、Vue.jsで、SPA(SinglePageApplication)のToDoアプリを作ってみました。 今回作成したもの SeethePen UntitledbyShibataHiroki(@khiro-enginner) onCodePen. .posth3.mb-...

この本を参考にして、Vue.jsで、SPA(SinglePageApplication)のToDoアプリを作ってみました。 ...

Nuxt.jsをインストールしてみた

vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なかなかスムーズにインストールが進まなかったので、その過程も書いていきます。 公式サイトのドキュメント 公式サイトのインストールページにインストールに必要な情報がまとまっていました。...

vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なか...

vuetifyについて

vuetifyについて調べてみました。 vuetifyとは? Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.com/en/getting-started/installation/#installation 公式ドキュメントの流れに沿って、進め...

vuetifyについて調べてみました。 vuetifyとは? Vue.jsのUIフレームワークです。 始め方 ...

Vueアプリケーションをブラウザで実行しました。

以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 ブラウザで実行されたVueアプリケーション ブラウザで実行...

以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueア...

SFCとは何か?

Vue.jsには、SFC(SingleFileComponent)という用語があります。 この記事では、SFCとは何か?について解説していきます。 拡張子は「.vue」 SFCの拡張子は「.vue」です。 どうやって.vueファイルを機能させるか? これまで、CDNでvueのコアファイルを読み込んで、HTM...

Vue.jsには、SFC(SingleFileComponent)という用語があります。 この記事では、SFCとは何か?について解説していきま...

Vue.jsのウォッチャについて学んでみた

vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最...

vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 ...

Vue.jsのコンポーネントについて学んでみた

vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。 こちらの「chapter12」を参考にしました。 コンポーネントを使用した結果 コンポーネントを使用すれば、以下のように、同じHTM...

vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作...

Vue.jsをCDNでインストールして、動かしてみた

前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動かしてみます。 こちらの参考書を使用しました。 Vue.jsのインストール 色んな方法がありますが、CDNを使用します。 CDNでインストール 一番手軽...

前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動...

Vue.js 学習 Part1

私はこれまで、WEB制作でjQueryを使用してきましたが、数年前からVue.jsという単語をよく耳にするので、Vue.jsについて学習していきます。 Vue.jsを使えるようにするために最初に行うこと https://ja.vuejs.org/guide/quick-start.html#cdn-の-vue-を使用する ...

私はこれまで、WEB制作でjQueryを使用してきましたが、数年前からVue.jsという単語をよく耳にするので、Vue.jsについて学習していきます...

Vue.jsエンジニアの求人情報と報酬を調べてみた

私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作成業務→週3、1日6時間で月10万円ほど地元名古屋のWEB制作会社からの案件受託→例えば、デザインデータからのページ構築の場合、1件3万円ほどクラウドワークスでの案件受託→LPコーディング1...

私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作...

これまでに書いた記事の一覧はこちら

年月アーカイブ

  • 2023年9月 (25)
  • 2023年8月 (33)
  • 2023年7月 (12)
  • 2023年6月 (22)
  • 2023年5月 (5)
  • 2023年4月 (20)
  • 2023年3月 (6)
  • 2023年2月 (18)
  • 2023年1月 (25)
  • 2022年12月 (34)
  • 2022年11月 (42)
  • 2022年10月 (14)
  • 2022年9月 (11)
  • 2022年8月 (11)
  • 2022年7月 (7)
  • 2022年5月 (23)
  • 2022年4月 (19)
  • 2022年3月 (12)
  • タグ