Vue

開発日記 Vue編 ~v-for VueRouter~

vue

v-forとprop v-forのデータをpropするときは:○○にしなければいけない :がつくと変数で、つかない場合は文字列の認識になる。 <v-row v-for="p in placeholders" :key="p" :justify="justify"> <fieldInput :placeholder="p"></fieldInput> </v-row> VueRouterを複数ファイル VueRouter を複数ファイルで扱う場合は ...名前で書く import { RouteConfig } from "vue-router"; im…

Vue Vuetify編 -初学- ~デザインは価値!~

Vue

Vuetifyとは Vue.js用、マテリアルデザインのフレームワーク! まずマテリアルデザインとは シンプルなデザインでディスプレイサイズに合わせて最適化しやすくしよう というGoogleが発表したデザインガイドライン。(2014年) Vuetify使い方 <template> <v-app> <v-content> <v-container fluid> <v-layout wrap> <v-flex xs12 sm5></v-flex> <v-flex xs12 sm5></v-flex> </v-layout> </v-container> </v-content> </v-app> …</template>

Vue フォルダ構成編 -AtomicDesign- ~後々楽になる~

Vue

AtomicDesign 今回はAtomicDesignの考えのもと、フォルダ構成していきたいと思います。 AtomicDesignとは 一言で言うと5段階に区切って定義するUIデザイン手法。 5段階とは、Atoms(原子),Molecules(分子),Organisms(有機体),Templates(テンプレート),Pages(…

Vue TypeScript 新環境構築編 ~現時点の最新~

Vue

前提 Node.jsのインストールでnpmコマンドが使えること。 vue/cliより@vue/cliの方が新しいみたいなのでこちらも載せます。 インストール @vue/cliをインストール npm install --global @vue/cli プロジェクト作成 vue create [project naeme] その後にいく…

Vue TypeScript 環境構築編 ~準備が大事!~

Vue

前提 プロジェクトが作成してあることが前提。 プロジェクト作成時にes-lintをNoにしてください。 vue init webpack プロジェクト名 実行 必要なものをインストール npm i -D typescript webpack webpack-cli ts-loader@3.5.0 css-loader vue vue-loader vue…

Vue VueRouter編 -最終章- ~ありがとうVue.js~

Vue

ナビゲーションガード 遷移を操作するためのフックのこと。 遷移を中断させたりタイミングを操作する。 ナビゲーションガードの引数 next()関数が重要。 遷移をさせない時にはnext(false)にする。 複数のフックを併用できるが、それぞれのフックで解決した後…

Vue SPA VueRouter編 -第1章- ~最高の品質を!~

Vue

SPA SPA(Single-page Application)は一つのウェブページを使用して内容のみを変えて 画面遷移させるアプリケーション設計のこと。 Vue Routerインストール npm install vue-router src/router.js import Vue from 'vue' import VueRouter from 'vue-router' …

Vue SPA Vuex編 -第2章- ~Vuexの完全理解!~

Vue

ストアの分割 ストアはモジュール化し、分割することで管理しやすくする。 モジュールの使い方 オブジェクトで定義したモジュールを、ストアのmodulesオプションに登録する。 モジュール定義 const moduleA = { } const moduleB = { } ストアに登録 const st…

Vue SPA Vuex編 -第1章- ~VuexはDB!~

Vue

Vuex 状態管理の拡張ライブラリで、データとその状態に関する全てを一元管理する。 特徴 Vuexによって管理されているデータはリアクティブになっているため、 構造状態に関わらず常に同期されている。 またデータの管理や、状態を管理できるモジュール機能な…

Vue SPA 基礎編 ~フロントエンドへの一歩~

Vue

Vue CLI 環境構築編でも触れましたが、 Vue CLIとは開発支援のためのコマンドラインインターフェース。 アプリケーションのビルドなどの支援をする。 またwebpackに必要なファイルを自動的に作成もする。 webpack こちらも環境構築編で触れましたが、 複数の…

Vue コンポーネントクライマックス編 -第3章- ~Vueマスター!~

Vue

スロット スロットは親から子コンポーネントにテンプレートの一部を差し込む機能で コンテンツやテンプレートの一部をカスタマイズする際に使用する。 デフォルトスロット HTML <parent>埋め込みたいもの</parent> HTML <div class="child"> <slot>埋め込まれる場所</slot> ->このまま実装すると[埋め込みたい</div>…

Vue コンポーネント親子関係編 -第2章- ~関係を制覇しろ!~

Vue

親子関係(親子コンポーネント) テンプレートで他のコンポーネントを使用すると親子関係になる。 propsとカスタムイベントを使用する。 親コンポーネント→子コンポーネント データバインディングで親のデータを子コンポーネントが使用できる。 props downとい…

Vue コンポーネント基礎編 -第1章- ~コンポーネントは核である!~

Vue

コンポーネント テンプレート(html)とJavaScriptをセットにして、 機能ごとに分割して管理できるようにする仕組み。 例:headerのセット,mainのセットとして最終的に組み合わせる。 コンポーネントの定義 Vue.componentメソッドでグローバルに登録しすべての…

Vue 算出プロパティとトランジション編 ~自由なデザインを!~

Vue

算出プロパティ 算出プロパティとは処理を含めることができるデータのこと。 ゲッター(取得) セッター(代入) 算出プロパティへの代入を行う場合エラーになる。 しかし、getで値を取得し、setでプロパティに代入することで対応できる。 キャッシュ機能 算出プ…

Vue 基本バインディング編 ~UI革命~

Vue

リアクティブシステム リアクティブシステムとは Vueの内部の核となるシステムで 同期や最適化などを行う。 データバインディングはその機能の内の1つである。 リアクティブシステム中のデータをリアクティブデータという。 クラスのデータバインディング HT…

Vue 基礎知識編 ~幸福のSPA!~

Vue

用語 データバインディング データと描画を同期させる。 コンポーネント 機能ごとに分離して開発できるようにする仕組み。 ディレクティブ (v-で始まる) データ用オブジェクトのプロパティ フック あらかじめ決めたタイミングで処理を行わせること。 <div v-○○:○○></div> 参考に…

Vue 環境構築編 ~最初だからこそ!~

Vue

前提 OSに合わせてnpmのインストールが必要 vue-cliインストール 開発環境をセットアップなどをする公式のコマンドラインツール npm install -g vue-cli Webpack Webpackはモジュールを束ねるツール。 vue init webpack プロジェクト名 実行 cd プロジェクト…