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

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

vueについてのポイントその2

vueについて少し復習したので、つまりそうなポイントについて再度まとめ。(重複あり) vueについてのポイント 成果物はこちらを https://github.com/umanari145/admin …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

アーカイブ