skillup

技術ブログ

JavaScript

vueについてのポイント

投稿日:2019年10月20日 更新日:

vueについて学習した時のポイントなどを。

機能として確認したこと

  • text,radio,select,checkboxを含んだ新規と既存、一覧のDB連動アプリ
  • 親→サブコンポーネント×2(親からのグローバル変数アクセス)
  • プルダウン連動(新規、既存)
  • 住所入力補完モーダル
  • ローディングエフェクト

component

Vueの最重要概念。要はHTMLの1部分のこと。ここ自体にhtml+JavaScript+cssを格納でき、この組み合わせで画面を作り上げる。

vue-route

言わずもがなルーティング。Laravelと同じように使える。画面を構成するベースになるコンポーネントと1:1になることが多い。

vuex

グローバル変数の格納。DBとやり取りするような変数は基本的にここを使いそう。慣れるまで結構ムズイ。

  • state:基本的な変数定義
  • getter:読んで字のごとくgetter
  • mutation:setter的使い方をすることが多い
  • action:非同期処理など?まだ使い方わかっておらず

computed

画面上の変数の算出。

一般的にはvuexでグローバル変数との同期をとるような使われ方をするのが一般だと思う。

created,mounted

vueインスタンスが生成される時のライフサイクル

created:DOM生成前

mounted:DOM生成後(ただしこの場合でもデータはまだ画面反映されていない)

emit

親のコンポーネントと子供のコンポーネントで変数をやり取りするときに必要になる。

ソース

https://github.com/umanari145/laravel-vue

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …