Vue.js入門
Visual Studio CodeでVue.jsを使う準備
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タグの属性のことをディレクティブ呼ぶそうです。
公式ドキュメント参照
Vue.js Vue.js for文
Vue.js機能のfor文を使う
公式ドキュメントの条件分岐とループの項目で説明しているfor文について記載します。
Vue.jsのfor文は、htmlタグの属性にv-forを指定することができ、
そこで配列をループ処理することができま...
Vue.js Vue.js if文
公式ドキュメントの条件分岐とループの項目で説明しているif文について記載します。
Vue.jsのif文は、htmlタグの属性にv-ifを指定することができ、
trueかfalseを見て、そのタグを有効にするかどうかをみています。
...
Vue.js Vue.js v-bindでhtmlの属性に値を入れる
公式ドキュメントの項目：宣言的レンダリングで、v-bindを使っているところの解説をします。
まずは、コードを書いてみます。
サンプルコード html
<html>
<head>
<script src=""></scr...