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

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

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

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

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

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

アーカイブ