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…

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>

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

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

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

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

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

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

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

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

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

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

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

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

更新 新しく更新しました。 こちらの方がいいかもしれないです。 taitoajiki.hatenablog.com 前提 OSに合わせてnpmのインストールが必要 vue-cliインストール 開発環境をセットアップなどをする公式のコマンドラインツール npm install -g vue-cli Webpack W…