カテゴリー:Vue.js
-
05.30
【Vue.js】「v-bind」について
v-bindとは? タグの属性にVue.jsのデータを挿入する事ができるディレクティブです。 基本的な使い方 [crayon-67d862629d60e497070992/] 複数の属性値を並べる場合 複数の属性値を並べる場合は下…
-
コンポーネントからVuexにアクセスするには二つの方法があります。 this.$storeにより直接使う方法 Vuexが提供しているヘルパー関数を使用する方法 this.$storeによるアクセス ルートのコンポーネ…
-
04.12
【Vue.js】「ミックスイン」について
ミックスインとは? 機能を再利用するための仕組みでオブジェクトとして定義して複数のコンポーネント間で共有して使えるようにするための仕組みです。 継承との違い 継承は、基底クラスを受け継ぎながら新しい機能を追加するのに対してミックスイン…
-
基本方針 どのような親コンポーネントから使用されたとしても耐えうるように疎結合なインターフェイスにする。 コンポーネントは再利用されることを意識した設計にする。(親コンポーネントに依存しない設計にする。) 分割の方法…
-
コンポーネントの理解で重要なこと Vueコンポーネントは再利用可能なVueインスタンスです。 elオプションについて 最上位のVueインスタンスにしか追加できません。 コンポーネントは様々な箇所で利用されるのでelオプションを指…
-
Vuexの役割 アプリケーションの状態管理をしてくれます。アプリケーションを開発していると一つの状態を複数の場所で参照したいという状況が必ず生まれます。もし何も考えずに実装してしまうと同じ種類の状態や状態を更新するロジックをアプリの複数箇…
-
SFC(Single File Components、単一ファイルコンポーネント)とは? コンポーネントのHTML、CSS、JavaScriptを一つのファイルに記述して「.vue」という拡張子をつけたモジュールのことです。SFCとも呼ば…
-
ウォッチャとは? データの変更を監視して登録しておいたイベントハンドラを呼び出してくれる機能 ウォッチャの仕組み コンポーネント毎に存在しており、コンポーネントのデータ(算出プロパティを含めて)を全て監視しています。 イベントハ…
-
04.05
【Vue.js】「フィルター」について
フィルターとは? {...}で出力されるデータがテキスト出力させる前に何らかの加工を加えることができる機能です。 用途例 主にフォーマッター用途で使われることが実務では多いです。 金額を3桁でカンマ区切りにしたり 計算…
-
v-if 条件によって出力させるかさせないかの切り替えができます。 構文 1文のみ [crayon-67d862629f44d307482527/] まとまった範囲の条件式 下記のように記述すれば複数行の内容の条件文を記述するこ…