Vue.jsについての記事(15)
前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録して、支出を記録するごとに残高が減っていき、現在の残高が分かる機能を追加しました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@...
前回、Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 今回、現在の残高を登録して、支出を記録するごとに残高が減っていき、現在の残...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/12/function-know-current-balance-1.png)
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen. 使い方 例えば、コンビニで88円の...
Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。 See the Pen Vue3 支出管理アプリ by Shibat...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/12/app-shows-todays-total-spending.png)
.wp-block-table td { text-align: left; } この本を参考にして、Vue.jsでMarkdownを作ってみました。 準備 色々と準備をしていきます。 HTMLの雛形を作成する まずは、VScodeの省略記法で、「!」と入力してHTMLの基本...
.wp-block-table td { text-align: left; } この本を参考にして、Vue.jsでMarkdownを作ってみました。 準...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/12/markdown-editor-with-vue.png)
Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字がすぐ下に追加されるというシンプルな例を見ていきましょう。 以下のデモでは、aと入力して追加ボタンを押すと、すぐ下にaと表示されるのが...
Vue.jsとjQueryの違いについて見ていきます。 手続的か宣言的か jQueryは手続的であるのに対して、Vue.jsは宣言的です。 シンプルな例 例えば、入力した文字...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/12/difference-between-vue-jquery.png)
こちらの参考書のchapter7の内容です。 以下のように、Google Chartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになっています。 スタバに投票する前 スタバに投票した後 動作環境 vue.jsのバージョンは、2.5.17です。...
こちらの参考書のchapter7の内容です。 以下のように、Google Chartsの円グラフが表示されていて、表のボタンを押すと数字が増えて、グラフも連動して変化するようになってい...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/example-vote-google-charts-2.png)
この本を参考にして、Vue.jsで、SPA(Single Page Application)のToDoアプリを作ってみました。 今回作成したもの See the Pen Untitled by Shibata Hiroki (@khiro-enginner) on CodePen. ...
この本を参考にして、Vue.jsで、SPA(Single Page Application)のToDoアプリを作ってみました。 今回作成したもの See t...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/create-todo-with-vue-2.png)
vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なかなかスムーズにインストールが進まなかったので、その過程も書いていきます。 公式サイトのドキュメント 公式サイトのインストールページにインストールに必要な情報がまとまっていました。...
vue.jsのフレームワーク「Nuxt.js」をインストールしてみました。 最終的には、スタートページが表示されましたが、 なかなかスムーズにインストールが進まなかったので、その...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/install-nuxt-js-2.png)
vuetifyについて調べてみました。 vuetifyとは? Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.com/en/getting-started/installation/#installation 公式ドキュメントの流れに沿って、進め...
vuetifyについて調べてみました。 vuetifyとは? Vue.jsのUIフレームワークです。 始め方 https://next.vuetifyjs.c...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/about-vuetify.png)
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 そして、ブラウザでVueアプリケーションを実行することができました。 ブラウザで実行されたVueアプリケーション ブラウザで実行...
以前の記事で、拡張子が「.vue」のファイルをブラウザに表示させることが出来ませんでした。 本日、公式サイトのクイックスタートにある「Vueアプリケーションの作成」を参考に進めました。 ...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/vue-application-in-browser.png)
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最...
vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/vue-js-watcher.png)
vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。 こちらの「chapter12」を参考にしました。 コンポーネントを使用した結果 コンポーネントを使用すれば、以下のように、同じHTM...
vue.jsでは、コンポーネントとしてHTMLをまとめて部品化して、再利用することができます。 この記事では、vue.jsでコンポーネントを作る基礎について書いていきます。 こちらの「c...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/using-vue-components-2.png)
前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動かしてみます。 こちらの参考書を使用しました。 Vue.jsのインストール 色んな方法がありますが、CDNを使用します。 CDNでインストール 一番手軽...
前回は公式サイトを使用してVue.jsの学習を進めました。 この記事では、Vue.jsをインストールして、Vue.jsのプログラムを動かしてみます。 こちらの参考書を使用しました...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/vue-js-cdn-3.png)
私はこれまで、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を使えるようにするために最初...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/vue-js-part1-1.png)
私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作成業務→ 週3、1日6時間で月10万円ほど地元名古屋のWEB制作会社からの案件受託→ 例えば、デザインデータからのページ構築の場合、1件3万円ほどクラウドワークスでの案件受託→ LPコーディ...
私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作成業務→ 週3、1日6時間で月10万円ほど地元名古...
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/10/search-vueengineer-job.png)