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

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

npmでのJSライブラリインストール&ビルド(※gulp使用時)

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …