前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録して、支出を記録するごとに残高が減っていき、現在の残高が分かる機能を追加しました。 SeethePen Vue3支出管理アプリbyShibataHiroki(@khiro-enginner) onCodePen. 使い方 ...
前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録し...
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 SeethePen Vue3支出管理アプリbyShibataHiroki(@khiro-enginner) onCodePen. 使い方 例えば、コンビニで88円の水を買ったとすると、入力欄に88と入力して、「記録」ボタンを押します。そうすると、今日の支...
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 SeethePen Vue3...
.wp-block-tabletd{ text-align:left; } この本を参考にして、Vue.jsでMarkdownを作ってみました。 準備 色々と準備をしていきます。 HTMLの雛形を作成する まずは、VScodeの省略記法で、「!」と入力してHTMLの基本的な形を作成します。 作成後のコード
.wp-block-tabletd{ text-align:left; } この本を参考にして、Vue.jsでMarkdownを作ってみま...
クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。 学習ブログを書いていきます。 今回の要件 引越し予定日の年・月・日をカレンダーから選択できるようにする。 ライブラリを使うための準備 まずは、vue.jsとvuejs-datepickerを読み込みました。 https://cd...
クラウドワークスで、お問い合わせフォームの日付入力をプルダウン形式からカレンダー入力形式に変更して欲しいというご相談を受けました。 学習ブログ...
Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが確認できます。 SeethePen jQueryby...
Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です...
こちらの参考書のchapter7の内容です。 以下のように、GoogleChartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになっています。 スタバに投票する前 スタバに投票した後 動作環境 vue.jsのバージョンは、2.5.17です。 全体の流れ 先ほどのサンプルを作成するときの全体...
こちらの参考書のchapter7の内容です。 以下のように、GoogleChartsの円グラフが表示されていて、表のボタンを押すと数字...
この本を参考にして、Vue.jsで、SPA（SinglePageApplication）のToDoアプリを作ってみました。 今回作成したもの SeethePen UntitledbyShibataHiroki(@khiro-enginner) onCodePen. .posth3.mb-25{ margin-bottom:25px; } ...
この本を参考にして、Vue.jsで、SPA（SinglePageApplication）のToDoアプリを作ってみました。 ...
vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なかなかスムーズにインストールが進まなかったので、その過程も書いていきます。 公式サイトのドキュメント 公式サイトのインストールページにインストールに必要な情報がまとまっていました。 https://nuxtjs.org/ja/docs...
vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なか...
vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.com/en/getting-started/installation/#installation 公式ドキュメントの流れに沿って、進めていきました。 vuetifyのインストール y...
vuetifyについて調べてみました。 vuetifyとは？ Vue.jsのUIフレームワークです。 始め方 ...
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 ブラウザで実行されたVueアプリケーション ブラウザで実行されたVueアプリケーション 本記事では、どのように上...
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueア...
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最初は「3秒」と「ボタン」が表示されています。 ...
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 ...
vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。 こちらの「chapter12」を参考にしました。 コンポーネントを使用した結果 コンポーネントを使用すれば、以下のように、同じHTMLでテキストだけを変えたものを簡単に増やすことができました。...
vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作...
前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動かしてみます。 こちらの参考書を使用しました。 Vue.jsのインストール 色んな方法がありますが、CDNを使用します。 CDNでインストール 一番手軽にVue.jsを使えるようにする方法です。 公式サイト...
前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動...
私はこれまで、WEB制作でjQueryを使用してきましたが、数年前からVue.jsという単語をよく耳にするので、Vue.jsについて学習していきます。 Vue.jsを使えるようにするために最初に行うこと https://ja.vuejs.org/guide/quick-start.html#cdn-の-vue-を使用する まずは、scriptタグで手軽に読み込みたいと思います。...
私はこれまで、WEB制作でjQueryを使用してきましたが、数年前からVue.jsという単語をよく耳にするので、Vue.jsについて学習していきます...
私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作成業務→週3、1日6時間で月10万円ほど地元名古屋のWEB制作会社からの案件受託→例えば、デザインデータからのページ構築の場合、1件3万円ほどクラウドワークスでの案件受託→LPコーディング1件13,000円や、営業管理ツールのフロントエンド構築2ヶ月...
私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作...
