Vue.jsの機能を使って色々作ってみた

Vue.jsの機能を使って色々作ってみた（株）ロジカルスタジオ土谷隆秀

当発表の概要・Vue.jsは非常に書きやすいフレームワークである・ディレクティブ、ウォッチャー、バインディング等、便利な機能が用意されている・Vue.jsの機能を使っていろんなものを作ってみたので、当発表ではそれをお見せします

自己紹介名前:土谷隆秀所属:(株)ロジカルスタジオ職業:コーダー / ブログライター / 勉強会スタッフ Javascript歴:約半年
Vue.js歴：3ヶ月弊社ブログにて記事を書いています(T.K) http://develop.logical-studio.com/

ハンバーガーメニュー @clickの使用とClassのバインディング

ハンバーガーメニューとはボタンを押すと展開するナビゲーションメニュースマホサイトなどでよく使われる https://logical-studio.com/

ハンバーガーメニューの設計 1.ボタン、メニュー、オーバーレイを作る（略） 2.@clickで、ボタンをクリックするとメニューが出るようにする 3.CSSにtransitionを追記し、なめらかに動くようにする https://codepen.io/ls_pr/pen/zYxLRwm

2.@clickで、ボタンをクリックするとメニューが出るようにする・pタグ（ボタン）を押すことで、 isOpenの真偽値を切り替える記述： @click=“isOpen=!isOpen” ・isOpen=trueの時、 #wrapにクラス”active”をつける記述： :class=“{
active : isOpen }”

2.@clickで、ボタンをクリックするとメニューが出るようにする CSSで、・表示前：activeをつけずに記述・表示後：activeをつけて記述表示方法はお好みで例：右からスライド、中央から拡大、など ※フェードインの場合は注意（後述） v-ifを使うやり方もあるが省略

3.CSSにtransitionを追記し、なめらかに動くようにするオーバーレイ部分はフェードインする ▪問題点 CSSに #hoge{opacity:0;} .active #hoge{opacity:1;} と書くと、要素は残ったまま →要素の下にあるものを操作できない

3.CSSにtransitionを追記し、なめらかに動くようにする – 完成 ▪解決法 •CSS 表示前：{width:0;height:0;opacity:0;} 表示後：{width:100%;height:100%;opacity:1;} •CSS –
transition 右図を参照 https://codepen.io/ls_pr/pen/zYxLRwm 同様にモーダルウインドウも作成可能

スクロール量により状態が変わるヘッダー mountedの使用

作りたいものサンプルをご覧ください https://codepen.io/ls_pr/pen/eYmQgpr

設計１．変化前の状態をマークアップ・CSSを記述（略）２．mountedでイベントリスナーを追加し、スクロール位置を取得３．変化後の状態をCSSで記述

２．mountedでイベントリスナーを追加し、スクロール位置を取得 mouted:DOMが作成された後一度実行されるこの時点でイベントリスナーを追加 •右のjsの解説・mountedで、スクロール/ロードされた時点で関数”setCoordinate”を実行するよう設定・setCoordinate：スクロール位置をcoordinateYに代入する関数

２．mountedでイベントリスナーを追加し、スクロール位置を取得 coordinateY(=スクロール位置)が40より大の時 #appにクラス”fixed”を追加

３．変化後の状態をCSSで記述ネスト化しやすい https://codepen.io/ls_pr/pen/eYmQgpr

入力内容によってエラーメッセージを出す computedの使用

作りたいもの •フォーム内の文字が10文字以内の時エラーメッセージなし •フォーム内の文字が11文字より多い時エラーメッセージを出す https://codepen.io/ls_pr/pen/MWYxgrW

設計 1．フォームとエラーメッセージ表示箇所を作成 2．computedを用いてメッセージの内容を作成 3．マスタッシュ（{{ }}）でエラーメッセージを表示 4．エラー時にフォームのcssを変える

1．フォームとエラーメッセージ表示箇所を作成 input内の値を、inputTextとバインディング

2．computedを用いてメッセージの内容を作成 ▪computed:算出プロパティ methodsと違い、常に値が更新される •右のjsの解説・inputTextが10文字より多い時 errorMessage=’10文字より多いです’ ・inputTextが10文字以内の時 errorMessage=‘’

3．マスタッシュ（{{ }}）でエラーメッセージを表示 {{ errorMessage }}

4．エラー時にフォームのcssを変える errorMessageがある（errorMessage !== ‘’）の時クラスをつけ、スタイルを変更 https://codepen.io/ls_pr/pen/MWYxgrW

以上ですありがとうございました

Vue.jsの機能を使って色々作ってみた

Vue.jsの機能を使って色々作ってみた

ls_pr

More Decks by ls_pr

Other Decks in Programming

Featured

Transcript