こんにちは。 本日はVueメモです。 概要 slot 名前付きslot 概要 用意したコンポーネントに親側からコンテンツを差し込めるようにする。 このとき使用するのがslotと呼ばれるもの。 本記事では、slotと名前付きslotについて記載します。 slot まずはサンプル…

こんにちは。 本日はVue.jsの入門編です。 概要 サンプルコード 概要 ルーティングにはvue-routerを使用します。 CDNで読み込む、もしくはインストールする必要があります。 router.vuejs.org サンプルコード トップページとメインページへのルートを定義し…

こんにちは。 本日はVue.js入門編の続きです。 概要 コンポーネントの親子関係とは？ propsとは？ サンプルソース 親子関係のサンプル propsを用いたデータの受け渡しサンプル 概要 コンポーネントの親子関係とは？ 親子関係は、コンポーネントを使う側・使…

こんにちは。 本日はVue.jsの入門編です。 概要 グローバル登録 ローカル登録 概要 まず、コンポーネントについて。 コンポーネントは再利用可能な名前付きVue インスタンスです。 作成したコンポーネントの登録には 「グローバル登録」と「ローカル登録」の…

こんにちは。 本日はVue.js入門編の続きです。 概要 methodsとは サンプルソース 概要 methodsとは methodsを使用することで、 Vueインスタンスのメソッドに追加することができます。 methodsで定義すると、 テンプレート内からのアクセスも可能です。 サン…

こんにちは。 本日はVue.jsの入門編です。 概要 v-modelとは サンプルソース 概要 v-modelとは フォームを作成するには、v-onとv-bindを使用して作成することができます。 だた、全てに2つを記述するのは面倒ですよね。 そこで、v-modelディレクティブの登場…

こんにちは。 本日はVue.jsの入門編です。 概要 v-onとは？ サンプルソース 概要 v-onとは？ v-onディレクティブを使用すると イベント発生時に属性値に指定した式を実行することができます。 他にも、$event変数を使用することで メソッドに直接DOMを渡すこ…

こんにちは。 本日はVue.jsの入門編です。 概要 v-forとは サンプルソース 概要 v-forとは v-forディレクティブで、配列もしくはオブジェクトのデータを リストレンダリングを行うことができます。 記載方法は以下です。 v-for="要素 in 配列" v-bind:key=..…

こんにちは。 本日はVue.jsの入門編です。 概要 v-bind:styleとは サンプルソース 1つのスタイルを設定する 複数のスタイルを設定する 概要 v-bind:styleとは v-bindディレクティブの1つで、 ディレクティブの引数の属性名にスタイルを指定します。 指定する…

こんにちは。 本日はVue.jsの入門編です。 概要 v-bind:classとは サンプルソース 概要 v-bind:classとは v-bindディレクティブの1つで、 ディレクティブの引数の属性名にclassを指定します。 オブジェクトや配列を属性値に指定することで、 クラスを動的に…

こんにちは。 本日はVue.js入門編です。 概要 サンプルソース 概要 v-if、v-showともに表示・非表示を切り替える際に使用します。 どちらも使用方法は同じで v-if="真偽" or v-show="真偽" と記載します。 真の場合は、表示。 偽の場合は非表示となります。 …

こんにちは。 本日はVue.js入門編です。 概要 算出プロパティ(computed)とは thisによる参照とは サンプルソース 概要 算出プロパティ(computed)とは 以前紹介したMustacheで複雑なJavascript式を記述したりする場合、 コードが肥大化して見にくくなってしま…

こんにちは。 本日はVue.jsの入門編。 filtersについて記載します。 概要 サンプル 概要 フィルタは一般的なテキストフォーマットを設定する際に使用します。 使用する際は、Mustacheもしくはv-bindで使用します。 定義したフィルタはテンプレートに以下のよ…

こんにちは。 本日はVue.jsの入門編。 v-bindについて記載します。 概要 サンプル 概要 v-bindとはVue.jsのディレクティブの1つでDOM要素の属性に対して展開します。 ちなみに、属性の展開にはMustacheは使用できません。 Mustacheについては以下の記事を参…

こんにちは。 本日はVue.jsの入門編。 Mustache構文について記載します。 概要 サンプル 概要 Vueインスタンスのデータをテキストに展開したい。 そのときに使用できる構文の1つがMustache構文です。 2重括弧で値、データもしくは式を挟んで使用します。 例…

こんにちは。 Vue.jsの勉強を始めたのでメモします。 Vue.jsって何？ プログレッシブフレームワーク Vue.jsの特徴 Hello Worldの表示 参考 Vue.jsって何？ プログレッシブフレームワーク アプリケーション開発を進めていくと 最初に選択したフレームワークで…