はじめに
当記事の構成
下記についてのサマリーになります。
- 投稿済Vue.jsの記事名
- 投稿済Vue.jsの記事概要
- 未投稿Vue.jsの記事名or概要
目的
下記2点です。
- 筆者が整理し易くする為
- 訪問者の目的に沿った記事を見つけ易くする為
今後、Vue.js関連の記事を追加するときの参考にする予定です。
Vue.js
概要
Vue.js とは？【JavaScriptのフレームワーク】Vue.jsについてご説明します。
この記事の読者の想定は下記の通りです。
「Vue.js」とは何かを知りたい
...
「Vue.js」(ビュージェイエス)というものが何者なのか、極簡単に触れている。
「Vue.jsを習得したい」と考えるなら、前提としてJavaScriptの習得が必須。
インストール方法
CDN
【Vue.js】インストール方法について【CDN】JavaScriptフレームワークである「Vue.js」のインストール方法について説明します。
Vue.jsのインストール方法...
手軽なインストール方法。
HTMLに1行足すだけでVue.jsのインストールが済む。
小規模な開発ならこれで足りる。
下記のページに載せている、ToDoList, BitcoinPrice, BMI算出サイト3つともCDNでインストールした環境で開発してる(190909時点)。
【実験室】開発したもの【勉強目的が主】はじめに
この頁について
下記経緯で開発したものを置いておく。
勉強目的
便宜に供する為
注意事項
...
CLI
【Vue.js】Vue CLI 3.0.1 導入方法【環境構築】Vue.jsの複数ある環境構築方法の内、「Vue CLI」(v3.0.1)を導入する方法を説明する。
環境
筆者の環境
...
中規模以上の開発に向いているインストール方法。
構文
マスタッシュ構文
【Vue.js】マスタッシュ構文【Hello world!】JavaScriptフレームワークである「Vue.js」のマスタッシュ構文について説明します。
マスタッシュ構文(Mustache構文...
Vue.js特有のテキスト展開記法。
{{ dataプロパティ名 }} で書くが、この{{}}が口髭(マスタッシュ)のようなところからそう呼ばれる。
ディレクティブ
属性のデータバインディング – v-bind
【Vue.js】v-bind【属性のデータバインディング】Vue.jsのv-bindディレクティブについて説明します。
v-bindディレクティブとは？
属性のデータバインディング
v-b...
マスタッシュ構文と同様にデータ展開の方法。
v-bindは属性(hrefやvalue等)にかかる。
条件付きレンダリング – v-if
【Vue.js】v-if【条件付きレンダリング】Vue.jsのv-ifディレクティブについて説明します。
v-ifディレクティブとは？
条件付きレンダリング
v-ifとは、表示・...
初期表示コストは低め、切り替えコスト高め
条件付きレンダリング – v-show
【Vue.js】v-show【条件付きレンダリング】Vue.jsのv-showディレクティブについて説明します。
v-showディレクティブとは？
条件付きレンダリング
v-show...
初期表示コストは高め、切り替えコスト低め
v-if と v-showの違い
【Vue.js】v-ifとv-showの違い【DOM上の有無】Vue.jsのv-ifディレクティブとv-showディレクティブの共通点と差異について説明します。
v-ifとv-showの共通点
...
切り替えが多いならv-show, 切り替えが多くない(=初期表示コストを重視する)ならv-ifを推奨する。
配列に要素をマッピング – v-for
【Vue.js】v-for【配列に要素をマッピング】Vue.jsのv-forディレクティブについて説明します。
v-forディレクティブとは？
配列に要素をマッピング
v-forとは...
体感では他の言語でいうfor文よりもforeach文に近く、配列から要素を取り出したり、オブジェクトからkeyやvalue、indexまでも取り出せる。
要素にイベントリスナをアタッチ – v-on
【Vue.js】v-on【要素にイベントリスナをアタッチ】Vue.jsのv-onディレクティブについて説明します。
v-onディレクティブとは？
要素にイベントリスナをアタッチ
v-onと...
イベント処理に関連付ける。
双方向データバインディング – v-model
その他
プロパティ
監視プロパティ – watch
算出プロパティ – computed
コンポーネント
