zgow

html・css

Visual Studio Codeでhtmlを使うための準備

Visual Studio Codeでhtmlを使うための準備 Visual Studio Codeのインストール まずは、VSCodeのインストールを行う。 VSCodeのインストールは下記サイト参照 VSCodeインストール Vis...
Visual Studio Code

Visual Studio Code アウトライン

アウトライン導入 Visual Studio Codeでは、バージョン1.25から、アウトライン機能を使えるようになりました。 アウトラインとは アウトラインは、VSCodeにおいては、変数や入れ子構造になっている箇所を、わかりやすく階層リ...
Visual Studio Code

Visual Studio Code 行削除

Visual Studio Codeでは、行を丸ごと削除するには、ショートカットキーが便利です。 行削除ショートカットキー Ctrl+Shift+K デフォルト設定の場合、上記のショートカットキーで、 選択している行の内容を、一発で削除し...
Vue.js

Vue.js 算出プロパティ

算出プロパティとは 算出プロパティは、Vueインスタンスが持っているcomputedという名前のプロパティのことで、 メソッドに近い感覚で使うことができ、 値を処理して、テンプレート側に処理した値を渡すことができます。 メソッドとの違い...
Vue.js

Vue.js v-bind v-onの省略

v-bindとv-onには、特別な省略の仕方があります。 公式ドキュメントから引用させて紹介させていただきます。 v-bindの省略 <!-- 完全な構文 --> <a v-bind:href="url"> ... </a> <!-- ...
Vue.js

Vue.jsのテンプレート

テンプレートにVueインスタンスのdataの値を表示 テンプレートにhtmlコード内で、Vueインスタンスのdataの値を表示する場合は、 {{ dataに入っているキー変数 }}で表示できます。 (例) <span>Message: {...
Vue.js

Vue.js Vueインスタンス基礎

Vueインスタンスとは Vueインスタンスは、dataプロパティやelプロパティ等を保持しており、 これらのプロパティの値を変更して、画面側や処理に影響を与えます。 Vueインスタンスの作成 Vueインスタンスは下記のようにnewを作って...
Vue.js

Vue.js v-model基礎

公式ドキュメントのユーザー入力の制御の項目で説明しているv-modelについて記載していきます。 v-modelは双方向バインディングができる 双方向バインディングとは 双方向バインディングとは、 Vue.jsではVueインスタンスのda...
Vue.js

Vue.js v-onでボタンイベント制御する

v-onでボタンイベントを受け取って制御する 公式ドキュメントのユーザー入力の制御の項目で説明しているイベントリスナの制御について記載します。 サンプルコード html <html> <head> <script src=...
Vue.js

Vue.js ディレクティブとは

ディレクティブとは v-bind属性やv-for属性など、 Vue.js固有のhtmlタグの属性のことをディレクティブ呼ぶそうです。 公式ドキュメント参照