【完全ガイド】ゼロからしっかり理解したい人向けのNuxt.js入門 | アールエフェクト
本文書ではVue.jsのフレームワークであるNuxt.jsを使ってアプリケーションの開発を効率的に行いたいという人を対象にNuxt.jsのインストールを行った実環境を利用して動作確認を行いながら基本機能の説明を行っています。 Vue.jsのシンプルなコードで記述していますがVue.jsの知識があることを前提に説明を行なっているためVue.jsを知らない人には少し難しい内容になっています。Nuxt.jsを使いこなためにはvue.jsを理解する必要があるのでNuxt.jsを学習する前にVue.jsを先に学習することをお勧めします。 動作確認を行っているNuxt.jsのバージョンはv2.15.7です。現在はNuxt 3のRelease Candidateを利用することができます。最新バージョンのNuxt 3のチュートリアルではないので注意してください。Nuxt 3がリリースされたのでNuxt 3
Vue.jsサンプルコード（29）フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える｜TechRacho by BPS株式会社
前記事: 28. 文字の大きさをボタンで変更する 次記事: 30. パスワードを自動生成する 29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える Vue.jsバージョン: 2.5.2 [全角]フィールドに入力する英数字は全角に、[半角]フィールドに入力する英数字は半角になります。 日本語入力には影響しません。 画面をリロードすると最初の状態に戻ります。 ポイント watchで変数の変更を監視しています。watchの内部で変数をさらに変更しても無限ループになりません。 const vm = new Vue({ el: "#app", data: {a: "", b: ""}, watch: { a: function(v) { this.a = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharC
【React/Vue】なぜコンポーネントベースでWebアプリを作るのか
React/Vue などを使ってフロントエンドを開発する際、基本はコンポーネントベースで設計・開発すると思います。 なぜコンポーネントベースなのか、どういうメリット・目的があるのか、今一度確認する機会があったので記事にします。 コンポーネントが持つべき 5 つの特徴 はじめにコンポーネントのあるべき姿ついて確認しておきます。 単一責任の原則 コンポーネントが責任を持つ問題は 1 つにするべきです。 ソースがシンプルになることで可読性が向上します。 また、ソース変更時の影響範囲が明確になることで保守性が向上します。 カプセル化されている コンポーネントを使いたいとき、インターフェースだけ知っていれば内部の実装を気にしなくて良いです。 置換可能である インターフェースさえ同じであれば違うコンポーネントに差し替えることができます。 再利用可能である 再利用可能なコンポーネントは、そのコンポーネン
【Vue.js】登録処理後、検索結果を維持した一覧画面に遷移し、かつ「登録完了」のトーストを表示させ・・・ - Qiita
【Vue.js】登録処理後、検索結果を維持した一覧画面に遷移し、かつ「登録完了」のトーストを表示させ・・・Vue.jsVuex それを共通化する というお話です。 いきさつ 現在仕事でVue.jsを書いており、上記のことを頼まれ実装したので備忘録として。 使用しているライブラリ ・Vuex ・Vue Router ・BootstrapVue 流れ こんな感じです。 ・子コンポーネント(Main.vue)はウォッチャで前画面の情報をstoreに保持させている。 ・孫コンポーネント(Form.vue)で登録ボタン押下、登録処理後にmixinsで呼び出したメソッドで一覧画面へ。 ・親コンポーネント(app.vue)がクエリにtoast_typeがあることを検知すると、トーストを表示させる。 ・toast_typeがクエリにない一覧画面に遷移する。 今書いてて思いますが、絶対もっと良い方法があると
なんで Vuex はなるべく避けるの？ | 民主主義に乾杯
# Vuex はなるべく避ける Vuex は、グローバル変数 state を使うために使います。 actions, mutations でグローバル変数 state を変更し、getters でグローバル変数 state を参照します。 たかだかグローバル変数 state を変更するだけで、こんなに大きな Vuex というライブラリがあるのか、疑問でした。 Vuex は、「いつ」、「どこで」、「だれが」、変更したのかを監視するためのライブラリです。 また Vue.js devtools を使えば、「いつ」、「どこで」、「だれが」 グローバル変数 state を変更 mutation したかを確認することができます。 Vue.js devtools - Chrome ウェブストア (opens new window) これら、いつ、どこで、だれが、変更したのかを監視したいという「気持ち」と、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク