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

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

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

no image

プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

JSがらみでちょっとした小ネタを。 Contents1 プルダウン連動2 動的要素へのイベント追加(ライブラリのイベントなど) プルダウン連動 大カテゴリ→小カテゴリなどとあった場合に、新規だけではな …

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

npmでのjQueryライブラリの読み込み+datepickerメモ

npm経由でjQueryやDatepickerなど一般的なライブラリをrequireしてビルドする手法について。 以前も下記エントリーで書きましたが、再学習。 npmでのJSライブラリインストール&ビ …

アーカイブ