カテゴリー：Vue.js
-
【Vue.js】「仮想DOM」について
05.31
仮想DOMとは？ DOMを象ったJavaScriptのオブジェクトになります。 なぜ仮想DOMを使うのか？ DOMに要素を追加したりするのは実際のブラウザに存在するDOMを操作することになるので非常にコストがかかって遅くなります。部分…
-
templateプロパティとは？ そのままタグごとHTMLのテンプレートの中に流し込む事が可能です。Vue.jsのViewの作り方の一つになります。全部丸々テンプレートを上書きしてしまう性質を持つので基本的には使わない機能にはなりますが、…
-
【Vue.js】「リアクティブシステム」の仕組み
05.31
後で追加したプロパティはリアクティブにはならない。 下記のように後でVueインスタンスにプロパティを追加することもできます。ただdataに記述していないデータの場合はVueインスタンスを直接覗いてみれば分けると思いますが、セッターとゲッタ…
-
【Vue.js】「v-for」について
05.31
v-forとは？ リスト形式にレンダリングする事ができます。 配列のv-for inを使用して取得できます。 [crayon-5ed9a81a1fe4a722729411/] オブジェクトのv-for オブジェクトのvalueの…
-
キー修飾子 v-onのイベントkeydown、keyupで使える修飾子のことです。 例 例えば下記のサンプルであれば、keyupイベントに対して、「enter」という修飾子を付加することによってテキストボックスにenterキーを入力し…
-
イベント修飾子とは？ DOMイベント等で最初に行われそうな処理をまとめたもののこと。 よく使うイベント修飾子 他にも様々な修飾子があるのですがよく使われるのは下記の修飾子になります。 stop prevent s…
-
【Vue.js】「v-bind」について
05.30
v-bindとは？ タグの属性にVue.jsのデータを挿入する事ができるディレクティブです。 基本的な使い方 [crayon-5ed9a81a20b59927299649/] 複数の属性値を並べる場合 複数の属性値を並べる場合は下…
-
【Vue.js】「v-html」について
05.30
v-htmlとは？ 画面にそのままhtmlタグを適用して出力させる事ができます。なので、v-textではできない文書内での改行の出力なんかに使われていたりします。 注意点 タグを解釈して実行させることになるので、JavaScriptコ…
-
コンポーネントからVuexにアクセスするには二つの方法があります。 this.$storeにより直接使う方法 Vuexが提供しているヘルパー関数を使用する方法 this.$storeによるアクセス ルートのコンポーネ…
-
【Vue.js】「ミックスイン」について
04.12
ミックスインとは？ 機能を再利用するための仕組みでオブジェクトとして定義して複数のコンポーネント間で共有して使えるようにするための仕組みです。 ミックスインを使うポイント 複数のコンポーネントで同じコードを繰り返し記述していることに気…