【備忘録】Vue.jsをはじめる - その2 〜基礎編〜
category：web
jQuery依存から脱却しVue.jsをなんとかキャッチアプしたい、、基本の使い方に入ります。
Vue.js基礎
htmlをベースとしたテンプレート構文を採用している。
htmlに対して、 接頭辞 v- で始まるディレクティブ（属性形式の命令を付与することができる。
v- で始まるディレクティブ
| 分類 | 概要 | 主なディレクティブ |
|---|---|---|
| データバインド | 値をページに反映 | v-vind,v-html… |
| イベント | イベント処理 | v-on |
| フォーム | 入力取得 | v-model |
| 制御 | 条件分岐、繰り返し処理など | v-if, v-for |
Vue.jsで使える主なイベント
| 分類 | イベント名 | 概要 |
|---|---|---|
| フォーム | focus | 要素にフォーカスが入ったとき |
| blur | 要素からフォーカスが外れたとき | |
| change | 要素の値を変更したとき | |
| select | テキストを選択したとき | |
| submit | フォームから送信されたとき | |
| マウス | click | 要素をクリックしたとき |
| dbclick | 要素をダブルクリックしたとき | |
| mousedown | マウスのボタンを押したとき | |
| mouseover | 要素にマウスポインターが乗ったとき | |
| mouseenter | 要素にマウスポインターが乗ったとき | |
| mouseleave | 要素からマウスポインターが外れたとき | |
| mouseout | 要素からマウスポインターが外れたとき | |
| mousemove | 要素の中をマウスポインターが移動したとき | |
| mouseup | マウスのボタンを離したとき | |
| タッチ | touchstart | 要素をタップしたとき |
| toucmove | タップしたまま動かしたとき | |
| touchend | 要素からタップを外したとき | |
| ドラッグ* | dragstart | ドラッグを開始したとき |
| dragover | ドラッグした要素が乗ったとき | |
| dragenter | ドラッグした要素が乗ったとき | |
| dragleave | ドラッグした要素が外れたとき | |
| dragend | ドラッグを終えたとき | |
| キー | keydown | キーを押したとき |
| keyup | キーを離したとき | |
| keypress | キーを押し続けているとき | |
| その他 | resize | ウィンドウサイズを変更したとき |
| scroll | ページや要素をスクロールしたとき | |
| error | ページ内でエラーが発生したとき | |
| contextmenu | コンテキストメニューを表示する前 |
*ドラッグはhtml5 draggable="true" で要素をドラッグ可能な状態にできる。
ネイティブ HTML5 ドラッグ＆ドロップ
JavaScriptの基本 イベントオブジェクト
イベントハンドラーからイベントオブジェクトを参照する。
（イベントハンドラーの第1引数に設置）
See the Pen event object by birdwing3 (@birdwing3) on CodePen.
イベントオブジェクトが提供する情報
| メンバー | 概要 |
|---|---|
| target | イベント発生元の要素 |
| type | イベントの種類(click, focus 等) |
| timeStamp | イベントの作成日時を取得 |
| clientX | イベント発生時のブラウザ上でのX座標 |
| clientY | Y座標 |
| screenX | イベント発生時のスクリーン上でのX座標 |
| screenY | Y座標 |
| pageX | イベント発生時のページ上でのX座標 |
| pageY | Y座標 |
| offsetX | イベント発生時の要素上でのX座標 |
| offsetY | Y座標 |
| stopPropagation() | イベントの親要素への伝達を中止（バブリングキャンセル） |
| preventDefault() | イベント既定の動作をキャンセル |
フォーム系ディレクティブ
フロントのフォーム開発は、Vue.jsアプリ実行の基点、肝。
双方向データバインディング
データオブジェクト ⇄ テンプレート な同期を可能にする仕組み。
See the Pen dataBinding by birdwing3 (@birdwing3) on CodePen.
こんな感じで入力されたデータが即座にデータオブジェクトにも反映され、文字列が更新される。
ファイル入力ボックス
See the Pen fileUpLoad by birdwing3 (@birdwing3) on CodePen.
- FormDataオブジェクトに変換
- FormDataにappendメソッドでデータ追加。
- fetchメソッドサーバにデータ送信
入力値の空白を除去 〜.trim 修飾子
入力された文字列から、空白スペースをバインドする前に除去できる。
See the Pen oNXbpyr by birdwing3 (@birdwing3) on CodePen.
bindのタイミングを遅延 〜.lazy 修飾子
入力内容を即座にバインドするのでなく、changeイベントの変更後、フォーム要素からフォーカスを移動させたタイミングでバインド。
See the Pen lazy by birdwing3 (@birdwing3) on CodePen.
制御関連のディレクティブ
if 〜 や for に相当する機能、動的なテンプレートで重宝する。
Boolean型に応じて表示と非表示を切り替える 〜 v-if
if命令に相当するディレクティブ、指定された条件式がtureの時だけ要素を表出させる。
See the Pen if show by birdwing3 (@birdwing3) on CodePen.
配列やオブジェクトを繰り返し処理する 〜 v-for
for命令相当、配列から順に取得、、様々な構文があるのでチェック。
See the Pen v-for by birdwing3 (@birdwing3) on CodePen.
テンプレートのXSS対応の考慮
通常ではVue.jsのテンプレートはデフォルトでセキュリティ的な考慮はされている。
しかし、動的にhtmlを生成する場合、ページに反映する場合は、 v-html を使う。
インらいnスタイルプロパティの設定
スタイルバインディングと言って、以下のような記述で可能。
<p v-bind:style="{backGroundColor: 'red', color: 'white', fontSize: '1.5em'}">.......</p>
複数スタイルを内部で結合された状態で適用もできる。
要素にスタイルクラスを設定
v-bind:classでクラスを付与。
See the Pen v-styleClass by birdwing3 (@birdwing3) on CodePen.
ここまで。。
0