Vue.js

前回のVue.jsでTodoアプリを作る(ソート機能の追加)でソート機能を追加したことでTodoアプリの基本的な機能は持たせることができたと思います。 今回はVue.jsの特徴でもあるコンポーネントを用いてフォーム部分のコンポーネント化をし...

前回、Vue.jsでTodoアプリを作る(バリデーションの追加)でバリデーションの追加を行いました。今回は期限や完了・未完了でソートができる機能を追加しています。 全体のコードを載せるので参考にしてください。 イメージは以下の画像の通りです...

前回のVue.jsでTodoアプリを作る(編集機能・ローカルストレージへの保存・細かいデザイン)で登録したTodoを編集できるようにして、リロードしてもTodoが消えてしまわないようにローカルストレージの保存を行いました。 今回は、Todo...

前回のVue.jsでTodoアプリを作成する(期限の設定)でTodoに対して期限を設定する機能と期限が超えているTodoに関しては文字を赤くするようにしました。 今回は一度設定したTodoを編集できるようにするとともに、今までのアプリではリ...

前回のVue.jsでTodoアプリを作るで基本的なTodoの追加、完了、削除はできるようになったので、今回は期限の設定と以下の画像のように期限が過ぎていたら赤色に表示するようにしていきたいと思います。 実際にコードを見ていきましょう。前回か...

今回はVue.jsでTodo簡単なTodoアプリを作っていきたいと思います。 今回はプロジェクトは既に作成されているという前提で始めていきます。 プロジェクト作成がまだの方はこちらを参考にしてください。 Vue.jsで新規プロジェクトを作成...

今回は、Vue.jsを使用してボタンを非活性化するで作成したボタンを使用して子コンポーネントにも同じボタンを作成して子コンポーネントのイベントを親コンポーネントで受け取るプログラムを作成していきたいと思います。 イメージをお伝えするために先...

今回はVue.jsのバインディング機能を使用して、ボタンのdisabled属性を動的に制御していきたいと思います。 イメージは以下の画像の通りです。 実際のコードは以下の通りです。 C:/npm_sample/src/App.vue <te...

今回はVue.jsの@click(v-on:click)とmethodsを使用してボタン内の文字を書き換えるで作成したボタンを画像のように押下されたらボタンの色を変更するためにクラスバインディングを使用していきたいと思います。 C:/npm...

今回はVue.jsの@click(v-on:click)とmethodsを使用してボタン内の文字を書き換える簡単な動作を実現するコードをご紹介します。@clickとmethodsの使い方の基本が理解できると思います。 以下の画像のHello...