html・css Visual Studio Codeでhtmlを使うための準備
Visual Studio Codeでhtmlを使うための準備
Visual Studio Codeのインストール
まずは、VSCodeのインストールを行う。
VSCodeのインストールは下記サイト参照
VSCodeインストール
Vis...
html・css 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タグの属性のことをディレクティブ呼ぶそうです。
公式ドキュメント参照