Vue3を開発する時のVsCodeのおすすめプラグイン設定 おすすめ拡張機能紹介 1. Volar Volar は Vue.js の開発をサポートする VS Code の拡張機能です。.vue ファイルのシンタックスハイライトやインテリセンスによる補完ができるようになります。詳細は、Vola…

Nuxt3でvalidationする方法 インストール npm i vee-validate @vee-validate/i18n @vee-validate/rules vee-validate -> veeValidate @vee-validate/i18n -> バリデーションエラーメッセージに日本語化 @vee-validate/rules -> バリデーションルールを利用す…

Nuxt3にEslintとprettierを導入する ESLintとPrettierはどちらもソースコードの品質を高めるツールになります。 ESLint：静的解析ツール。バグの可能性がある書き方を指摘する。 Prettier：コードフォーマッター。インデント、改行などを自動整形してくれる…

業務でフロントエンドをすることになったけど、バックエンドがメインなのでフロントエンドの勉強をしなおす。 何やったか忘れた時ようにやったことまとめる。 Vue.js 動画コンテンツ Nuxt.js 動画コンテンツ 記事コンテンツ HTML/CSS 動画コンテンツ JavaScr…

(vue.js) methods / computed / watchの比較表 オプション名 methods computed watch メソッド 算出プロパティ 監視プロパティ 使い方 一般的な関数と同様 return内に特定したいdataを含める（this.xxx) 特定したいdata名で作成コールバック関数含める キャ…

あの時の面接官に伝えたい、Vue.jsを導入するメリットは？ エンジニア採用面談にて「reactなどの他のフレームワークに比べてVue.jsを導入するメリットは何かね？」と問われモゴモゴしてしまいました。 モゴモゴしすぎて面接は落とされましたw またモゴモゴし…

:isで動的にコンポーネントを変更する方法 動的にコンポーネントを変更する方法としてv-ifを利用する方法がありますが、コンポーネントの数が増えてくると非常に手間になります。 その時に便利なのが:isを利用してパラメーターによってコンポーネントを変更…

vue.jsグローバル登録とローカル登録の違いについて Vue.jsのコンポーネント設計にはグローバル登録とローカル登録の２種類があります。 その違いについてまとめます。 コンポーネントとは 1. ページを構成するUI部品 2. 再利用可能なVueインスタンス コンポ…

? Project name: (hello) プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。 ? Programming language: (Use arrow keys) ❯ JavaScript TypeScript プログラミング言語を選択します。 このコースではJavaScriptを利用します。 ? Pa…

Vuetifyの基礎 そういえば、Vuetifyについて学んだことなかったので、YouTubeで勉強する。 what is Vuetify UIコンポーネント Google Material Designをベースに作られている Vue.jsに特化して作られている 導入 Vuetifyをインストールすると以下のようなフ…

confirmで確認してから削除する方法 ユーザーがリソースを削除するときに、「削除しても良いですか？」みたいな確認フェーズがある方がUXの観点で見ると良いと思われます。 これを実現するには単純でif confirm('削除しても良いですか？）でOKであれば削除、…

Vuexの使いかた 具体的な利用方法の備忘録 概念理解はこちら参照 state ■ Vue.store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { message: "hogehogeMAX" }, mutations: { }, actions: { }, get…

Vuexの基本 Vue.jsのコンポーネントが複数になると、コンポーネント間のデータの受け渡しが複雑になってきます。 その結果、データがどこで変更されたか等のデータの流れが追いづらくなり、メンテナンスが困難なコードとなってしまいました。 このような問題…

v-bindとv-modelの違い HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。 -> 双方向データバインディング HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。 -> 単一方向デ…

コンポーネント ページを構成するUIをコンポーネントで分ける componentは設計図のイメージ。 構成 HTMLベースのテンプレート JavaScriptで書かれたロジック 名称付 ハイフンを一つ以上含むケバブケースを利用する必要あり。それ以外はNG 利用する理由 再利…

フォーム入力バインディング v-modelについてのおさらい 1. データバインディングで、要素のvalue属性を更新する。 2. イベントハンドリングで、受け取った値をデータに代入する 3. 属性は無視される ※1 ※1 v-model利用時はvalue.checked,selectedといった属…

イベントハンドリング v-on new Vue({ el: "#app", data: { counter: 0 }, methods: { clickHnadler: function() { this.counter++ } } }) <div id="app"> <p> {{ counter }} </p> <button v-on:click="clickHnadler"> click </button> </div> クリックするたびにカウントが増える https://jsfiddle.net/hiroki1205/938nqps6/28/ 引…

Vue.jsの条件分岐について if 他に言語のifの書き方とほぼ同じ new Vue({ el: "#app", data: { color: "red" } }) <div id="app"> <p v-if="color === 'red'"> stop </p> <p v-else-if="color === 'yellow'"> Caution </p> <p v-else-if="color === 'blue'"> Go </p> <p v-else> Not anything </p> </div> --> redと表示 v-showとの違い v-showは要素のcssのdis…

クラスとスタイルのバインディング クラスやスタイルをデータバインディングすることで動的な見た目を作ることが出来ます。 クラスデータバインディングのきほん .large { font-size: 30px; } .text-danger { color: red; } new Vue({ el: "#app", data: { i…

監視プロパティ 特定のデータまたは、算出プロパティの状態を監視して、変化があった時に登録した処理を自動的に実行する。 事例）検索フォームの値が変わったタイミングで自動的にajax通信を行って結果を一覧表示 Watchメソッドのサンプル <div id="app"> <p> <input type="text" v-model:value="km">km </p> <p> <input type="text" v-model:value="m">m </p> <p> <input type="text" v-model:value="mm">mm </p> </div> …

算出プロパティ メソッド メソッドなので呼び出しには()がいる 計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う 使えるのはgetterのみでsetterは使えない computed 算出プロパティ データそのものに何らかの処理…

v-bindの省略記法 <a v-bind:href="url"></a> <a :href="url"></a>

vue.jsの基本(テンプレート構文） vue.jsでは様々なテンプレート制御ディレクティブがあります。 有名どころだと以下 v-once -> 初回だけバインディング v-pre -> 要素と全ての子要素のコンパイルをスキップ v-html -> プレーンなHYMLを挿入 v-cloak -> イン…

vue.jsで超簡易的なtodo作成 <div id="app"> <h2>Todos list</h2> <form v-on:submit.prevent> <input type="text" v-model="newItem"> <button v-on:click="addItem"> ADD </button> <ul> </ul></form></div>

Vue.jsのきほん 基本情報をメモ Vue.jsの読み込み方 1. CDN - Content Delivery Netwotk 2. 直接読み込む - ファイルをダウンロードして配置 3. NPM - パッケージ管理ソフトの利用 vueインスタンスの作成 var app = new Vue ({ }) new Vueと記載することで、…

Vueインスタンスのライフサイクルについて Vueのインスタンスが作成されて破棄されるまでのライフサイクルについてのまとめサイト jp.vuejs.org Vue.js + Firebaseで作るシングルページアプリケーション https://www.udemy.com/vuejs-firebase/