WEB掻っ穿じり

WEB備忘録とチャリとカメラ

【備忘録】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座標
clientYY座標
screenXイベント発生時のスクリーン上でのX座標
screenYY座標
pageXイベント発生時のページ上でのX座標
pageYY座標
offsetXイベント発生時の要素上でのX座標
offsetYY座標
stopPropagation()イベントの親要素への伝達を中止(バブリングキャンセル)
preventDefault()イベント既定の動作をキャンセル

フォーム系ディレクティブ

フロントのフォーム開発は、Vue.jsアプリ実行の基点、肝。

双方向データバインディング

データオブジェクトテンプレート な同期を可能にする仕組み。

See the Pen dataBinding by birdwing3 (@birdwing3) on CodePen.

こんな感じで入力されたデータが即座にデータオブジェクトにも反映され、文字列が更新される。

ファイル入力ボックス

See the Pen fileUpLoad by birdwing3 (@birdwing3) on CodePen.

入力値の空白を除去 〜.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.

ここまで。。

comments powered by Disqus