Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsの機能を使って色々作ってみた
Search
ls_pr
February 17, 2020
Programming
0
290
Vue.jsの機能を使って色々作ってみた
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
130
自作PCのすすめ
ls_pr
0
70
ツボを押さえたWFの作り方
ls_pr
0
60
Linuxのちょこっと調べ
ls_pr
0
50
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
160
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
49
ejsのすすめ
ls_pr
0
87
JSにおける正規表現
ls_pr
0
62
NuxtではじめるVue.js
ls_pr
0
220
Other Decks in Programming
See All in Programming
敵対的ポイフル
futabato
0
120
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Try creating your own orderedmap
kazamori
1
170
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Sheets API使ってみた
toshi0383
2
160
Fast JSX: Don't clone props object #28768
yossydev
1
160
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.4k
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
420
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
見た目から始める生産性向上
ikumatadokoro
10
1.3k
Ruby GitHub Packages
bkuhlmann
0
640
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
For a Future-Friendly Web
brad_frost
172
9k
RailsConf 2023
tenderlove
8
550
Done Done
chrislema
178
15k
Writing Fast Ruby
sferik
622
60k
How STYLIGHT went responsive
nonsquared
92
4.8k
Gamification - CAS2011
davidbonilla
77
4.6k
How to train your dragon (web standard)
notwaldorf
74
5.2k
A better future with KSS
kneath
231
16k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Transcript
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
設計 1.変化前の状態をマークアップ・CSSを記述(略) 2.mountedでイベントリスナーを追加し、スクロール位置を取得 3.変化後の状態をCSSで記述
2.mountedでイベントリスナーを追加し、 スクロール位置を取得 mouted:DOMが作成された後一度実行される この時点でイベントリスナーを追加 •右のjsの解説 ・mountedで、スクロール/ロードされた時点で 関数”setCoordinate”を実行するよう設定 ・setCoordinate: スクロール位置をcoordinateYに代入する関数
2.mountedでイベントリスナーを追加し、 スクロール位置を取得 coordinateY(=スクロール位置)が40より大の時 #appにクラス”fixed”を追加
3.変化後の状態を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
以上です ありがとうございました